垂直对齐

在使用 CSS 的时候，你可能会出现疑问，我如何在容器中将文本或元素垂直对齐。现在使用 CSS3 Transforms，我们可以更有效解决这问题，如下：

1
2
3
4
5
6
7
.verticalcenter {
	position: relative; 
	top: 50%; 
	-webkit-transform: translateY(-50%); 
	-o-transform: translateY(-50%); 
	transform: translateY(-50%);
}

使用这个技术，文本、段落等都可以垂直对齐，CSS3 Transform 支持 Chrome 4, Opera 10, Safari 3, Firefox 3, Internet Explorer 9。

元素拉伸为全屏高度

一般来说，你可能会想要把元素拉伸为全屏高度，问本元素调整只会调整容器的大小，因此元素跨越整个窗口高度就需要在 html 、 body 上做文章。

1
2
3
html, body {
	height: 100%;
}

任何元素 100% 高度，如下：
1
div { height: 100%; }

根据文件格式引用不同样式

有时候你可能需要将特定的链接以不同颜色展现出来，来让他更容易被区分。下面的 CSS 片段将会为文本、链接添加图标，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a[href^="http://"] {
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;
} 
/* emails */
a[href^="mailto:"] {
	padding-right: 20px;
	background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"] {
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
}

跨浏览器图像灰度

灰度可以为网站提供更深的基调使其看起来更优雅简约。这里我们使用 SVG 为图片添加一个慧都过滤器。

1
2
3
4
5
<svg xmlns="http://www.w3.org/2000/svg">
	<filter id="grayscale">
		<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
	</filter>
</svg>

使用 filter属性跨浏览器：
1
2
3
4
5
img {
	filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

动画背景

CSS 最诱人的功能之一—添加动画效果。我们可以将背景颜色、透明度、大小等做成动画效果。但是梯度效果却不行。现在我们可以使用以下代码来实现。

1
2
3
4
5
6
7
8
9
button {
	background-image: linear-gradient(#5187c4, #1c2f45);
	background-size: auto 200%;
	background-position: 0 100%;
	transition: background-position 0.5s;
}
button:hover {
	background-position: 0 0;
}

CSS 列表自动宽度

表格调整列宽时间麻烦的事情。不过也可以轻松解决，在 td 元素中使用 white-space: nowrap：

1
2
3
td {
	white-space: nowrap;
}

显示阴影

想要添加阴影，那就试试这个代码吧，可以在任意边添加阴影。要完成此项，首相，确定盒子的长宽，使用:after 伪元素，放置到正确位置，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.box-shadow {
	background-color: #FF8020;
	width: 160px; height: 90px;
	margin-top: -45px;
	margin-left: -80px;
	position: absolute;
	top: 50%;
	left: 50%;
}
.box-shadow:after {
	content: "";
	width: 150px;
	height: 1px;
	margin-top: 88px;
	margin-left: -75px;
	display: block;
	position: absolute;
	left: 50%;
	z-index: -1;
	-webkit-box-shadow: 0px 0px 8px 2px #000000;
	-moz-box-shadow: 0px 0px 8px 2px #000000;
	box-shadow: 0px 0px 8px 2px #000000;
}

长文本封装

如果你的文本内容比容器还长，那下面这个代码就对你很有帮助了。
使用CSS适应容器宽度：

1
2
3
4
pre {
	white-space: pre-line;
	word-wrap: break-word;
}

模糊文本

想让文本有模糊效果？就这两步： color transparent、添加text-shadow ：

1
2
3
4
.blurry-text {
	color: transparent;
	text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

使用 CSS 制作动画省略号

在加载的时候来个动画效果如何？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.loading:after {
	overflow: hidden;
	display: inline-block;
	vertical-align: bottom;
	animation: ellipsis 2s infinite;
	content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
	from {
		width: 2px;
	}
	to {
		width: 15px;
	}
}

英文：10 Simple & Smart CSS Snippets