SO热门问答:可以为半个字符应用CSS样式吗?

Mathew MacLean 提问

我正在寻找:

一种方法为半个字符应用样式(在这种情况下,一半的字母是透明的)。

我目前已经搜索并尝试的(不走运)

  • 渲染一半字符/字母的方法
  • 用CSS或JavaScript渲染字符的一部分
  • 对一个字符的50%应用CSS

以下是我尝试实现的一个例子:

01

这个是否有一个CSS或者JavaScript的解决方法存在,还是我必须采用图片的方法?我不愿意采用图片的方法,因为文本将最终是动态生成的。

 

来自 Arbel 的最佳回答:(1280+ 赞)

已做成一个插件,放 Github 上了!

演示 | 下载 Zip | Half-Style.com (重定向到GitHub)


  • 单个字符的纯css
  • JavaScript用来自动覆盖文本或多字符
  • 保护文本的可读性,盲人或视障人士使用的屏幕阅读器可识别

第一部分: 基本解决方案

演示: http://jsfiddle.net/pd9yB/817/


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

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

单个字符的实现

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

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

任意文本的实现

只需添加textToHalfStyle class到包含文本的元素上。


CSS:

HTML


它会自动生效,只要添加 textToHalfStyle class到包含文本的元素上。

jQuery 自动模式:

演示: http://jsfiddle.net/pd9yB/819/


第二部分:先进的解决方案-独立的左边和右边

使用这种方法你可以分别单独的渲染左边和右边部分。

一切都是相同的,只是更高级的CSS在发挥作用。

演示: http://jsfiddle.net/pd9yB/819/



第三部分:混合-匹配和改进

现在我们知道什么是可能的,让我们来添加一些花样。


-水平一半

Demo



-垂直1/3

Demo



-水平 1/3

Demo



-HalfStyle改进 @KevinGranger

DEMO



 -PeelingStyle 改进的 HalfStyle @SamTremaine

Demo and on samtremaine.co.uk

演示 和 samtremaine.co.uk



第四部分:准备生产

定制不同的Half-Style样式集可以用在同一个页面的所需元素上。你可以定义多个样式集并告诉插件要用哪一个。

插件在目标.textToHalfStyle元素上使用data属性data-halfstyle=”[-CustomClassName-]”,所有都会自动改变。

所以,只要含有文本的元素添加了textToHalfStyle class和data属性 data-halfstyle="[-CustomClassName-]",插件将完成剩下的工作。

相同页面中多个Half-Styles的 演示

此外,CSS样式集class的定义匹配上述的 [-CustomClassName-] 部分,并且链到.halfStyle,因此我们将有.halfStyle.[-CustomClassName-]

HTML:

相同页面中多个Half-Styles的 演示

收藏 评论

关于作者:Carman

(新浪微博:@常见长剑) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部