这篇文章发布于 2019年01月11日,星期五,11:30,归类于 CSS相关。 阅读 25711 次, 今日 3 次 15 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8360
本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。
一、借助CSS border实现案例
实现效果如下(为实时渲染效果):
原作者是joshnh,出处是这里。
原作者实现的类名过于简单,用在实际项目中很容易冲突,我张鑫旭对其进行了优化——基于属性选择器[data-char="*"]
标记对应字母。
如何使用?
引用CSS文件,例如:
<link rel="stylesheet" href="./css-letters1.css">
或者直接CSS代码到你的项目中,由于篇幅较长,我这里仅显示前几个字母的CSS样式,完整CSS代码见这里:
/* 全局样式 */ .letter { color: #2486ff; border-style: solid; border-width: .5em; display: inline-block; position: relative; } .letter:after { border-style: solid; border-width: .5em; content: ''; position: absolute; } /* 单个字母样式 */ .letter[data-char="A"] { border-bottom: none; border-radius: 1em 1em 0 0; height: 2.05em; margin-top: -.05em; width: 1em; } .letter[data-char="A"]:after { border-bottom: none; border-left: none; border-right: none; left: 0; right: 0; top: .75em; } .letter[data-char="B"] { border-radius: 0 1em 1em 0; height: .5em; width: 1em; } .letter[data-char="B"]:after { border-radius: 0 1em 1em 0; bottom: 100%; height: .5em; left: -.5em; width: .9em; } .letter[data-char="C"] { border-right: none; border-radius: 1em 0 0 1em; height: 1.5em; width: 1.5em; } .letter[data-char="C"]:after { border-bottom: none; border-left: none; border-top: none; height: .5em; right: 0; top: 0; width: .5em; } ...
HTML部分如下:
<span class="letter" data-char="A"></span> <span class="letter" data-char="B"></span> <span class="letter" data-char="C"></span> <span class="letter" data-char="D"></span> <span class="letter" data-char="E"></span> <span class="letter" data-char="F"></span> <span class="letter" data-char="G"></span> <span class="letter" data-char="H"></span> <span class="letter" data-char="I"></span> <span class="letter" data-char="J"></span> <span class="letter" data-char="K"></span> <span class="letter" data-char="L"></span> <span class="letter" data-char="M"></span> <span class="letter" data-char="N"></span> <span class="letter" data-char="O"></span> <span class="letter" data-char="P"></span> <span class="letter" data-char="Q"></span> <span class="letter" data-char="R"></span> <span class="letter" data-char="S"></span> <span class="letter" data-char="T"></span> <span class="letter" data-char="U"></span> <span class="letter" data-char="V"></span> <span class="letter" data-char="W"></span> <span class="letter" data-char="X"></span> <span class="letter" data-char="Y"></span> <span class="letter" data-char="Z"></span>
二、border加圆角与另一种风格字体
还是先看效果,实时渲染,如果没有效果去原文https://www.zhangxinxu.com/wordpress/?p=8360浏览:
原作者是HKK,出处是这里。
原作者实现的到字母R就截止了,然后我就花了半小时仿照风格把后面STUVWXYZ这些字母都补全了,这样26个字母就一个不落了。
如何使用?
引用CSS文件,例如:
<link rel="stylesheet" href="./css-letters2.css">
或者直接复制CSS代码到你的项目中,由于篇幅限制,我这里仅显示前几个字母的CSS样式,完整CSS代码见这里:
.letter-a { position: relative; width: 30px; height: 40px; background: white; border-radius: 10px 10px 0 0; border-style: solid; border-color: currentColor currentColor transparent currentColor; border-width: 10px 10px 0 10px; } .letter-a::before { content: ""; position: absolute; top: 10px; height: 10px; width: 30px; background: currentColor; } .letter-b { position: relative; width: 30px; height: 30px; border-width: 10px 10px 10px 10px; border-style: solid; border-color: transparent transparent transparent currentColor; background: transparent; } .letter-b::before { content: ""; position: absolute; left: -10px; top: -10px; height: 10px; width: 30px; background: transparent; border-radius: 0 12.5px 12.5px 0; border: 10px solid currentColor; } .letter-b::after { content: ""; position: absolute; left: -10px; bottom: -10px; height: 10px; width: 30px; background: transparent; border-radius: 0 12.5px 12.5px 0; border: 10px solid currentColor; } ...
HTML部分代码使用示意:
<span class="letter-a"></span> <span class="letter-b"></span> <span class="letter-c"></span> <span class="letter-d"></span> <span class="letter-e"></span> <span class="letter-f"></span> <span class="letter-g"></span> <span class="letter-h"></span> <span class="letter-i"></span> <span class="letter-j"></span> <span class="letter-k"></span> <span class="letter-l"></span> <span class="letter-m"></span> <span class="letter-n"></span> <span class="letter-o"></span> <span class="letter-p"></span> <span class="letter-q"></span> <span class="letter-r"></span> <span class="letter-s"></span> <span class="letter-t"></span> <span class="letter-u"></span> <span class="letter-v"></span> <span class="letter-w"></span> <span class="letter-x"></span> <span class="letter-y"></span> <span class="letter-z"></span>
每个字母都可以独立使用。
不过这里的实现有个不好的是,这里的字母都是使用px单位实现的,因此,想要自如控制字母的大小不太方便。需要借助transform进行缩放控制才行。
三、活用transform的css-sans字体生成
使用CSS生成的 无衬线26个英文字母。
原出处地址是这个。
实时效果如下:
//zxx: 接缝处有些间隙是因为对字体进行缩放导致,实际1:1呈现时候不会有这个现象。
hover对应代码可以看到对应字体部件,非常使用CSS图形绘制的学习,如下截图示意:
如何使用?
复制页面上呈现的对应的CSS代码,然后HTML部分如下:
<div class="A"></div> <div class="B"></div> <div class="C"></div> <div class="D"></div> <div class="E"></div> <div class="F"></div> <div class="G"></div> <div class="H"></div> <div class="I"></div> <div class="J"></div> <div class="K"></div> <div class="L"></div> <div class="M"></div> <div class="N"></div> <div class="O"></div> <div class="P"></div> <div class="Q"></div> <div class="R"></div> <div class="S"></div> <div class="T"></div> <div class="U"></div> <div class="V"></div> <div class="W"></div> <div class="X"></div> <div class="Y"></div> <div class="Z"></div>
要显示哪个字母,就复制对应HTML到页面上就好了。
四、点评与结束语
上面三个CSS生成26个字母的案例展示了CSS在图形绘制方面的潜力,是非常好的CSS图形绘制学习材料。
然而,要说具体的实用性,则并不见得多高,就像是顶级期刊的论文虽厉害,但并不适用于真正的商业实践,因为其中成本很好,适用场景页有限。
主要问题在于字母图形全部都是使用px进行定位的。而实际使用,我们的字号是多变的,px这种固定单位想要实时变化呈现的字号大小是很麻烦的,只能通过缩放解决,但缩放在1倍屏幕密度显示器下,容易出现接缝间隙,体验不好。
所以,上面的字体生成案例需要进一步优化,把px
定位全部改成em
,这样,就能通过外部font-size
改变字形的大小,这样,实用性就很强了!
另外,上面的3个案例,全部都是大写英文字母,如果还支持小写字母,那就真正强悍了,实际项目中大肆应用是很有可能的。这个以后有时间我可以挑战下。
好了,就说这么多。
希望本文内容对您的学习有所帮助。
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:https://www.zhangxinxu.com/wordpress/?p=8360
(本篇完)
- 常见的CSS图形绘制合集 (0.551)
- CSS3图标图形生成技术个人攻略 (0.430)
- 秋月何时了,CSS3 border-radius知多少? (0.365)
- CSS3 linear-gradient线性渐变实现虚线等简单实用图形 (0.353)
- 小tip: SVG和Canvas分别实现图片圆角效果 (0.345)
- 不借助Echarts等图形框架原生JS快速实现折线图效果 (0.321)
- 纯CSS实现各类气球泡泡对话框效果 (0.304)
- CSS3 @font-face实现颜色大小可控的三角效果 (0.292)
- 小tips: 纯CSS实现打字动画效果 (0.292)
- Chrome opacity非1时border-radius圆角边框剪裁问题 (0.287)
- CSS overflow-wrap新属性值anywhere是干嘛用的? (RANDOM - 0.020)
直接:after多好。字体大小及颜色也能控制了。
.letter-a::after{content:’a’} /*color:inhert, font-family:inhert, font-size:inhert*/
这也太秀了吧
非常考验想象力和技术
二、border加圆角与另一种风格字体
此处少个字母 D 的实例
已根据字母O稍改圆角样式画出,谢谢旭哥细心分享
是不是可以再弄个汉字库 (๑•̀ㅂ•́)و✧
部分字缝间隙可以通过投 1px box-shadow 解决……
居然不是字体 通过css写出来 强大
赞一个!
小说网站用着个是不是就不用怕被爬了
二、border加圆角与另一种风格字体 .
此处示例少字母 U
好的,感谢反馈,已补上。
学无止境
张大大加油啊!!
你的想法很突出。哈哈?????