CSS(层叠样式表)首次发布于1996年12月17日,是一种用来为结构化文档添加样式的计算机语言,由万维网联盟(W3C)定义和更新维护。CSS并非独立使用的工具,而是需要与HTML或XML等标记语言结合,共同实现网页内容的美化。无论是您正在浏览的网页中的字体样式、色彩搭配还是布局设计,都离不开CSS的代码支持。
CSS3 标识
值得注意的是,自CSS问世之初,它并未拥有正式的官方识别标识。直到CSS3标准发布之后,CSS才获得了其首个官方盾牌标识。十多年来,这个盾牌成为了CSS语言的标志性符号。
随着CSS功能的持续丰富和扩展(如已经能够执行过去仅能通过JavaScript实现的任务,支持数学函数,可以转换和设置对象动画等等),原本带有数字「3」的盾牌图案已显得不足以全面展现现代CSS的强大能力。为了庆祝CSS所取得的辉煌成就,并进一步提高公众对CSS最新进展的认识,CSS-Next社区不仅积极探寻新级别的CSS规范,同时也开始着手设计一款更加通用的标识来取代现有的盾牌符号。
CSS新旧标识
今年8月初,谷歌Chrome团队的CSS开发者Adam Argyle发起了一项设计新 Logo 的征集活动,活动吸引了来自世界各地设计师和开发者热情参与。经过数月的公众意见收集和设计迭代,11月12日,CSS 团队经过投票选出了最终的CSS官方标识设计方案。
设计师们为新官方 CSS 标识提交的众多创意方案
选定的标识方案由 Javi Aguilar 提交,该设计是一个配有白色 CSS 文字的紫色底「类圆角矩形」图标,并且提供深色和浅色两种变体,以便在任何场景中使用。根据CSS 通过的徽标使用指南,任何人都可以根据 MIT 许可随意使用该标识,但在使用过程中需要遵循一定的使用规范。
CSS新的官方标志
标识中的文字部分选择使用 DINish 字体。这是一款开源的无衬线字体,其灵感来自德国高速公路路标的字体。该字体由 Bert Driehuis 设计并于2017年10月16日首次公开发布,任何人都可以免费使用,包括商用。
开源字体Dinish Condensed Bold
我们注意到,在Javi Aguilar最初提交的设计方案中,并没有采用最终选定的紫色,而是选择了粉红色。
Javi Aguilar提交的设计方案解释了颜色的灵感来源
Javi Aguilar解释说,他选择粉红色的原因有两个:一方面,这个颜色来源于JavaScript徽标四色色阶中中的一个色调;另一方面,粉红色常常让人联想到化妆,而CSS正如同网络世界的化妆师,负责给网页增添色彩和风格。
Javi Aguilar设计方案颜色灵感
CSS 团队选定该方案后决定将颜色更改为紫色。这个「紫色底」的配色还有一个专属的名字「rebeccapurple」,色值为 #663399。据官方介绍,这个名字是为了纪念 CSS 标准创立以来的重要贡献者 Eric A. Meyer 的女儿 Rebecca。
Rebecca 在六岁时因脑瘤去世,她生前最喜欢的颜色就是紫色。
Javi Aguilar 对官方最终确定的紫色也表示认同,他觉得这个「rebeccapurple」的背后有一个更加美丽而有意义的故事。
目前,新版 CSS Logo 已公开上传至 GitHub。用户可以下载多种格式的图片文件,包括AVIF、SVG、WebP、PNG和JPEG等格式。官方鼓励所有人在提及CSS时使用这一新识别标识。
CSS Logo SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" role="img" aria-labelledby="css-logo-title css-logo-description">
<title id="css-logo-title">CSS Logo</title>
<desc id="css-logo-description">A purple square with rounded corners and the letters CSS inside in white</desc>
<path fill="#639" d="M0 0H840A160 160 0 0 1 1000 160V840A160 160 0 0 1 840 1000H160A160 160 0 0 1 0 840V0Z"></path>
<path fill="#fff" d="M816.54 919.9c-32.39 0-57.16-9.42-74.5-28.35-17.15-19.03-26.08-46.18-26.88-81.64h69.8c.4 31.36 11.42 47.08 33.08 47.08 11.04 0 18.86-3.5 23.37-10.42 4.41-6.9 6.72-17.93 6.72-33.05 0-12.02-3.01-22.04-8.83-29.95a73.2 73.2 0 0 0-29.48-21.14L783.95 750c-23.06-11.02-39.81-24.04-50.14-39.27-10.03-15.13-15.04-36.36-15.04-63.5 0-30.36 8.83-55 26.37-73.94 18.05-18.93 42.62-28.34 74-28.34 30.3 0 53.76 9.31 70.3 27.84 16.85 18.64 25.67 45.28 26.38 80.14h-67.19c.4-11.4-1.9-22.72-6.72-33.06-3.8-7.6-11.23-11.41-22.26-11.41-19.65 0-29.48 11.71-29.48 35.05 0 11.83 2.4 21.04 7.22 28.05A65.18 65.18 0 0 0 822.76 689l24.77 10.92c25.57 11.72 44.02 26.05 55.35 43.38 11.43 17.23 17.05 40.27 17.05 69.12 0 34.56-9.03 61.1-27.38 79.63-18.25 18.53-43.62 27.85-76 27.85Zm-225.42 0c-32.4 0-57.16-9.42-74.51-28.35-17.15-19.03-26.07-46.18-26.87-81.64h69.79c.4 31.36 11.43 47.08 33.1 47.08 11.02 0 18.84-3.5 23.25-10.42 4.52-6.9 6.72-17.93 6.72-33.05 0-12.02-2.9-22.04-8.72-29.95a73.2 73.2 0 0 0-29.48-21.14L558.53 750c-23.07-11.02-39.81-24.04-50.14-39.27-10.03-15.13-15.04-36.36-15.04-63.5 0-30.36 8.82-55 26.37-73.94 18.05-18.93 42.62-28.34 74-28.34 30.29 0 53.75 9.31 70.2 27.84 17.05 18.64 25.77 45.28 26.47 80.14h-67.18c.4-11.4-1.9-22.72-6.72-33.06-3.81-7.6-11.23-11.41-22.26-11.41-19.66 0-29.49 11.71-29.49 35.05 0 11.83 2.41 21.04 7.22 28.05A65.18 65.18 0 0 0 597.33 689l24.77 10.92c25.57 11.72 44.02 26.05 55.36 43.38 11.33 17.23 17.04 40.27 17.04 69.12 0 34.56-9.12 61.1-27.37 79.63-18.25 18.53-43.62 27.85-76.01 27.85Zm-234.75 0c-31.7 0-56.86-8.62-75.51-25.85-18.65-17.12-27.88-42.87-27.88-76.93V648.83c0-33.85 9.83-59.5 29.48-77.13 19.96-17.43 46.13-26.24 78.52-26.24 31.39 0 56.15 9.01 74.5 26.84 18.56 17.93 27.88 44.58 27.88 80.14v13.32h-73.9v-12.92c0-13.72-3.01-23.84-8.83-30.45a26.46 26.46 0 0 0-21.66-10.32c-12.03 0-20.55 4.1-25.37 12.42a79.04 79.04 0 0 0-6.72 36.66v146.26c0 30.55 10.74 46.08 32.1 46.38 10.02 0 17.54-3.61 22.76-10.82a51.74 51.74 0 0 0 7.72-30.46V801.6h73.9v11.42c0 23.74-4.61 43.57-13.94 59.4a88.8 88.8 0 0 1-38.2 35.66 121.46 121.46 0 0 1-54.85 11.82Z"></path>
</svg>
除了制定和维护 CSS,万维网联盟(W3C)还制定了其他标准规范,包括文档对象模型DOM、超文本标记语言HTML、资源描述框架RDF、同步多媒体集成语言SMIL、可缩放矢量图形SVG、可扩展超文本标记语言XHTML、可扩展标记语言XML和网络内容筛选平台PICS等规范。
上图中展示的HTML5 的标志于2011年1月18日公布,该标志由Ocupop公司设计。W3C描述称,HTML的盾牌标志和你编写的标记语言一样坚固、真实、有弹性和通用。它就像那些有远见、专注的web开发人员一样明亮、大胆。这是标准中的标准,是进步的旗帜。
HTML5 的标志造型上和CSS3以及JavaScript(JS)的标志几乎一样,唯一的不同是盾牌的颜色以及内部的文字。需要注意的是,JS本身不是 W3C 的规范,但它与 W3C 的标准有着非常密切的联系。这三种技术都是前端开发的核心组成部分,紧密相连,共同构建了现代网页。因此,在视觉上有一定程度的统一性,可以加强它们之间的关联性。
相关阅读