本文介绍一种非常实用的技术,借助SVG让普通的text文字可以直接作为CSS背景图,方便实现很多的布局与样式效果。本文还提供转换工具和多个实时渲染的精彩案例,保证可以让大家学到不少东西。
文章关键字 ‘:valid’
如何让文字作为CSS背景图片显示?
2020年10月20日,星期二checkValidity等form原生JS验证方法和属性详细介绍
2019年08月18日,星期日本文介绍form表单元素内置3个验证方法和1个属性,3个方法分别是checkValidity(), reportValidity(), setCustomValidity()方法,1个属性是validity属性。不了解的小伙伴可以进来了解一下。
CSS蛋疼应用之:数据上报和HTML验证
2018年12月6日,星期四介绍两个我觉得比较蛋疼但有意思的CSS应用,一个就是纯CSS实现数据上报,用户行为跟踪;另外一个就是纯CSS实现HTML验证,并且在页面上进行提示。比较有脑洞,有想法,虽然以后估计用不到,但是,其中新奇的思路说不定对于我们开阔眼界很有帮助。
小tip: CSS动态实现文本框清除按钮的隐藏与显示
2014年03月28日,星期五search类型搜索框,设计师常常会设计一个叉叉图标,表示用户点之久可以清除输入的内容。
这是不错的体验!
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮,但是长得略微粗糙了点,设计师同学接受不了。
貌似不和谐了,咋办?传授个新技能,借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框……
源代码、demo页面、截图一个不少,希望本文的内容能够对您的学习有所帮助。