“CSS相关”目录存档

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

2011年01月30日,星期日

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

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

阅读全文…

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

2011年01月25日,星期二


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

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

阅读全文…

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

2010年12月26日,星期日


本文是CSS 相对/绝对(relative/absolute)定位长篇系列的第二篇,文章通过三个事例展示了absolute绝对定位布局一些替换的实现方式;点明了absolute属性与left/top等属性之间的关系,再一次提及了absolute属性与float:left的近亲关系。最后表达了自己absolute元素应该放在body标签内的观点。这些就是本篇的主要内容。内容阐述方便很详尽,丰富的截图,必要的源代码展示,以及非常专业的demo实例页面。总之,希望能对您的学习有所帮助。

阅读全文…

div模拟textarea文本域轻松实现高度自适应

2010年12月23日,星期四

textarea标签为表单元素,一般用在多行文字的输入。在web应用上常见的是评论输入框,微博信息输入框等。
作为多行文本域功能来讲,textarea满足了我们大部分的需求。然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条,高度固执地岿然不动。所以,有时候,为了增加交互体验想让文本域高度自适应的时候,就会遇到麻烦。
然而,实际上,如果你要求不是很高,是个非常简便,且老少皆宜的实现方法的。这种方法就是使用普通的div标签模拟textarea文本域,同时又利用了div标签的高度自适应性。于是,textarea文本域的高度自适应效果就可以轻松实现。
本文就是讲述如何实现这种模拟的自适应效果的。提供代码展示,提供丰富飞截图,以及必要的demo实例页面,希望能对您的学习有所帮助。

阅读全文…

CSS box-flex属性,然后弹性盒子模型简介

2010年12月19日,星期日

本文以CSS3中的box-flex属性未切入口,简单介绍下CSS3中新的盒子模型——弹性盒子模型。介绍内容涵盖目前盒子模型所有的CSS属性,如box-orient, box-direction, box-align, box-pack, box-lines之类,其中每个属性都有代码展示与demo示例,并有丰富飞截图展示,可能有些地方啰嗦了点,但是内容还算比较具体,总之,希望能对您的学习有所帮助。

阅读全文…

CSS3 box-shadow实现纸张的曲线投影效果

2010年12月12日,星期日

本文可以说是CSS3下的小点新技术展示吧。如何借助CSS3的一些属性实现类似纸张的曲线投影效果。内容不多,但是,有原理讲解,源码展示,有截图示意,还有demo实例页面。总之希望能对您的学习有所帮助。

阅读全文…

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

2010年12月9日,星期四

本文是CSS 相对/绝对(relative/absolute)定位长篇系列的第一篇,大部分的内容被理论观点和题外话给占据了。本文主要内容就是分析了absolute与浮动之间的关系,一些典型的特性。还阐述了自己尽量不要使用absolute属性做普通DOM布局的观点。相对于本篇的文字量,图片啊代码啊以及demo相对少了写,但是,应该不会影响您的阅读与理解的。本文书写还是花了好些功夫的,力求准确表述自己观点的同时语言通俗生动。总之,希望本文能对您的学习有所帮助。

阅读全文…

CSS3 Transitions, Transforms和Animation使用简介与应用展示

2010年11月25日,星期四


本文介绍CSS3动画相关的几个属性是:transition, transform, animation,分别理解为过渡,变换,动画。虽然目前很多浏览器还没有完全支持这些属性,但是,在渐进增强的原则下,其高效的动画实现方式还是有很实际的应用价值的。本文实例当先(共14个),依次展示transition属性,transform属性,animation属性,而后三者结合展示一些更实际的效果与应用。
本文demo页面非常详细,提高必要的源代码展示,和截图供参考。希望能对您的学习有所帮助。

阅读全文…

备忘:CSS术语词汇表

2010年11月18日,星期四

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

阅读全文…