景の域主题 Frutiger 化CSS更新

自上次想要修改Aero风格的CSS按钮样式,一发不可收拾,索性直接把其余部分也都实现了Aero Web 2.0 Gloss化(即为通常描述为Frutiger Aero的美学其中一种表达效果):

原本在页面上方、又被称为主导航栏的部分中,WordPress 2014主题原本格格不入的扁平菜单也拉皮成Vista/Mobile 6.x风格的镜面玻璃样式。

这次主要修改的地方有:

  • 主导航栏:Hover 聚光灯菜单、WMC风格子菜单,子菜单选项悬浮有动效
  • 黑侧边栏:次要导航 Web Gloss风格渐变、悬停发光效果
  • 黑侧边栏:日历小工具水晶按钮、悬停发光效果
  • 特色内容回归,链接按钮发光
  • 搜索键增加了悬浮与点击效果,圆角改回直角
  • a链接全部实现悬停发光效果,绝对不是偷懒

事实上这已经是好几天前的素材了,毕竟VPS炸了……
幸运的是代码在DevTools的本地替换调试部分有所保留,只需要清理一下重复部分。最终效果略有区别但是我很满意。

搭配近期使用的 View Transitions 插件 也有相当不错的动效。


花絮部分:

《景の域主题 Frutiger 化CSS更新》上的一个想法

  1. 真好啊,看着这种修改变化的过程好有意思。下次我也要把网站更改的过程记录下来

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

本站接受Webmention方式的回复信息接收,您可撰写一篇包含本文URL的文章,并将您的文章的URL填写至下表。 随后,您文章对本帖的回复内容将显示在页面上(可能需要审核)。若需更新或删除回复内容,请再次输入您的文章的URL。 此外,若您使用WordPress的插件,它可能是自动发送的,无需人工介入。 了解 Webmention 提及技术