每位设计师都应该拥有的50个CSS代码片段-2

21. 字符美化

1 .amp {
2     font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
3     font-style: italic;
4     font-weight: normal;
5 }

Code Source

这个css类用在页面内容中围绕文字的span元素. 它会将一些典型的serif 字体用斜体形式显示.测试下看看是不是你喜欢的风格吧.

22. 段落首字母

1 p:first-letter{
2     display: block;
3     margin: 5px 0 0 5px;
4     float: left;
5     color: #ff3366;
6     font-size: 5.4em;
7     font-family: Georgia, Times New Roman, serif;
8 }

在报纸和图片上你一定看到过它们的首字母的特殊效果. 对于有足够版面的网页或博客来说肯定会受其影响. 上面的CSS规则定义了所有的P标签,你也可以把它们定义为一个class或是ID.

23. CSS3盒子模型内部阴影

1 #mydiv {
2     -moz-box-shadow: inset 2px 0 4px #000;
3     -webkit-box-shadow: inset 2px 0 4px #000;
4     box-shadow: inset 2px 0 4px #000;
5 }

阴影为我们的网站提供了巨大的变化. 你几乎可以所有的元素定义这个属性, 看起来都非常不错. 上面的代码定义了内阴影,对设计来说很丑,但在一定的环境下还是很好的.

24. CSS3盒子模型外部阴影

1 #mydiv {
2     -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
3     -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
4     box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
5 }

与CSS3内阴影一样,我也提供一段外阴影的代码. 注意第三个数字表示模糊距离,第四个表示范围. 了解更多从W3Schools.

25. 三角形列表前缀

01 ul {
02     margin: 0.75em 0;
03     padding: 0 1em;
04     list-style: none;
05 }
06 li:before {
07     content: "";
08     border-color: transparent #111;
09     border-style: solid;
10     border-width: 0.35em 0 0.35em 0.45em;
11     display: block;
12     height: 0;
13     width: 0;
14     left: -1em;
15     top: 0.9em;
16     position: relative;
17 }

Code Source

不管你信不信,反正我是信了.在CSS3中三角形的列表前缀是可能的. 这个看起来太酷了,可惜的是不是所有的浏览器都支持.

26. 固定宽度的居中布局

1 #page-wrap {
2     width: 800px;
3     margin: 0 auto;
4 }

Code Source

我知道之前已经提到过怎样设置水平居中.在这里的代码是完美实现固定宽度的水平居中 .

27. CSS3 文本分列

1 #columns-3 {
2     text-align: justify;
3     -moz-column-count: 3;
4     -moz-column-gap: 12px;
5     -moz-column-rule: 1px solid #c4c8cc;
6     -webkit-column-count: 3;
7     -webkit-column-gap: 12px;
8     -webkit-column-rule: 1px solid #c4c8cc;
9 }

Code Source

CSS3分列在网站上看起来会非常不错, 现实的问题是我们如何把基于文本的内容分列显示. 通过上面的代码,为你的文本段落设置其中的列的数值,文本内容将会按你设定的值分成宽度相同的列.

28. CSS 固定的页脚

01 #footer {
02     position: fixed;
03     left: 0px;
04     bottom: 0px;
05     height: 30px;
06     width: 100%;
07     background: #444;
08 }
09
10 /* IE 6 */
11 * html #footer {
12     position: absolute;
13     top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
14 }

Code Source

这个实际用起来比听起来要有用的多, 为你的网站添加一个固定页脚是很简单的. 这些页脚不管页面如何滚动都是固定的,你可以包含一些帮助信息或是联系方式等等. 完美的为用户界面增加价值.

29. PNG 图片在 IE6下的透明度

01 .bg {
02     width:200px;
03     height:100px;
04     background: url(/folder/yourimage.png) no-repeat;
05     _background:none;
06     _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
07 }
08
09
10 /* 1px gif method */
11 img, .png {
12     position: relative;
13     behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG"&& this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
14        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ this.src + "', sizingMethod='image')",
15        this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
16        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ this.origBg + "', sizingMethod='crop')",
17        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
18 }

Code Source

