代码挑战2：字符测试

I’ve been a big fan Kushagra Gour since the early days of Webmaker – his CodePen-like code playground running as a Chrome Extension. I use it most days.

自从Webmaker成立以来，我一直是Kushagra Gour的忠实粉丝 –他的类似CodePen的代码游乐场以Chrome扩展程序的形式运行。 我大部分时间都用它。

More recently he teamed up Kushagra Agarwal to work on a new project ‘CSSBattle.dev‘ – a cool and original blend of CSS coding and golf. Be warned – if you know even a little CSS this can be very addictive.

最近，他与Kushagra Agarwal联手开发了一个新项目“ CSSBattle.dev ”-CSS编码和golf的酷酷原始融合。 警告-如果您知道一点CSS，就会上瘾。

代码挑战2：字符测试 (Code Challenge #2: The Test of Characters)

So, for our second Code Challenge, we’re partnering with CSSBattle to push your CSS skills. Your challenge is to write HTML and CSS in the ‘Editor’ panel that perfectly reproduces the SitePoint Logo graphic in the righthand ‘Target’ panel. Your result renders live in the central ‘Output’ panel. There’s a handy sliding panel on the Output that lets you compare your live rendering with the target image.

因此，对于第二个代码挑战，我们与CSSBattle合作，以提高您CSS技能。 您面临的挑战是在“编辑器”面板中编写HTML和CSS，以完美复制右侧“目标”面板中的SitePoint徽标图形。 您的结果将实时显示在中央的“输出”面板中。 输出上有一个方便的滑动面板，可让您将实时渲染与目标图像进行比较。

Finally, when you think you have a good match with the target, hit the ‘Submit’ button to get your score.

最后，当您认为自己与目标匹配良好时，请点击“提交”按钮以获取分数。

Open this CSSBattle in a new window

在新窗口中打开此CSSBattle

Open this CSSBattle in a new window

在新窗口中打开此CSSBattle

CSSBattlers的提示： (Tips for CSSBattlers:)

• Images and SVG are not allowed.
  不允许使用图片和SVG。

• Pixel perfect matches score much more than merely close matches

  像素完美匹配的得分远不止接近匹配

• Once you have a 100% match, it’s all about reducing your character count. What can you cut?
  一旦您达到100％的匹配率，那就是减少字符数。 你能剪什么？
• CSSBattles aren’t about pretty code. You’d probably be amazed at what you can cut out of CSS before it breaks.
  CSSBattle与漂亮的代码无关。 您可能会惊讶于CSS崩溃之前可以切出的功能。

So, is this code you’d use in normal production? No, probably not, but that’s not the point. I’ve been using CSS for 20 years, yet I’ve learned a bunch of new things via CSSBattles from just trying crazy stuff I’d never usually have any reason to try.

那么，您会在正常生产中使用此代码吗？ 不，可能不是，但这不是重点。 我使用CSS已有20年了，但是我从CSSBattles中学到了很多新东西，它们只是尝试疯狂的东西，而这些东西我通常都没有任何理由去尝试。

奖品 (Prizes)

There are cash prizes awarded to the top 3 ranked competitors for this round ($50, $30, and $20) which concludes in about 3 weeks – but I have to say, the competition at the top is pretty tough. There has to be some Harry Potter incantations shrinking some of these top solutions! However, we’ve also put up 20 Premium Memberships for the top 20 finishers.

在本轮比赛中，将向排名前三的竞争对手颁发现金奖(分别为50美元，30美元和20美元)，这些奖项大约在3周内结束-但我必须说，顶部的竞争非常艰难。 必须有一些哈利波特的魔咒缩小了这些顶级解决方案！ 但是，我们还为前20名完成者设置了20个高级会员资格。

Also, keep in mind, if you’re not quite up to battling for a top 3 spot, you can create your own mini-league of friends and colleagues to compete with bragging rights.

另外，请记住，如果您还没有争取到前三名，您可以创建自己的朋友和同事的迷你联盟来与吹牛的权利竞争。

Check it out and see how you go.

检查一下，看看你怎么走 。

翻译自: https://www.sitepoint.com/code-challenge-2-the-test-of-characters/