“CSS相关”目录存档

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日,星期三

CSS3图标图形生成技术个人攻略
还在使用Sprite背景实现小图标效果?还是自以为潮流使用font face实现小图标?不妨试试CSS3来实现图标生成效果,更精致的效果,更方便的维护,没有额外的请求,可以Gzip, 同时适配retina视网膜屏幕。

本文就全方位展示了自己在CSS3图标图形生成上的一些技术、攻略心得。精良的demo,完整的兼容解决展示,详尽的各种图形实现分析,多多截图,必要的源代码展示。总是,希望本文的内容能够对你的学习有所帮助。

阅读全文…

自适应表格连续字符换行及单行溢出点点点显示

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日,星期四


quickLayout为自己这些年来CSS积累最强代表作,可以说是多年来压箱底的东西。自己强力推荐,年度个人力作。如果您是有经验的重构,这个东西会让你如虎添翼,蓬荜生辉。超长篇,但没有什么废话,有图有代码有视频。希望本文的内容能够对您的学习有所帮助。

阅读全文…

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

2014年02月28日,星期五

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

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

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

阅读全文…

pointer-events:none提高页面滚动时候的绘制性能?

2014年01月4日,星期六

“pointer-events:none提高页面滚动时候的绘制性能?”注意标题后面的问号。一般这种标题都说明作者要否定这个结论。我这里是否定呢还是坑定呢?不告诉你,你自己去寻找答案。

本文不单纯介绍技术,还探讨了关于“真理”的话题,若有兴趣,一起加入讨论吧。用真理来解决与研究技术问题。相信本文的内容不会让你失望的。

阅读全文…

CSS3 box-shadow盒阴影图形生成技术

2013年11月29日,星期五

理论上,CSS3 box-shadow盒阴影可以生成任意的图形,小月格格的靓照,含韵格格的靓照那都不在话下。本文且听后宫茶话会上关于CSS3 box-shadow盒阴影图形生成技术的分享。截图、demo源代码示意,美女靓照一个都不少。说不定,你会有别样的收获哦!【挑眉】

阅读全文…