使用透明图片已经变成网站的最基本的实践. 开始的时候是gif图,现在都使用PNG透明图. 不幸的是一些IE老版的浏览器不支持这个透明度属性. 添加上上面的代码就能搞定这个问题.

30. 跨浏览器的最小高度

1 #container {
2     min-height: 550px;
3     height: auto !important;
4     height: 550px;
5 }

不得不使用min-height的开发者知道都是那些浏览器支持这个属性. 很多新的游览器都支持这个属性, 然而Internet Explorer 和 老版本的 Firefox对这个支持有问题. 上面的代码能解决这个Bug.

31. CSS3发光输入框

01 input[type=text], textarea {
02     -webkit-transition: all 0.30s ease-in-out;
03     -moz-transition: all 0.30s ease-in-out;
04     -ms-transition: all 0.30s ease-in-out;
05     -o-transition: all 0.30s ease-in-out;
06     outline: none;
07     padding: 3px 0px 3px 3px;
08     margin: 5px 1px 3px 0px;
09     border: 1px solid #ddd;
10 }
11
12 input[type=text]:focus, textarea:focus {
13     box-shadow: 0 0 5px rgba(81, 203, 238, 1);
14     padding: 3px 0px 3px 3px;
15     margin: 5px 1px 3px 0px;
16     border: 1px solid rgba(81, 203, 238, 1);
17 }

Code Source

我真的喜欢这个基础的自定义CSS3类，这是因为它覆盖默认浏览器行为的方式。我所知道的Chrome & Safar用户对表单里的输入框轮廓很反感。将这些属性加到你的样式表，会给基本的输入框元素设置一个全新的设计。

32. 基于文件类型的链接样式

01 /* external links */
02 a[href^="http://"] {
03     padding-right: 13px;
04     background: url('external.gif') no-repeat center right;
05 }
06
07 /* emails */
08 a[href^="mailto:"] {
09     padding-right: 20px;
10     background: url('email.png') no-repeat center right;
11 }
12
13 /* pdfs */
14 a[href$=".pdf"] {
15     padding-right: 18px;
16     background: url('acrobat.png') no-repeat center right;
17 }

Code Source

相当晦涩的一段CSS代码，但我喜欢它的创造力！你可以决定使用CSS选择器的链接的文件类型，并以图标作为背景图片。这些可以包含不同的协议（HTTP, FTP, IRC, mailto）或简单的只是它们自己的文件类型（mp3, avi, pdf）。

33. 强制代码包装

1 pre {
2     white-space: pre-wrap;       /* css-3 */
3     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
4     white-space: -pre-wrap;      /* Opera 4-6 */
5     white-space: -o-pre-wrap;    /* Opera 7 */
6     word-wrap: break-word;       /* Internet Explorer 5.5+ */
7 }

Code Source

典型的pre标签是在布局中用来显示大块代码的。这是预编排的文本，就像你在Notepad或Textedit发现的那样，除非你经常看的是引起水平滚动条的一长段文字。这段CSS代码将强制所有pre标签为封装代码格式，不会跑到容器外面去。

34.强制可点击条目上显示手型光标

1 a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
2     cursor: pointer;
3 }

Code Source

有许多默认的可点击HTML元素并不总是显示手型的指针图标。使用这个CSS选择器设置，你可以对许多关键的元素以及任何使用 .pointer类的其它对象，强制指定指针的形状。

35. 网页顶端阴影

01 body:before {
02     content: "";
03     position: fixed;
04     top: -10px;
05     left: 0;
06     width: 100%;
07     height: 10px;
08
09     -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
10     -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
11     box-shadow: 0px 0px 10px rgba(0,0,0,.8);
12     z-index: 100;
13 }

Code Source

除了一些令人愉悦的美感，开发者可能找不到它会有多大用处。但我确实享受这个效果，而且显然它是独一无二的！只需将这个CSS 代码附加到你的body元素，就能从你的页面顶部往下显示一个渐渐消退的阴影。

36. CSS3 对话气泡

01 .chat-bubble {
02     background-color: #ededed;
03     border: 2px solid #666;
04     font-size: 35px;
05     line-height: 1.3em;
06     margin: 10px auto;
07     padding: 10px;