如题,文字变菊花。没错,就是文字变菊花,具体什么内容,若有兴趣,自行点击去围观。很短的文章,分分钟就可以看完。
“CSS相关”目录存档
小小小tip: 按钮文字无缝变菊花
2014年11月30日,星期日currentColor-CSS3超高校级好用CSS变量
2014年10月25日,星期六currentColor顾名思意就是“当前颜色”,准确讲应该是“当前的文字颜色”,是非常强大非常好用的一个关键字。本文就将介绍这个关键字的含义、表现,以及提供两个实例展示其价值之处。必要的源代码、必要的截图、必要的demo一个不少,总之,希望本文的内容能够对您的学习有所帮助。
CSS counter计数器(content目录序号自动递增)详解
2014年08月26日,星期二CSS计数器不是什么新鲜玩意了,早在10年春暖花开的时候,我写的“CSS content内容生成技术以及应用”一文就要提到,不过当时是作为其中一员介绍。就像例行的溜新同事一样,虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是其中一员。很自然,个把月之后,我就会被无情的淡忘,除了那依稀的面庞,因为毕竟长得还算比较抽象。
然而,CSS计数器的斗量显然不是短短几句介绍能够显露的,所谓人不可貌相。今天,就大肆笔墨,好好地全面地介绍了下CSS计数器,确实有很多知识点,确实有很多不太好理解的地方,确实有很多会踩坑的地方,果然深不可测。不过,本文有着详实的文字,丰富的截图,完全的demo,必要的源代码展示。相信本文的内容会对你的学习有所帮助的!
准确理解CSS clear:left/right的含义及实际用途
2014年06月9日,星期一我们平时一般都使用clear:both
清除浮动,貌似就干这一件事件。用得很开心,但似乎理解上懵懵懂懂,我其实也是,早年的时候,测试过CSS clear:left/right
,虽知其作用(80%确定而已),但不知其机理。
有必要再次整理下,温故知新。可能很多同行都没有注意left/right
值,或者可能理解上含糊,或者不知道其实际意义在何处。So, follow me…
CSS3实现鸡蛋饼饼图loading等待转转转
2014年04月25日,星期五今天,要实现一个长任务等待提示效果。然后设计师就把做好的gif效果图给我,就是下面这个,转转转等待提示效果。按照大众做法,我应该是把图片直接按图索骥,调调布局,然后早早回家抱老婆。
但是,我这个人,天生不安分守己。想到是用在客户端,客户端又是用的webkit内核,于是,立马决定使用CSS3来折腾一番……
CSS3图标图形生成技术个人攻略
2014年04月23日,星期三自适应表格连续字符换行及单行溢出点点点显示
2014年04月10日,星期四我们应该都知道如果让连续的英文数字字符换行显示以及让单行文字超出的时候使用点点点表示(Chrome目前有属性可以让多行文字点点点,且点的位置是在中间)。
但是,如果是自适应的表格中,我们要实现上面两个效果,可能就会遇到挫折,你会发现屡试不爽的方法现在完全被无视了!。。。
小tip: CSS动态实现文本框清除按钮的隐藏与显示
2014年03月28日,星期五search类型搜索框,设计师常常会设计一个叉叉图标,表示用户点之久可以清除输入的内容。
这是不错的体验!
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮,但是长得略微粗糙了点,设计师同学接受不了。
貌似不和谐了,咋办?传授个新技能,借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框……
源代码、demo页面、截图一个不少,希望本文的内容能够对您的学习有所帮助。
quickLayout.css-快速构建结构兼容的web页面
2014年03月13日,星期四小tip: CSS3与文字渐变光影流动动画效果实现
2014年02月28日,星期五现在的我,身在一个设计团队,自然要与各种视觉、效果打交道。啊,今天交互提出了一个效果:“可不可以让文字像脱衣服一样的,光影闪啊闪~” “当然可以啊!”虽然玩具多年未碰,但是有哪些玩具,自己还是清楚的,于是我很干脆的答应加这个效果。
实际上,之前就有类似效果实现,但是呢?之前的实现有一个不足,其渐变背景是图片实现的(10年时候CSS3渐变乃星星小火)。想想现在都什么年代了,渐变还要使用图片,简直弱爆了,而且还是webkit家族浏览器!显然,有改进的余地。于是……就有了有demo有截图还有源代码展示的本文了。
希望本文的内容能够对您的学习有所帮助。