纯CSS实现设置半个字符的样式


Posted in HTML / CSS onJuly 03, 2014

在stackoverflow上看到的问题怎么给半个字符设置样式,很多大神给出了答案。我就等就来学习围观吧。
一:基本解决方案:
html:

复制代码
代码如下:

<span class=”halfStyle” data-content=”X”>X</span>
<span class=”halfStyle” data-content=”Y”>Y</span>
<span class=”halfStyle” data-content=”Z”>Z</span>
<span class=”halfStyle” data-content=”A”>A</span>

css:
复制代码
代码如下:

.halfStyle {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: black; /* or transparent, any color */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before {
display:block;
z-index:1;
position:absolute;
top:0;
left:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
color: #f00;
}

效果如图:

纯CSS实现设置半个字符的样式

这种方法用于任何动态文本或单个字符,并且都是自动适用的。所有你需要做的就是在目标文本上添加一个class,剩下的就解决了。

同时,保留了原文的可访问性,可以被盲人或视障人士使用的屏幕阅读器识别。

单个字符的实现:

纯CSS。所有你需要做的就是把.halfStyle class用在每个你想要渲染一半样式字符的元素上。

对于每个包含字符的span元素,你可以添加一个data属性,比如data-content=”X”,并且在伪元素上使用content:attr(data-content);这样,.halfStyle:before class将会是动态的,你不需要为每个实例进行硬编码

以下其它效果自行测试了。。。

二:左右开弓,两边都设置样式
更改CSS:

复制代码
代码如下:

.halfStyle {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the left part */
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the right part */
display:block;
direction: rtl; /* very important, will make the width to start from right */
position:absolute;
z-index:2;
top:0;
left:50%;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

三:设置水平一半的样式
CSS:
复制代码
代码如下:

.halfStyle {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the top part */
display:block;
z-index:2;
position:absolute;
top:0;
height: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the bottom part */
display:block;
position:absolute;
z-index:1;
top:0;
height: 100%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

四:水平三分之一的样式
css:
复制代码
代码如下:

.halfStyle { /* base char and also the bottom 1/3 */
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent;
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #f0f;
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle:before { /* creates the top 1/3 */
display:block;
z-index:2;
position:absolute;
top:0;
height: 33.33%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}
.halfStyle:after { /* creates the middle 1/3 */
display:block;
position:absolute;
z-index:1;
top:0;
height: 66.66%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}

五:垂直三分之的样式
css:
复制代码
代码如下:

.halfStyle { /* base char and also the right 1/3 */
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #f0f; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle:before { /* creates the left 1/3 */
display:block;
z-index:2;
position:absolute;
top:0;
width: 33.33%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the middle 1/3 */
display:block;
z-index:1;
position:absolute;
top:0;
width: 66.66%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
HTML / CSS 相关文章推荐
CSS3属性box-shadow使用详细教程
Jan 21 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 #HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 #HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 #HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 #HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 #HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 #HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 #HTML / CSS
You might like
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
JavaScript方法和技巧大全
2006/12/27 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python实现淘宝秒杀脚本
2020/06/23 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Python中字符串与编码示例代码
2019/05/20 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
python pandas模块基础学习详解
2019/07/03 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
WxPython实现无边框界面
2019/11/18 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Python爬虫与反爬虫大战
2020/07/30 Python
常用的10个Python实用小技巧
2020/08/10 Python
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
Python 视频画质增强
2022/04/28 Python