标签归档:CSS

景の域主题 Frutiger 化CSS更新

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

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

这次主要修改的地方有:

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

CSS缩放放大88×31像素按钮图

最近刚好在制作88×31的“复古”按钮图,这类上个世纪的Web按钮都是由像素点构成的,和老游戏一样,已经不太适合现今的高分缩放LCD屏幕浏览,尤其是智能手机或是高分屏电脑显示器。

虽然自己设计可以试着导出176×62尺寸的图样,但无论是制作还是调用都略显麻烦。后在网上寻找到这条Mastodon的Toots,可悉知CSS已经支持整数倍放大像素图片的缩放处理了。

Post by @[email protected]
View on Mastodon

对于WordPress来说,可以通过添加自定义的style.css代码的class类,并在WP的图片插入功能中调用class类,以此实现这一效果:

.pixbtn {
image-rendering: pixelated;
}

详情参见:https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/image-rendering