词典的装饰样式及其实现方法(学习总结)`

最近学习借鉴了论坛里提及或展示的一些词典装饰样式,发现少有人提及实现方法。其实这些东西也不难,但是新手要模仿借鉴就得费精力去摸索一番。所以,鉴于此,就把自己依样画葫芦的过程中学到X(抄袭)的经验方法简要地整理并分享,以供需要的小伙伴们参考。(新手,所以简陋和错误在所难免,请见谅。同时,欢迎指正,探讨。)

:heartpulse:
样式多来自 Arlin 和 cmm 提及或呈现的作品,示例代码多搬自 cmm 的作品,感谢!
:speech_balloon:
精力有限,暂时不定时更新。
:bell:
下面的示例代码,数值一般默认为1,颜色默认为红色(rgb(255,0,0)),具体根据需要自定。

一、单字米字格

[图例]

[原理]
为元素提供一个米字格透明图片作为背景。

[实现]
(1) 首先需要准备一张背景透明的米字格 PNG 图片,并对其进行 Base64 编码。(如需更换米字格的颜色: PS–导入图片–图层–图层样式–颜色叠加–选择颜色–导出-- OK)
(2) 将图片的编码文本添加到下面代码中的 base64, 之后,再通过 background-size 对图片大小进行调节。代码如下:

{background-image:url(data:image/png;base64,);background-size:1px 1px}

(3) 通过调节边距等对田字格背景进行细微的调节,直到显示完全,文字与田字格居中对齐。

二、折叠标签

【图例】
图片

【原理】
利用伪元素生成一块小三角形,并调整位置,以填补在标签矩形与主体边框形成的夹角处。(参看图例标示)

【实现】
(1) 把元素生成一个矩形作为标签,再向左位移以超出主体的边框一段距离。代码示例如下:

{width: 1px; height: 1px; background-color:rgba(255,0,0,.7);  position:relative; left: -1px}

代码说明: left 调整位移距离(超出边框的距离);标签矩形的颜色设置透明度,效果会更佳,透明度最好设置到能够透过标签隐约看到主体边框的线。(透明度范围在 0-1 [透明与不透明] 之间,数值越小越透明,本示例默认为.7。)
(2) 在元素前生成一个伪元素,把伪元素设置成大小合适的小三角形,并调整其位置,以完美填补在矩形标签与主题边框形成的交角处。代码示例如下:

label::before {content:""; position:absolute;
bottom:-1px; border-top: 1px solid rgba(255,0,0,0.7);
border-left: 1px solid transparent}

代码说明:border-top 和 border-left 的 px 数值调整小三角的大小(宽度与高度),border- top 的颜色 rgba 为小三角的颜色(建议小三角的颜色比矩形标签的颜色深些[可通过透明度数值调节深浅],能够稍显立体感。),bottom 则调整小三角垂直位置(根据需要用left、right调整水平位置)。

三、仿马克笔半涂划荧光色

【图例】

【原理】
背景 background 使用 linear-gradient 渐变,颜色加些透明度,实现半涂划的荧光色。

【实现】
直接见代码:

{background: linear-gradient(to bottom,transparent 0%,transparent 55%,rgba(255,0,0,.1) 55%)}

代码说明:根据需要实现的颜色,调节 raga 数值即可。

四、指示标签

【图例】

【原理】
利用伪元素(::after) 生成小三角形,拼接在元素标签矩形之后。

【实现】
1.把元素生成左边有圆角的矩形标签;
2.用 ::after 伪元素在矩形标签之后,生成一个小三角形,跟标签相拼接。示例代码见下:

label {display: inline-block; height: 16px; line-height: 17px; padding-left:5px; border-radius: 8px 0 0 8px; color: red; background: rgba(255,0,0,.2); transform: translateY(-1px); position: relative}

label::after {content: ""; width: 0; height: 0; display: inline-block; position: absolute; top: 0; left: 100%; border: 0 solid red; border-width: 8px 0 8px 6px; border-color: transparent red transparent rgba(255,0,0,.2)}

代码说明: 只需根据需要的颜色和标签大小,作自定调节即可。

7 Likes

权当学习笔记,随意写写,大雅君子无取于斯。 :neutral_face:

2 Likes

学习了,感谢您。

应该多多分享些 谢谢

1 Like