CSS:3种姿势实现26个英文字母的案例

一、借助CSS border实现案例

实现效果如下(为实时渲染效果):

如何使用?

引用CSS文件,例如:

<link rel="stylesheet" href="./css-letters1.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;
}
...
web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路

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加圆角与另一种风格字体

还是先看效果,实时渲染:

如何使用?

引用CSS文件,例如:

<link rel="stylesheet" href="./css-letters2.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>

web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路

要显示哪个字母,就复制对应HTML到页面上就好了。

四、点评与结束语

上面三个CSS生成26个字母的案例展示了CSS在图形绘制方面的潜力,是非常好的CSS图形绘制学习材料。

然而,要说具体的实用性,则并不见得多高,就像是顶级期刊的论文虽厉害,但并不适用于真正的商业实践,因为其中成本很好,适用场景页有限。

主要问题在于字母图形全部都是使用px进行定位的。而实际使用,我们的字号是多变的,px这种固定单位想要实时变化呈现的字号大小是很麻烦的,只能通过缩放解决,但缩放在1倍屏幕密度显示器下,容易出现接缝间隙,体验不好。

所以,上面的字体生成案例需要进一步优化,把px定位全部改成em,这样,就能通过外部font-size改变字形的大小,这样,实用性就很强了!

另外,上面的3个案例,全部都是大写英文字母,如果还支持小写字母,那就真正强悍了,实际项目中大肆应用是很有可能的。这个以后有时间我可以挑战下。

原文地址:https://blog.51cto.com/14458119/2422579

时间: 2024-11-10 08:18:13

CSS:3种姿势实现26个英文字母的案例的相关文章

强大的CSS:3种姿势实现26个英文字母的案例

一.借助CSS border实现案例 实现效果如下(为实时渲染效果): 如何使用? 引用CSS文件,例如: <link rel="stylesheet" href="./css-letters1.css"> 或者直接CSS代码到你的项目中: /* 全局样式 */ .letter { color: #2486ff; border-style: solid; border-width: .5em; display: inline-block; positio

26个英文字母的原始含义及产生

我们都知道汉字是象形文字,但如果说英语也是象形文字,你一定会以为纯是无稽之谈.其实,追根溯源,英语的26个字母确实来自于象形文字.这26个字母最初起源于埃及象形文字,后由腓尼基人改进发明了腓尼基字母,希腊人对腓尼基字母加以改革后创造了希腊字母,古罗马人对希腊字母加以改革进而发明了拉丁字母,英文字母就属于拉丁字母.几千年的变迁,古代字母和现代字母的发音已经有很大的区别,但其基本的象形含义仍或多或少地保存下来.而且每个字母的原始意义又渗透到各种词根之中,最终在现代词汇中留下了明显的痕迹. 理解26个

[No000030]26个英文字母的原始含义及产生

我们都知道汉字是象形文字,但如果说英语也是象形文字,你一定会以为纯是无稽之谈.其实,追根溯源,英语的26个字母确实来自于象形文字.这26个字母最初起源于埃及象形文字,后由腓尼基人改进发明了腓尼基字母,希腊人对腓尼基字母加以改革后创造了希腊字母,古罗马人对希腊字母加以改革进而发明了拉丁字母,英文字母就属于拉丁字母.几千年的变迁,古代字母和现代字母的发音已经有很大的区别,但其基本的象形含义仍或多或少地保存下来.而且每个字母的原始意义又渗透到各种词根之中,最终在现代词汇中留下了明显的痕迹. 理解26个

[No00005B]理解26个英文字母的原始含义-例词

理解26个英文字母的原始含义,不仅可以加强我们的语感,而且对我们背单词是大有帮助的.那么26个字母的象形之处到底在哪呢?下面是各字母所对应的含义,如果用示图表达出来,将会更加清楚. A-牛头 B-房子.鸟嘴 C,G-房角 D-门 E-举着双手的人 F-沙粒 H-荷花 I-手 K-皇帝 L-鞭子 M-水or波浪 N-鼻子 O-圆的东西 P-嘴 Q,R-人头 S-太阳,沙丘 T-十字架 V-龙 X-十字架 Z-闪电 A aa, an 一(个,件)(an 用于元音音素开头的词前) (3A1)a car

由数字、26个英文字母、下划线或汉字的正则表达式

1.由数字.26个英文字母或者下划线组成的字符串: ^[0-9a-zA-Z_]{1,}$ 2.非负整数(正整数 + 0 ): ^/d+$ 3. 正整数: ^[0-9]*[1-9][0-9]*$ 4.非正整数(负整数 + 0): ^((-/d+)|(0+))$ 5. 负整数 : ^-[0-9]*[1-9][0-9]*$ 6.整数: ^-?/d+$ 7.非负浮点数(正浮点数 + 0): ^/d+(/./d+)?$ 8.正浮点数 : ^(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-

电脑26个英文字母按键紊乱解决方案

今天晚上,我自己遇到了一个棘手的问题--电脑键盘的26个英文字母按键出现紊乱的事情. 症状: 打开任意一文本文档,在电脑面板键盘上或者在电脑连接的外置键盘上点击26个英文字母中的相关按键时,有的英文字母可以正确显示在文本文档中,有的按键按下后,会出现一些其他的"功能".例如,当我按下"b"键时,鼠标光标跳出文本文档:当我按下"d"键时,文本文档缩小至最小化. 解决方案: 我自己在手机上查阅相关资料,尝试了近2小时,最后通过在文本文档中,按住快捷键

Englis - 英文字母和音标

英语学习基础基础是一切的根本 学习是一个长期积累知识的过程,正确掌握各科学习方法显得尤其重要!很多孩子学习成绩不好.记忆力不佳都是因为没有掌握正确的学习方法而造成的. 最基本的是:26个英文字母 48音标英文字母一共26个,其中由5个元音字母和21个辅音字母组成5个元音字母分别为:a[ei].e[i:].i[ ai].o[eu].u[ju:];(a e i o u)21个辅音字母b [b] bag bike bus bluec [k] cake card coollc [s] face deci

【转】正则表达式 匹配中文,英文字母和数字及_的写法!同时控制长度

匹配中文:[\u4e00-\u9fa5] 英文字母:[a-zA-Z] 数字:[0-9] 匹配中文,英文字母和数字及_: ^[\u4e00-\u9fa5_a-zA-Z0-9]+$ 同时判断输入长度:[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10} ^[\w\u4E00-\u9FA5\uF900-\uFA2D]*$ 1.一个正则表达式,只含有汉字.数字.字母.下划线不能以下划线开头和结尾:^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$  其中:^

正则表达式 匹配中文,英文字母和数字及_的写法!同时控制长度

匹配中文:[\u4e00-\u9fa5] 英文字母:[a-zA-Z] 数字:[0-9] 匹配中文,英文字母和数字及_: ^[\u4e00-\u9fa5_a-zA-Z0-9]+$ 同时判断输入长度:[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10} ^[\w\u4E00-\u9FA5\uF900-\uFA2D]*$ 1.一个正则表达式,只含有汉字.数字.字母.下划线不能以下划线开头和结尾:^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$  其中:^