重新设计 post 文章页

文章目录
  1. 更改原有的 html 结构
  2. 根据 wordpress 自定义字段特性,加入以下字段:
  3. 根据 wordpress 文章类型特性,设计适用不同文章类型样式,目前设计三种样式如下:
  4. 目前已知兼容性问题
  5. 欢迎发现更多细节~

自从不断优化全站的可视化风格后,文章页一直保持原有的风格。为了和全站风格统一,经过 1 天的思考和设计,终于对文章页重新设计了一下样式,这次设计真是改动了不少内容。

更改原有的 html 结构
  • 将原有左右结构的封面图更改为沉浸式封面图
  • 重新设计首次加载动画

根据 wordpress 自定义字段特性,加入以下字段:
  • 心情
  • 天气
  • 浏览次数(重新计算)
  • 未来还想加上状态,比如正在听

根据 wordpress 文章类型特性,设计适用不同文章类型样式,目前设计三种样式如下:

目前已知兼容性问题
  • 在最新版的 chrome 和 edge 浏览没有问题
  • 在 Firefox 上不支持 backdrop-filter 属性,背景虚化失效并已替代纯色背景
  • 已放弃 qq 浏览器不支持 backdrop-filter 属性兼容
  • 已放弃 IE 全系兼容

欢迎发现更多细节~

右上角图标尝试 css 新特性:mix-blend-mode: difference ,它可以自动根据背景更改显示颜色。例如在白色背景下,字体颜色会变黑,十分有趣。

本文稿内容来源于“风记星辰”,请您在需要时注明。
在本文末若注明“参考、扩展”等字样均为涉及到转载部分第三方内容,具体说明请查看 版权及豁免条款
下一篇
本篇已是该分类最新文章

发表评论

您的电子邮箱地址不会被公开。

14条评论重新设计 post 文章页
  1. IE:习惯了
    QQ浏览器:差不多习惯了
    FireFox:终于也要去习惯了
    感觉backdrop-filter用处挺多的为什么Firefox不去支持呢,很奇怪

    • @橙梓IE几乎没人用了,qq浏览器真的差劲。背景虚化那个需要大量渲染,据我了解 Firefox 为了运行流畅度就牺牲了这个支持,不过并非完全不支持,可以通过手动的方式在设置里面开启。