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

本文介绍10个非常有用的CSS代码片段，绝对不容忽视。包括在整个容器中垂直对齐、元素拉伸为全屏高度、跨浏览器图像灰度、动画背景等，使用平率高，经常无法完全达到想要效果。现在有了这10个CSS代码片段，我们可以将这些效果做得更好。

1、垂直对齐

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

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

}

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

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

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;

}

效果如下：

5、跨浏览器图像灰度

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

使用 filter属性跨浏览器：

img {

filter: url(filters.svg#grayscale); /* Firefox 3.5+ */

filter: gray; /* IE6-9 */

-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */

}

6、动画背景

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;

}

效果：

6、CSS 列表自动宽度

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

td {

white-space: nowrap;

}

效果：

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;

}

效果：

8、长文本封装

如果你的文本内容比容器还长，那下面这个代码就对你很有帮助了。

使用CSS适应容器宽度：

pre {

white-space: pre-line;

word-wrap: break-word;

}

效果

9、模糊文本

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

.blurry-text {

color: transparent;

text-shadow: 0 0 5px rgba(0,0,0,0.5);

}

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

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

.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

原文地址：10个不可忽视的CSS代码片段

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。