文章关键字 ‘CSS伪类’

折腾:2颗星星+纯CSS实现星星评分交互效果

2013年08月7日,星期三

发表评论的时候,我们经常会遇到点击星星做评分的交互。大部分情况下,大家使用的是5个一排5个一排的大块星星背景图实现的。实际上,两颗星星就可以搞定。本文就将展示这个。同时,有人觉得,实际需求还需要记住你选中的星星,CSS搞不定。实际上,这是可以使用CSS实现的。如何实现呢?就是本文要介绍的内容。

本文多技术展示,为便于理解,自制了不少原理示意图,以及必要的源代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS3 box-shadow兼容loading效果兼IE10+ CSS Hack介绍

2013年05月29日,星期三


摘要,摘个鬼啊,本来只想来个短篇的,该死的越写越多,这个点了,还有鬼心情写摘要啊。总之,是处理IE10+浏览器非常不错的一篇文章,demo啊,截图啊,源代码显然很多的啦。还有大量关于伪类伪元素的小技巧小知识等……就这样,我先撤了~~~

阅读全文…

小tip:我是如何在实际项目中使用before/after伪元素的

2012年11月16日,星期五

before/after伪元素相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪元素应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪元素的意识,要使用顶多也就是跟风的“清除浮动”应用。
我想,这可能受兼容性思维影响……

阅读全文…

伪类+js实现CSS3 media queries跨界准确判断

2012年05月11日,星期五

我们都知道,CSS3 media queries是响应布局实现之利器。国外很多著名的前端站点,如css-tricks, smashingmagazinegazine等都采用了响应布局。
虽然国内此技术应用就像是打不着的打火机,没法跟如火如荼的欧美相比。但是,毕竟趋势是向前发展的,总会迎来遍地开花的时候,只是时间的长短而已。
media queries可以让设备在不同尺寸下应用不同的CSS样式、布局等。以适应手持设备、普屏显示器、宽屏显示器,以及未来冰箱上的联网显示器,汽车上的数码设备等。然后,仅仅通过CSS做布局可能无法应对所有的交互请求。
……
如何让JS的修改与CSS布局改变同步呢?

阅读全文…

获取元素CSS值之getComputedStyle方法熟悉

2012年05月8日,星期二

我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyValue方法。
对于那些只想混口饭吃的人来讲,晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说,简单了解一些JS库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用,至少对创造一些创意新颖的新技术拓宽了思路。
jQuery为何受欢迎,其中原因之一就是方法名称比……

阅读全文…

翻译:CSS中的糟粕

2012年03月21日,星期三

下午本文节选:
每种程序语言都有其精华与糟粕的部分。CSS(我知道,CSS不是程序语言,但又何妨?)也不例外。

本文我除了发牢骚还是发牢骚。我已经给网站敲代码敲了12年了,其中有一半的时间是在折腾CSS布局(没错,哥我大器晚成)。我想到要去认识到CSS中的精华与糟粕,而这里,我要讲的是”糟粕”……

基本上都是文字,有兴趣的你可以看看~~

阅读全文…

完善:HTML5表单新特征简介与举例

2011年01月6日,星期四

本文其实是对去年“你必须知道的28个HTML5特征、窍门和技术”一文其他HTML5表单新特征部分的完善与补充。简单介绍了HTML5中的其他的些input空间类型。

虽描述文字不多,但每种类型都配以丰富的截图展示效果,同时有相应的demo页面方便您亲自查看效果。有需要code的地方也展示了源代码。总之,希望能对您的学习有所帮助。

阅读全文…

备忘:CSS术语词汇表

2010年11月18日,星期四

写文章的时候经常用到一些CSS方面的专业词汇。但是毕竟芳华年少不在,脑袋有点秀逗了,很多名词都记不住,这种感觉比厕所便秘还难受。比如今天居然记不起来公司公认脸蛋最pp的同事的名字,没想到我会记不住美女的名字。我觉得我觉得背后一阵萧瑟的秋风吹起,自己俨然成了漫画里面的程序猿。
某天闲逛到nimbupani,发现有专门展示CSS术语的文章,哇咔咔,感觉好像咬到一口正宗的高邮咸鸭蛋一样,不过人家的是英文,所以我还要本地化润饰处理,然后,就可以留给自己备忘的哈,的说。

阅读全文…

:after伪类+content内容生成经典应用举例

2010年09月28日,星期二


content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持: (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素。
本文就将讲述:after伪类+content内容生成在web页面重构上非常实际的两个应用,一是清除浮动的影响,二是大小不固定图片的垂直居中效果。提供代码展示盒截图,提供demo效果页面,希望能对您的学习有所帮助。

阅读全文…

Selectivizr-让IE6~8支持CSS3伪类和属性选择器

2010年09月14日,星期二


IE浏览器对CSS伪类以及位元素的支持很弱,很多很不错的功能都不能使用,这某种程度上限制了web的发展。聪明的工程师们总能想出一些修复弥补的方法,就像本文要介绍的Selectivizr。Selectivizr使用很简单,可以让让IE6/IE7/IE8支持CSS3伪类和属性选择器,算是不错的东西。如果您需要的话,应该会提供不少帮助的。本文内容虽然不错,但是依旧提供源文件下载以及demo展示。

阅读全文…