30个值得收藏的CSS代码片段

 

这里收集了30个非常有用的CSS代码片段，非常值得大家去收藏，以备不时之需。

 1、创建跨浏览器的图像灰度

如何将图片制作为灰度图片，而且在所有的浏览器中都表现一致呢？答案是结合使用svg和filter过滤器。

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

img {

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

    filter: gray; /* IE6-9 */

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

}                               

 2、元素垂直居中

要使一个元素相对于它的父元素垂直居中需要使用一些小技巧。

.ele{

    position: relative;

    top: 50%;

    -webkit-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    transform: translateY(-50%);

}                           

更多关于元素垂直居中的资料可以参考：《使用3行CSS代码使任何元素垂直居中》

 3、背景渐变动画

通常情况下，元素的渐变背景是不能制作动画效果的，你可以使用下面的代码来实现这个动画效果。实际上它是使用修改背景图片位置的方法来实现这个效果的。

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

 4、为超链接添加个性样式

有时候我们需要为不同的超链接设置不同的样式，使用户能够一眼就看出这个超链接的作用。下面的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;

}                            

效果如下面所示：

Hello, Here i will share Google Material Design eBook.

You can going to my website or drop me Email for more info.

 5、表格列宽自适应

要调整一个的表格的列宽是一件非常头疼的事情。你可以为td元素设置white-space: nowrap;，让文本在表格中自适应。

td {

    white-space: nowrap;

}                             

查看下面表格的前后比较效果。

非主动列宽的表格

1	Mr. John Doe	United States of America	2014
2	Mr. Paul Jones	New Zealand	2013

自动列宽的表格

1	Mr. John Doe	United States of America	2014
2	Mr. Paul Jones	New Zealand	2013

 5、经典的CSS清除浮动

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }                         

 6、最新的CSS清除浮动方法

.clearfix:before, .container:after { content: ""; display: table; }

.clearfix:after { clear: both; }

/* IE 6/7 */

.clearfix { zoom: 1; }                               

 7、制作跨浏览器的透明度

.transparent {

    filter: alpha(opacity=50); /* internet explorer */

    -khtml-opacity: 0.5;      /* khtml, old safari */

    -moz-opacity: 0.5;       /* mozilla, netscape */

    opacity: 0.5;           /* fx, safari, opera */

}                               

具体效果如下：

 8、制作模糊文字

.blurry-text {

   color: transparent;

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

}                               

效果如下：

这是一些模糊文本。

更多关于模糊文字的资料请参考：《使用CSS制作跨浏览器的模糊文字效果》。

 9、用CSS实现LOADING省略号动画

这段CSS代码使用CSS3的帧动画来模拟loading文字后面的3个小省略号的动画效果。

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

    }

}                               

看一看下面loading文字后面的小省略号的动画效果。

Loading

 10、不同弧度的圆角

#container {

    -webkit-border-radius: 4px 3px 6px 10px;

    -moz-border-radius: 4px 3px 6px 10px;

    -o-border-radius: 4px 3px 6px 10px;

    border-radius: 4px 3px 6px 10px;

}

/* 下面的代码是上面代码的分解代码 */

#container {

    -webkit-border-top-left-radius: 4px;

    -webkit-border-top-right-radius: 3px;

    -webkit-border-bottom-right-radius: 6px;

    -webkit-border-bottom-left-radius: 10px;

    -moz-border-radius-topleft: 4px;

    -moz-border-radius-topright: 3px;

    -moz-border-radius-bottomright: 6px;

    -moz-border-radius-bottomleft: 10px;

}                               

 

 11、通用媒体查询

/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 320px) and (max-device-width : 480px) {

  /* Styles */

}

/* Smartphones (landscape) ----------- */

@media only screen and (min-width : 321px) {

  /* Styles */

}

/* Smartphones (portrait) ----------- */

@media only screen and (max-width : 320px) {

  /* Styles */

}

/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

  /* Styles */

}

/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

  /* Styles */

}

/* iPads (portrait) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

  /* Styles */

}

/* Desktops and laptops ----------- */

@media only screen and (min-width : 1224px) {

  /* Styles */

}

/* Large screens ----------- */

@media only screen and (min-width : 1824px) {

  /* Styles */

}

/* iPhone 4 ----------- */

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {

  /* Styles */

}                               

 12、自定义文本选择

正常情况下用鼠标选择一段文本是呈现蓝底白字的效果，使用下面的代码可以改变它们。

