强大的CSS:3种姿势实现26个英文字母的案例
如何使用?
引用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部分如下:
二、border加圆角与另一种风格字体
还是先看效果,实时渲染:
强大的CSS:3种姿势实现26个英文字母的案例
如何使用?
引用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部分代码使用示意:
每个字母都可以独立使用。
不过这里的实现有个不好的是,这里的字母都是使用px单位实现的,因此,想要自如控制字母的大小不太方便。需要借助transform进行缩放控制才行。
三、活用transform的css-sans字体生成
使用CSS生成的 无衬线26个英文字母。
实时效果如下:
//zxx: 接缝处有些间隙是因为对字体进行缩放导致,实际1:1呈现时候不会有这个现象。
强大的CSS:3种姿势实现26个英文字母的案例
强大的CSS:3种姿势实现26个英文字母的案例
强大的CSS:3种姿势实现26个英文字母的案例
强大的CSS:3种姿势实现26个英文字母的案例
hover对应代码可以看到对应字体部件,非常使用CSS图形绘制的学习,如下截图示意:
强大的CSS:3种姿势实现26个英文字母的案例
如何使用?
复制页面上呈现的对应的CSS代码,然后HTML部分如下:
要显示哪个字母,就复制对应HTML到页面上就好了。
四、点评与结束语
上面三个CSS生成26个字母的案例展示了CSS在图形绘制方面的潜力,是非常好的CSS图形绘制学习材料。
然而,要说具体的实用性,则并不见得多高,就像是顶级期刊的论文虽厉害,但并不适用于真正的商业实践,因为其中成本很好,适用场景页有限。
主要问题在于字母图形全部都是使用px进行定位的。而实际使用,我们的字号是多变的,px这种固定单位想要实时变化呈现的字号大小是很麻烦的,只能通过缩放解决,但缩放在1倍屏幕密度显示器下,容易出现接缝间隙,体验不好。
所以,上面的字体生成案例需要进一步优化,把px定位全部改成em,这样,就能通过外部font-size改变字形的大小,这样,实用性就很强了!
另外,上面的3个案例,全部都是大写英文字母,如果还支持小写字母,那就真正强悍了,实际项目中大肆应用是很有可能的。这个以后有时间我可以挑战下。
深圳网站建设www.sz886.com
强大的CSS:3种姿势实现26个英文字母的案例相关推荐
- web前端入门到实战:3种姿势实现26个英文字母的案例
一.借助CSS border实现案例 实现效果如下(为实时渲染效果): 如何使用? 引用CSS文件,例如: <link rel="stylesheet" href=" ...
- 以26个英文字母开头的编程语言
以26个英文字母开头的编程语言 a:ABAP,SAP 开发 ASM ASM也是汇编语言源程序的扩展名,汇编程序员也称汇编为ASM actionscript ActionScript 动作脚 ...
- 怎样用python提取英文字母_python如何获取一次获取26个英文字母
第一种方法,也是最笨的方法,自己输入. 第二种方法,使用string方法 string.ascii_uppercase,26大写英文字母 string.ascii_lowercase,26个小写英文字 ...
- 爱情与26个英文字母
爱情与26个英文字母 A--Accept(接受) "世上没有十全十美的人".你爱他,就必须接受他的一切,甚至他的缺点. B--belief(信任) ...
- c语言输出后续字母,c语言题。 按顺序打印输出26个英文字母,
#includeint main(){int i;for(i=0;i<26;i++)printf("%c ",i+'A'):for(i=0;i<26;i++)print ...
- 由数字、26个英文字母、下划线或汉字的正则表达式
2019独角兽企业重金招聘Python工程师标准>>> 1.由数字.26个英文字母或者下划线组成的字符串: ^[0-9a-zA-Z_]{1,}$ 2.非负整数(正整数 + 0 ): ...
- java程序a-z b-y,请完成下列Java程序:对大写的26个英文字母加密,从键盘输入一个大写字母串,输出这个串加密后的结 - 赏学吧...
请完成下列Java程序:对大写的26个英文字母加密,从键盘输入一个大写字母串,输出这个串加密后的结果.加密操作是将字母变换成倒序的大写字母,如A->Z,B->Y. 注意:请勿改动main( ...
- bp神经网络matlab代码_基于Matlab的BP神经网络识别26个英文字母
一.设计思想 字符识别在现代日常生活的应用越来越广泛,比如车辆牌照自动识别系统,手写识别系统,办公自动化等等.本文采用BP网络对26个英文字母进行识别.首先将待识别的26个字母中的每一个字母都通过长和 ...
- jsp未正确拼写字 mysql_江西26个英文字母的正确拼写方式
原标题:江西26个英文字母的正确拼写方式 你听说过26个字母吗? 对,就是"歪果仁"的字母表 那你知道江西和这26个字母之间的联系吗? 那不二叔来普及一下 "26个字母与 ...
最新文章
- USEARCH11新功能——OTU表抽平otutab_rare
- Android RecyclerView 间距全适配
- tf.reverse
- Android --- AndroidManifest.xml文件内容详细介绍
- NYOJ 643 发短信 暴力求解
- Android的Fragment中onActivityResult不被调用
- 【网络编程】之十一、重叠IO Overlapped IO 完成例程
- ansible callbacks
- go语言web开发 排坑指南
- mysql的dml全程是_MySQL中的DML、DDL、DCL到底是什么呢?
- java版商城源码 spring cloud+spring boot+mybatis 多商户电子商务源码 直播带货源码 短视频带货源码 社交电商源码 分布式微服务电子商务源码
- 利用Dreamweaver模板批量制作网页
- Mac安装软件提示“已损坏,无法打开”的解决办法
- usb触摸屏驱动移植
- java 获取当天0时0分0秒和 23时23分59秒 的时间
- DP-LeetCode714. 买卖股票的最佳时机含手续费
- 二分查找例题(二)洛谷P1163
- CentOS7 查询版本/CPU/内存/硬盘容量等命令
- SQL驱动限制,导致插入失败
- 惠普服务器安装usb系统安装win7系统,惠普ProOne 600装win7系统教程(含BIOS设置USB驱动)...