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

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

}

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

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;

08	position: relative;

09	text-align: center;

10	width: 300px;

11	-moz-border-radius: 20px;

12	-webkit-border-radius: 20px;

13	-moz-box-shadow: 0 0 5px #888;

14	-webkit-box-shadow: 0 0 5px #888;

15	font-family: 'Bangers', arial, serif;

16

}

17	.chat-bubble-arrow-border {

18	border-color: #666 transparent transparent transparent;

19	border-style: solid;

20	border-width: 20px;

21	height: 0;

22

width: 0;

23	position: absolute;

24	bottom: -42px;

25	left: 30px;

26

}

27	.chat-bubble-arrow {

28	border-color: #ededed transparent transparent transparent;

29	border-style: solid;

30	border-width: 20px;

31	height: 0;

32

width: 0;

33	position: absolute;

34	bottom: -39px;

35	left: 30px;

36

}

Code Source

每当讨论到对话气泡时，无数的用户界面用途就会浮现出来。这些可以用于处理讨论评述，或者创建公告版，或者显示引用文本。只需将下面的类加入你的样式表，你也可以从这贴 CSS3代码片段  找到相关的HTML代码。

37. 默认的 H1-H5 题头

01	h1,h2,h3,h4,h5{

02	color: #005a9c;

03

}

04

h1{

05	font-size: 2.6em;

06	line-height: 2.45em;

07

}

08

h2{

09	font-size: 2.1em;

10	line-height: 1.9em;

11

}

12

h3{

13	font-size: 1.8em;

14	line-height: 1.65em;

15

}

16

h4{

17	font-size: 1.65em;

18	line-height: 1.4em;

19

}

20

h5{

21	font-size: 1.4em;

22	line-height: 1.25em;

23

}

Code Source

我已经提供了许多常见的语法，包括浏览器CSS重置以及一些HTML元素重置。这个模板包含了所有从H1-H5的主要的题头元素的默认样式。你也许会想增加H6，但我却从未见过有网站使用所有六个嵌套的题头。

38.纯CSS背景噪声

1

body {

2

background-image: url(data:image/png;base64,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);

3	background-color: #0094d0;

4

}

Code Source

设计师已经看到网站中加入这个效果有很长时间了，虽然他们通常是使用具有透明度的重复的瓷砖图像。但是我们可以给CSS嵌入Base64编码来生成全新的图像。在上面代码片段的例子中，是在body背景上产生了一个小小的噪声纹理，你也可以在噪声纹理发生器创建一个自定义的噪声背景。

39. 继续列表排序

01	ol.chapters {

02	list-style: none;

03	margin-left: 0;

04

}

05

06	ol.chapters > li:before {

07	content: counter(chapter) ". ";

08	counter-increment: chapter;

09	font-weight: bold;

10	float: left;

11	width: 40px;

12

}

13

14	ol.chapters li {

15	clear: left;

16

}

17

18	ol.start {

19	counter-reset: chapter;

20

}

21

22	ol.continue {

23	counter-reset: chapter 11;

24

}

Code Source

我觉得这也许不是特别流行的代码段，但它在开发者中确实具有市场。可能有一种情况，你需要继续一个列表项目，而它却被分割为两个独立的 UL元素。查看上面的代码来找寻一个很好的纯CSS修复方案。