排版欣赏+美化交流

经典配色







▲以上来自各大app展示图


—— ◆ 以下为可适当使用的元素 ◆——

① 多个border模拟纸书
[方法] 3个border。


‣ 「Cambridge English Dictionary Online」

② 小三角营造折叠感
[方法]   伪元素生成小三角,适当调整位置。


‣ 「牛津英语搭配词典 第二版 英汉双解」

③ 小三角打造指示标签
[方法]   可以不用伪元素,参照「CSS SECRETS」。但用伪元素更为灵活。


‣ 「Collins Cobuild Advanced Learner’s English-Chinese Dictionary」 来自设计师 @ cmm

④ 传统米字格
[方法]
      准备一张米字格png,调整字间距,用伪元素生成空白条遮挡尾部多余的space。(!只适用白色背景,若更换背景,需同时更换伪元素背景。)
      也可以用 background 实现简单的田字格
      还有一种方法是cmm小姐姐提到的js切割法。我不想为了样式引入js,未进行测试。感兴趣可自行尝试,适用性更高。



‣ 「汉英大词典(第3版)」

⑤ 其他图案
image
image
试了一下,不太适合小词头。
‣ 「135编辑器」

image
‣ 「CSS Secrets by Lea Verou」

⑥ liner-gradient+适当透明度呈现荧光感


‣ 「某英语学习app」

——◆ 未完待续 ◆——

清理一下近期的截图。适当借鉴可以提升词典颜值~

最后分享一下 Lea Verou 的「CSS Secrets」,应该很快就能扫完。
是汉化版的噢,英文版请自行搜索。
css揭秘.zip (19.9 MB)

8 Likes

先收藏先 :grinning:

P1 竖排是啥词典啊

看图标好像是 《新字源》。

厉害啊。另,无论啥字体,我觉得日文假名,比汉字(简/繁)和英文字母都好看:-!

1 Like

支持授人以渔。

美化是件主观的事,更应该自己动手,而不是总是去伸手。

假名來源於漢字書法-草書的簡化。審美上比書法差遠了。

1 Like

紅色盡量不用正紅,太刺眼。

1 Like

突然想起来你以前问过为什么有些词典在goldendict里最上边没有边距,
重新回答一下:因为body设置了margin。
我以前那个回答针对有图标浮动的情况。

1 Like

楼主很有心得,谢谢分享。
请教下面这图是来自那本词典?
image

上个月截的,忘记把词典信息截下来,现在回头翻半天也没找到,抱歉。

没有关系,下次碰到告诉下。