经典常用的CSS片段选集

这里收集了一些经典常用的CSS片段代码,以备不时之需。

1.元素垂直居中

.ele{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

2.背景渐变

.bg{
    background-color: #19b6df;    
    background-image:-webkit-linear-gradient(top, #1492b3 0%, #19b6df 61%);
    background-image:-moz-linear-gradient(top, #1492b3 0%, #19b6df 61%);
    background-image:-ms-linear-gradient(top, #1492b3 0%, #19b6df 61%);
    background-image:-o-linear-gradient(top, #1492b3 0%, #19b6df 61%);
    background-image:linear-gradient(top, #1492b3 0%, #19b6df 61%);
    background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, #1492b3),color-stop(0.61, #19b6df));

}

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

4.给不同的超链接添加不同的样式

有时候我们需要为不同的超链接设置不同的样式,使用户能够一眼就看出这个超链接的作用。下面的CSS代码将不同的超链接设置为不同的颜色,并为每个超链接设置不同的小图标。 通过识别href属性来判断。

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.表格列宽自适应

   td {
    white-space: nowrap;
   } 
  

6.Bootstrap采用的的CSS清除浮动

  .clearfix:before,.clearfix:after,.container:before, .container:after { content: ""; display: table; }
  .clearfix:after,.container:after { clear: both; }  
  .clearfix { zoom: 1; }  /* IE 6/7 */   
  

7. 经典的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%; }    

8.透明度

  .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 */
}       

9.制作模糊文字

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

10.添加省略号

  .ellipsis{
   text-overflow:ellipsis;
   white-space:nowrap; 
   overflow:hidden;  
  }     

  

11.用CSS实现LOADING省略号动画

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

12. 通用媒体查询

  /* 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 */
}          

13.自定义文本选择背景颜色

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

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

14.图片边框效果

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

 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*/
}             

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

16.元素选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
其中n可以是数字或者 Odd 和 even或者公式。

tr:nth-child(odd) {
    background-color: #ccc;
} 

17.元素内阴影效果

#mydiv { 
    -moz-box-shadow: inset 2px 0 4px #000;
    -webkit-box-shadow: inset 2px 0 4px #000;
    box-shadow: inset 2px 0 4px #000;
}        

18.元素外阴影效果

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

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

20.IE6的PNG透明修复

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

21.修改输入框的边框样式

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

22.强制换行

 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+ */
}                

23.在可打印的网页中显示URLS

@media print   {  
  a:after {  
    content: " [" attr(href) "] ";  
  }  
}     

24.纯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); 
}    

20150826103616

25.规定盒模型边框的类型

是否将border和padding计算到盒模型的宽度高度中。

box-sizing: content-box|border-box|inherit;
说明:content-box:在宽度和高度之外绘制元素的内边距和边框。
border-box: 在宽度和高度之内绘制元素的内边距和边框。

为了同意效果,建议页面采用border-box.

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}   
   

26.背景右侧显示并距离右侧一段距离

之前我做的都是嵌套div,定位显示,下面简单粗暴,15px就是距离右侧的距离。

  background-position:right 15px center;

27.css里计算公式

 width:calc(100% - 100px);

带给你灵感的按钮button效果

当前的“按钮的趋势”是相当令人兴奋的,因为在使用中有多种设计细节允许风格有很大的多样性。比如透明的略带圆角边框的按钮似乎对站点的图像背景颇为流行,但是又没有限制圆角,只要设计出适合的按钮即可。所有这些按钮设计的共同点就是简单,在下面的例子中,我们试图创造一个平衡点,不需要太多的动画,但尝试添加一些效果如颜色或形状。这里采用css的过渡效果CSS transitions和CSS animations。 继续阅读“带给你灵感的按钮button效果”