文章关键字 ‘text-fill-color’

更符合书写习惯的CSS媒体查询Range语法

2022年10月12日,星期三

仙鹤 封面 占位 水墨

介绍一个更容易记忆与理解的@media设备尺寸媒体查询语法,过去的min-width和max-width可以说再见了~

阅读全文…

-webkit-text-stroke文字描边CSS属性及展开

2017年06月4日,星期日

今天,我使用caniuse查看text-stroke兼容性的时候,发现了一件令我震惊的事情,最新版的Firefox以及Edge已经支持text-stroke描边属性了,并且全部都是采用-webkit-私有前缀,这就意味着在不久的将来,要实现文字描边效果,我们就可以使用原生的text-stroke属性,不用担心兼容性问题…

阅读全文…

小tips: CSS3 webkit下彩条文字效果实现

2015年03月15日,星期日

此效果用的是以前介绍过的两个技术实现,第一个就是CSS3实现纹理图案背景,第二个就是文字遮罩实现。两者合在一起就可以实现彩条文字效果了。

阅读全文…

小tip: CSS3与文字渐变光影流动动画效果实现

2014年02月28日,星期五

现在的我,身在一个设计团队,自然要与各种视觉、效果打交道。啊,今天交互提出了一个效果:“可不可以让文字像脱衣服一样的,光影闪啊闪~” “当然可以啊!”虽然玩具多年未碰,但是有哪些玩具,自己还是清楚的,于是我很干脆的答应加这个效果。

实际上,之前就有类似效果实现,但是呢?之前的实现有一个不足,其渐变背景是图片实现的(10年时候CSS3渐变乃星星小火)。想想现在都什么年代了,渐变还要使用图片,简直弱爆了,而且还是webkit家族浏览器!显然,有改进的余地。于是……就有了有demo有截图还有源代码展示的本文了。

希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS3 text-fill-color简介及应用展示

2010年06月26日,星期六

本文内容并不多,主要就是简单介绍下CSS3的text-fill-color属性,并举例展示其应用。展示,如果利用CSS3的text-fill-color属性实现效果精湛的文字遮罩渐变动画效果。提供必要的截图,代码展示,以及视频动画消失。希望能对您的学习有所帮助。

阅读全文…