::selection { background: #e2eae2; }

::-moz-selection { background: #e2eae2; }

::-webkit-selection { background: #e2eae2; }                              

DEMO:用鼠标选择这里的文字看看效果。

 13、图片边框效果

下面的代码可以为你的图片添加漂亮的带阴影的边框效果。

img.polaroid {

    background:#000; /*Change this to a background image or remove*/

    border:solid #fff;

    border-width:6px 6px 20px 6px;

    box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */

    -webkit-box-shadow:1px 1px 5px #333;

    -moz-box-shadow:1px 1px 5px #333;

    height:200px; /*Set to height of your image or desired div*/

    width:200px; /*Set to width of your image or desired div*/

}                               

 14、CSS全屏背景图片

全屏图片主要使用的是CSS的background-size属性。关于该属性的详细介绍可以参考：《使用一行CSS代码生成全屏背景图像》。

html {

    background: url('images/bg.jpg') no-repeat center center fixed;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

}                               

 15、CSS3渐变模板

#colorbox {

    background: #629721;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));

    background-image: -webkit-linear-gradient(top, #83b842, #629721);

    background-image: -moz-linear-gradient(top, #83b842, #629721);

    background-image: -ms-linear-gradient(top, #83b842, #629721);

    background-image: -o-linear-gradient(top, #83b842, #629721);

    background-image: linear-gradient(top, #83b842, #629721);

}                               

 16、@FONT-FACE模板

@font-face {

    font-family: 'MyWebFont';

    src: url('webfont.eot'); /* IE9 Compat Modes */

    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    url('webfont.woff') format('woff'), /* Modern Browsers */

    url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */

    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

}

body {

    font-family: 'MyWebFont', Arial, sans-serif;

}                               

 17、CSS3 斑马线

tbody tr:nth-child(odd) {

    background-color: #ccc;

}                               

 18、元素内阴影效果

#mydiv {

    -moz-box-shadow: inset 2px 0 4px #000;

    -webkit-box-shadow: inset 2px 0 4px #000;

    box-shadow: inset 2px 0 4px #000;

}                               

 

 19、元素外阴影效果

#mydiv {

    -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);

    -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);

    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);

}                               

 

 20、CSS3多列文本布局

#columns-3 {

    text-align: justify;

    -moz-column-count: 3;

    -moz-column-gap: 12px;

    -moz-column-rule: 1px solid #c4c8cc;

    -webkit-column-count: 3;

    -webkit-column-gap: 12px;

    -webkit-column-rule: 1px solid #c4c8cc;

}                               

 21、FOOTER固定在页面的顶部

你是否曾经想将页面的脚部固定在网页的底部呢？下面的代码可以帮你实现，并且添加了对IE6的支持。

#footer {

    position: fixed;

    left: 0px;

    bottom: 0px;

    height: 30px;

    width: 100%;

    background: #444;

}

/* IE 6 */

* html #footer {

    position: absolute;

    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');

}                               

 22、IE6的PNG透明修复

在IE6中，PNG图片无法显示透明像素。使用下面的代码可以修复这个BUG。

.bg {

    width:200px;

    height:100px;

    background: url(/folder/yourimage.png) no-repeat;

    _background:none;

    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');

}

/* 1px gif method */

img, .png {

    position: relative;

    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",

       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

       this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",

       this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));

}                               

 23、设置跨浏览器的元素最小高度

#container {

    min-height: 550px;

    height: auto !important;

    height: 550px;

}                               

 24、修改输入框的边框样式

input[type=text], textarea {

    -webkit-transition: all 0.30s ease-in-out;

    -moz-transition: all 0.30s ease-in-out;

    -ms-transition: all 0.30s ease-in-out;

    -o-transition: all 0.30s ease-in-out;

    outline: none;

    padding: 3px 0px 3px 3px;

    margin: 5px 1px 3px 0px;

    border: 1px solid #ddd;

}

input[type=text]:focus, textarea:focus {

    box-shadow: 0 0 5px rgba(81, 203, 238, 1);

    padding: 3px 0px 3px 3px;

    margin: 5px 1px 3px 0px;

    border: 1px solid rgba(81, 203, 238, 1);

}                               

查看下面的例子，鼠标选中输入框看看边框效果。

没有修改样式的输入框：

修改样式的输入框：

 25、强制换行

pre {

    white-space: pre-wrap;       /* css-3 */

    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */

    white-space: -pre-wrap;      /* Opera 4-6 */

    white-space: -o-pre-wrap;    /* Opera 7 */

    word-wrap: break-word;       /* Internet Explorer 5.5+ */

}                               

 26、在所有可点击的元素使用手形鼠标样式

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {

    cursor: pointer;

}                               

 27、在可打印的网页中显示URLS

@media print   { 

  a:after { 

    content: " [" attr(href) "] "; 

  } 

}                               

 28、禁用移动WEBKIT的选择高亮

body {

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}                              

 29、CSS3国际象棋棋盘格背景图案

body {

    background-color: white;

    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),

    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);

    background-size: 100px 100px;

    background-position: 0 0, 50px 50px;

}                               

 

 30、纯CSS3纸张阴影特效

ul.box {

    position: relative;

    z-index: 1; /* prevent shadows falling behind containers with backgrounds */

    overflow: hidden;

    list-style: none;

    margin: 0;

    padding: 0;

}

ul.box li {

    position: relative;

    float: left;

    width: 250px;

    height: 150px;

    padding: 0;

    border: 1px solid #efefef;

    margin: 0 30px 30px 0;

    background: #fff;

    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

}

ul.box li:before,

ul.box li:after {

    content: '';

    z-index: -1;

    position: absolute;

    left: 10px;

    bottom: 10px;

    width: 70%;

    max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */

    max-height: 100px;

    height: 55%;

    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

    -webkit-transform: skew(-15deg) rotate(-6deg);

    -moz-transform: skew(-15deg) rotate(-6deg);

    -ms-transform: skew(-15deg) rotate(-6deg);

    -o-transform: skew(-15deg) rotate(-6deg);

    transform: skew(-15deg) rotate(-6deg);

}

ul.box li:after {

    left: auto;

    right: 10px;

    -webkit-transform: skew(15deg) rotate(6deg);

    -moz-transform: skew(15deg) rotate(6deg);

    -ms-transform: skew(15deg) rotate(6deg);

    -o-transform: skew(15deg) rotate(6deg);

    transform: skew(15deg) rotate(6deg);

}                               

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506011951.html