我用 CSS 创建了著名的标志

本文最初发表于我的个人博客

CSS 是一个强大的工具，一旦完全掌握它，几乎可以做任何事情。有时我们并没有意识到 CSS 的所有功能，最终选择了一条复杂的路线来完成我们需要做的事情。这就是为什么我们需要不断练习 CSS，提升我们的技能和知识。

我决定接受一个挑战，用 CSS 来设计我们每天都能看到的著名 logo。这个挑战帮助我更好地理解 CSS，并让我明白了可以用哪些方法来达到预期的效果。

我会把这些标志按照难度从低到高列出来。你可以在CodePen上查看全部合集。

谷歌

这个设计的概念很简单。我们用不同的颜色来表示 Google 的字母，基本就是这样。然而，有一个问题，那就是字体。Google 的 logo 使用了一种名为Product Sans的自定义字体，所以我不得不从 Google Fonts 中寻找看起来最接近的字体，最终我选择了Poppins。

YouTube

这又是一个很简单的例子。它本质上是一个盒子，里面有一个三角形。然而，我在把圆角边框做得和标志相似​​方面遇到了一些麻烦，所以只好用最接近的那个。

Facebook

我对 Facebook 徽标遇到的问题与 Google 的类似；我无法使用相同的字体，因为它是一种自定义字体，所以我不得不使用Prompt，因为 f 字母看起来与 Facebook 徽标中的字母最相似。

Instagram

Instagram 的 logo 设计理念很简单，但渐变色有点难。为了做好，我还得借助网络。不过，这次尝试渐变色，也让我看到了它还能发挥出更多的可能性。我之前很少用渐变色，而且每次用都很简单，所以这次尝试对我来说是个不错的练习。

Whatsapp

这个很有意思。我用 CSS 做整个 logo 的时候，还得用 CSS 做中间的手机形状。我遇到的问题是，我不知道该怎么把手机左侧弄得像 logo 里那样圆润。通常我们经常用圆角，很容易做，但我从来没试过用 CSS 做弧形。

于是我在网上搜索，发现了border-bottom-left-radius属性，这个属性我之前就知道了。然而，我可能在初学者时期就学过，但现在完全忘了，这个属性可以取两个值：一个是长度，一个是百分比。长度决定了圆的半径大小，或者说椭圆的长半轴和短半轴，而百分比则代表了盒子（或元素）的宽度或高度。第一个值代表水平轴，第二个值代表垂直轴。这个属性有四种变体，可以对元素的四个边实现相同的效果。

学会这个之后，我能够让手机形状看起来更好，并且我也把它应用到了我设计的其他logo上。我之前从未真正尝试过使用这个属性，所以还需要更多练习。

叽叽喳喳

这幅作品做起来太让人抓狂了，耗时最长。我不得不把它搁置一段时间，过段时间再回来做。虽然它看起来可能不完美，但我仍然为它感到自豪。

我不得不大量依赖:after和:before伪元素，以及我在Whatsapp中学到的border-radius属性。我最需要的是学会跳出固有的思维框架。我把Twitter小鸟的形状分解成4个部分，并逐步完成。虽然有时令人沮丧，但这对我来说是一次必要的练习，不仅对我的CSS技能有帮助，也对我作为开发者的创造力有帮助。

结论

我将进行这项挑战的第二部分，并尝试其他一些著名的标志。如果您有关于标志的想法，可以作为一个很好的挑战，请在评论中留言！我也鼓励您接受类似的挑战，因为这是一个很好的机会，可以摆脱千篇一律的重复，并重新学习我们已知但忘记的知识。