10个不可忽视的CSS代码片段

###1、垂直对齐###

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

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

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

###2、元素拉伸为全屏高度###

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

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

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

1div {
2height: 100%;
3}
4

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

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

###5、跨浏览器图像灰度###

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

1<svg xmlns="http://www.w3.org/2000/svg">
2<filter id="grayscale">
3<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"></feColorMatrix>
4</filter>
5</svg>
6

使用 filter属性跨浏览器：

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

###6、动画背景###

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

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

###6、CSS 列表自动宽度###

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

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

###7、显示阴影###

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

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

###8、长文本封装###

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

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

###9、模糊文本###

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

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

###10、使用CSS制作动画省略号###

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

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

CodeSky 代码之空

10个不可忽视的CSS代码片段

评论 (0)