未读消息超过100显示为99+是常见的交互,目前主流实现一定是通过 JS 逻辑判断,其实纯 CSS 就能实现一模一样的功能,兼容性还不赖,进来看看吧。
文章关键字 ‘content’
纯CSS实现未读消息超过100自动显示为99+
2022年01月14日,星期五CSS content新的替换元素规范行为解读
2021年10月8日,星期五CSS悄然发展,已有CSS行为也跟着发生了变化,content属性就是其一,现在所有现代浏览器都支持普通HTML元素通过content属性改变元素内容,背后的原理和机制是什么呢?
Polyfill吊炸天的CSS attr()新语法
2020年10月10日,星期六CSS attr()新语法可以让HTML属性以任意的CSS属性值类型呈现,足矣对现有的web开发产生颠覆,但是可惜这么好用的东西目前没有任何浏览器支持,本文会介绍我自己找到的一种Polyfill方法,可以让所有支持CSS变量的浏览器都可以使用attr()新语法。
CSS text-decoration实现宽度100%波浪线效果
2020年03月21日,星期六波浪线效果CSS 径向渐变可以绘制,SVG也可以实现,这里介绍另外一个自己想到的实现方法,使用text-decoration实现宽度100%波浪线效果,易理解易上手,尺寸可控,颜色可控。
第五届CSS大会主题分享之CSS创意与视觉表现
2019年06月9日,星期日第五届CSS大会主题分享之“CSS创意与视觉表现”文字版完全整理,共有10个纯CSS实现的创意案例,旨在展现CSS的潜力,同时激发你的CSS创意思维。每个案例都有demo,原理讲解,文末还有分享文档,希望对你CSS学习有所帮助。
小tips: 如何借助content属性显示CSS var变量值
2019年05月28日,星期二借助CSS计数器,我们可以巧妙地实现CSS var变量值在页面中呈现的效果。这是一个所有CSS开发人员都必须要掌握的一个小技巧。
小tips: 纯CSS显示JS/HTML等源代码行数
2018年02月1日,星期四如图,纯CSS显示JS/HTML等源代码行数,希望实现的方法可以给大家带来更多的思路和灵感。
CSS content换行实现字符点点点loading效果
2016年11月13日,星期日CSS content字符生成配合CSS3 animation可以各类字符loading效果实现,一起过来看看眼界,学习学习新的实现思路吧~~