标志情报局 - 全球LOGO新闻和品牌设计趋势平台
  • 手机版
  • 网址导航
  • 投稿
  • 快30岁的 CSS 为自己设计了一个全新的官方标志

    1.1W 2 2 小程序阅读
    微信扫一扫,打开小程序阅读、分享本文
    点击按钮总结全文核心内容,让你的阅读更高效率。

    快30岁的 CSS 为自己设计了一个全新的官方标志

    CSS(层叠样式表)首次发布于1996年12月17日,是一种用来为结构化文档添加样式的计算机语言,由万维网联盟(W3C)定义和更新维护。CSS并非独立使用的工具,而是需要与HTML或XML等标记语言结合,共同实现网页内容的美化。无论是您正在浏览的网页中的字体样式、色彩搭配还是布局设计,都离不开CSS的代码支持。

    快30岁的 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官方标识设计方案。

    快30岁的 CSS 为自己设计了一个全新的官方标志

    设计师们为新官方 CSS 标识提交的众多创意方案

    选定的标识方案由 Javi Aguilar 提交,该设计是一个配有白色 CSS 文字的紫色底「类圆角矩形」图标,并且提供深色和浅色两种变体,以便在任何场景中使用。根据CSS 通过的徽标使用指南,任何人都可以根据 MIT 许可随意使用该标识,但在使用过程中需要遵循一定的使用规范。

    快30岁的 CSS 为自己设计了一个全新的官方标志

    CSS新的官方标志

    标识中的文字部分选择使用 DINish 字体。这是一款开源的无衬线字体,其灵感来自德国高速公路路标的字体。该字体由 Bert Driehuis 设计并于2017年10月16日首次公开发布,任何人都可以免费使用,包括商用。

    快30岁的 CSS 为自己设计了一个全新的官方标志

    开源字体Dinish Condensed Bold

    我们注意到,在Javi Aguilar最初提交的设计方案中,并没有采用最终选定的紫色,而是选择了粉红色。Javi Aguilar解释说,他选择粉红色的原因有两个:一方面,这个颜色来源于JavaScript徽标四色色阶中中的一个色调;另一方面,粉红色常常让人联想到化妆,而CSS正如同网络世界的化妆师,负责给网页增添色彩和风格。

    快30岁的 CSS 为自己设计了一个全新的官方标志

    Javi Aguilar提交的设计方案解释了颜色的灵感来源

    CSS 团队选定该方案后决定将颜色更改为紫色。这个「紫色底」的配色还有一个专属的名字「rebeccapurple」,色值为 #663399。据官方介绍,这个名字是为了纪念 CSS 标准创立以来的重要贡献者 Eric A. Meyer 的女儿 Rebecca。

    Rebecca 在六岁时因脑瘤去世,她生前最喜欢的颜色就是紫色。

    Javi Aguilar 对官方最终确定的紫色也表示认同,他觉得这个「rebeccapurple」的背后有一个更加美丽而有意义的故事。

    目前,新版 CSS Logo 已公开上传至 GitHub。用户可以下载多种格式的图片文件,包括AVIF、SVG、WebP、PNG和JPEG等格式。官方鼓励所有人在提及CSS时使用这一新识别标识。

    快30岁的 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等规范。

    快30岁的 CSS 为自己设计了一个全新的官方标志

    上图中展示的HTML5 的标志于2011年1月18日公布,该标志由Ocupop公司设计。W3C描述称,HTML的盾牌标志和你编写的标记语言一样坚固、真实、有弹性和通用。它就像那些有远见、专注的web开发人员一样明亮、大胆。这是标准中的标准,是进步的旗帜。

    快30岁的 CSS 为自己设计了一个全新的官方标志

    HTML5 的标志造型上和CSS3以及JavaScript(JS)的标志几乎一样,唯一的不同是盾牌的颜色以及内部的文字。需要注意的是,JS本身不是 W3C 的规范,但它与 W3C 的标准有着非常密切的联系。这三种技术都是前端开发的核心组成部分,紧密相连,共同构建了现代网页。因此,在视觉上有一定程度的统一性,可以加强它们之间的关联性。

    W3C发布HTML5官方Logo

  • 标签: ###
  • 撰写评论

    有什么想法?欢迎留下你的评论!

    已有2人参与讨论

    1. chenyong01

      2024/11/21 at 16:41 · 江苏

      css+div是早年间编写网页代码的标配。虽然很早就不从事web开发了,还是记得一些内容,基本已经忘光了。无意间在这里看到CSS标志,时光真是快呀。

    2. bindykore

      2024/11/20 at 11:08 · 福建

      没有特色

  • 2