10個不可忽視的CSS代碼片段

本文介紹10個非常有用的CSS代碼片段，絕對不容忽視。包括在整個容器中垂直對齊、元素拉伸爲全屏高度、跨瀏覽器圖像灰度、動畫背景等，使用平率高，經常無法完全達到想要效果。現在有了這10個CSS代碼片段，我們可以將這些效果做得更好。

1、垂直對齊

在使用CSS的時候，你可能會出現疑問，我如何在容器中將文本或元素垂直對齊。現在使用CSS3Transforms，我們可以更有效解決這問題，如下：

.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。

2、元素拉伸爲全屏高度

一般來說，你可能會想要把元素拉伸爲全屏高度，問本元素調整隻會調整容器的大小，因此元素跨越整個窗口高度就需要在html 、body上做html,

body {
height: 100%;
}

任何元素100%高度，如下：

div {
height: 100%;
}

據文件格式引用不同樣式

有時候你可能需要將特定的鏈接以不同顏色展現出來，來讓他更容易被區分。下面的CSS片段將會爲文本、鏈接添加圖標，如下：

a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}

a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}


a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}

效果如下：

Hello, Here i will share Google Material Design eBook. You can going
to my website or drop me Email for more info.

4、跨瀏覽器圖像灰度

灰度可以爲網站提供更深的基調使其看起來更優雅簡約。這裏我們使用SVG爲圖片添加一個慧都過濾器。
使用 filter屬性跨瀏覽器：

img {
filter: url(filters.svg#grayscale);
filter: gray;
-webkit-filter: grayscale(1);
}

5、動畫背景

CSS最誘人的功能之一—添加動畫效果。我們可以將背景顏色、透明度、大小等做成動畫效果。但是梯度效果卻不行。現在我們可以使用以下代碼來實現。

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;
}

效果：

The Button Transition

6、CSS 列表自動寬度

表格調整列寬時間麻煩的事情。不過也可以輕鬆解決，在td元素中使用

white-space: nowrap：
td {
white-space: nowrap;
}

效果：
Non Autowidth Table
1 Mr. John Doe United States of America 2014
2 Mr. Paul Jones New Zealand 2013
Autowidth Table
1 Mr. John Doe United States of America 2014
2 Mr. Paul Jones New Zealand 2013

7、顯示陰影

想要添加陰影，那就試試這個代碼吧，可以在任意邊添加陰影。要完成此項，首相，確定盒子的長寬，使用:after僞元素，放置到正確位置，代碼如下：

.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;
}

效果：
Edit in JSFiddle
JavaScript
HTML
CSS
Result

8、長文本封裝

如果你的文本內容比容器還長，那下面這個代碼就對你很有幫助了。
10個不可忽視的CSS代碼片段
使用CSS適應容器寬度：

pre {
white-space: pre-line;
word-wrap: break-word;
}

效果

10個不可忽視的CSS代碼片段

9、模糊文本

想讓文本有模糊效果？就這兩步： color transparent、添加text-shadow ：

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

this text is so blurry.

10、使用CSS製作動畫省略號

在加載的時候來個動畫效果如何？

.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026";
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}

效果：

Loading…

來自：慧都控件網
鏈接：http://www.evget.com/article/2014/11/27/21871.html