“CSS相关”目录存档

小tip:CSS3下的渐变文字效果实现

2011年04月20日,星期三

本文内容不多,就是介绍了两种实现文字渐变的效果,都需要依赖一些CSS3的属性。同样的,每个方法提供相应的demo页面,提供相应的效果截图以及必要的源代码展示。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS clip:rect矩形剪裁功能及一些应用介绍

2011年04月2日,星期六


CSS中有一个属性叫做clip,为修剪,剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中,且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是,貌似大家很少使用此属性。实际上clip是实在在的可以在实际项目中大放光彩的东东。

本文一如既往,提供必要的demo页面以及源代码展示,提供属性的一些具有代表性的实例。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS 相对/绝对(relative/absolute)定位系列(三)

2011年03月20日,星期日


本文是CSS 相对/绝对(relative/absolute)定位系列的第三篇,主要内容是absolute绝对定位的可用性隐藏,absolute绝对定位与等高布局,以及absolute相关的一些有趣的兼容性问题探讨。本文断断续续写了一个星期,所以行文上可能没有一气呵成之感;本周遇到些不顺心的事情,所以言语上也不如之前文章活波。但是,内容上并没有偷工减料,该有的截图还是有的,该有的demo还是有的,必要的代码展示也是有的。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

display:inline-block/text-align:justify下列表的两端对齐布局

2011年03月13日,星期日


本文可以说是本月的重磅文章之一,讲的是如何利用text-align:justify在display:inline-block列表布局基础上实现列表元素的两端对齐布局,分门别类,由浅入深,逐层深入,并有一些总结性的注意事项。一如既往,本文不仅提供丰富的截图示意,提供必要的源代码展示,及时雨般的demo页面,更上一层楼,还提供总结性的表格数据。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS/CSS3长度、时间、频率、角度单位大全

2011年03月7日,星期一

本文主要简单介绍下CSS中各式各样的单位值,旨在拓展眼界,所以内容都是很浅显的。重要的是一个关于单位以及含义的表格,虽说是篇简单粗糙的文章,但是还是有必要的demo页面以及相应的截图和源代码展示的。客套的话就不多说了,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

style标签下的CSS代码的显示与实时编辑

2011年03月3日,星期四

本文讲的是如何让一段CSS代码可以在页面上显示,同时有可以修改,更关键的是修改的同时页面上对应元素的样式也跟着改变。文本内容不是很多很长,关键是展示这种不错的技术。跟以往的文章一样,提供demo页面,提供相应的截图以及必要的源代码展示。总之,希望能够对您的学习有所帮助。

阅读全文…

CSS流体(自适应)布局下宽度分离原则

2011年02月28日,星期一


之前曾作有“页面重构鑫三无准则之无宽度准则”一文,属于流体布局系列中的偏理论性的文章,本文也是这种性质的,可谓是“无宽度准则”一文的延续。本文主要内容就是介绍了何为宽度分离原则,为什么要宽度分离,即宽度分离的好处,然后通过京东商城和淘宝网的例子展示了宽度分离的使用并分析了利弊。本文虽然没有demo页面,但是其中的理论性文字还是比较精彩的,配以必要的截图和源代码展示。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

几种纯CSS(CSS3)下的纸张效果实现展示

2011年02月16日,星期三


本文主要展示如果使用纯CSS实现纸张效果,这里的CSS其实主要指CSS3. 展示的纸张效果也不是一种,就文中具体内容来看,有三个,一个是中规中矩的,二是渐变有曲线投影效果的,还有一个就是有分隔线圆弧卷边效果的。每个效果都配有截图展示,有对应的demo页面,还有必要源代码展示,同时,穿针引线地介绍了写最新的CSS3的发展与浏览器支持情况。总之,希望能对您的学习有所帮助。

阅读全文…

humans.txt-网站相关人员信息记录的idea

2011年01月30日,星期日

今天头一次见到这个想法。老外的idea,这玩意很有趣,也确实很有实用价值,说不准以后会流行起来,故决定拿来说一说。

顾名思意,humans指人、人类,txt为文本文档后缀名,所以humans.txt就是指记录人的一些信息的文本文档。那么这里记录的“人”都是些什么人呢?恩,就是与网站完成相关的人员,也可以称为网站上线台前幕后的工作人员们。这与电影结束之后显示职员表(导演、演员、摄影、赞助商等)有些类似…

阅读全文…

CSS按钮(a/button)生命周期的一些认识

2011年01月25日,星期二


“生命周期”一词基本上就是几个月前D2前端论坛的仅有的几个收获之一。
我个人将“按钮的生命周期”定义为:在上线页面上,一个按钮从诞生、完善直至最终消亡(替换/去除)的时间周期。
在程序的世界里,有些概念是比较抽象的。在web页面重构的世界里也是如此,我之前不少文章就不厌其烦地抛出“重用性”、“扩展性”这些字眼。有经验的页面工程师对这些概念有了自己感性的具体的认识,在阅读这些句子的时候可以很快的扫视过去。然而,不少新人对这些抽象的字眼其实只知道个大概,阅读的时候,很多内容都是囫囵吞枣式地咽下去,不知所以然。

设计风格影响按钮的生命周期;这个按钮需要有多长的生命周期决定了这个按钮的设计风格!

阅读全文…