经典常用的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);

SweetAlert – 现成的漂亮的提示窗口效果

前端开发er们早就扔掉Alert提示效果了,自定义的弹出层提示效果应有尽有,美不胜收。今天给大家推荐一个现成的弹出层提示效果Sweet Alert。
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果。SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒。另外提供了丰富的自定义配置选择,可以灵活控制。 继续阅读“SweetAlert – 现成的漂亮的提示窗口效果”

前端开发中有用的HTML+CSS3效果

HTML5+CSS3效果太多了,见一个就收一个吧。

1.自适应的占位符效果

在早期,我们都是通过使用 JavaScript 来实现占位符功能。而现在,HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能。这里向大家分享一个自适应的占位符效果(Adaptive Placeholder),当你输入的时候,提示文字不会消失,而是以动画的方式移动到了输入框的上方。

012341520419811

源码下载  在线演示

2.单元素实现的 CSS 加载进度提示效果

之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合。这些加载效果都是基于一个 DIV 元素实现的,十分强悍。

021205265523301

源码下载 在线演示

3.奇特的网格加载效果

向您展示了如何使用 Masonry 网格砌体插件,结合 CSS 动画重现这种效果。另外在这里,我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用。

182052264687088

源码下载 在线演示

4.超炫的复选框(Checkbox)效果

复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。

201639273854969

源码下载 在线演示

5.网页边栏过渡动画

以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是。通常侧边栏滑入,把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果。

271749425916660

源码下载 在线演示

6.超炫的页面切换动画效果

今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果。

271726215915446

源码下载 在线演示

分享10个美化网站的CSS3片段

前端开发人员利用CSS3来创建复杂的视觉效果来美化网站,下面分享的10个CSS3片段,能让你的站点看起来更专业更美观。

利用CSS3来打造黑白图像

下面的 CSS class 实现的效果:让任何彩色图片呈现黑白色。适合任何浏览器。

img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

继续阅读“分享10个美化网站的CSS3片段”

CSS3属性之-背景

CSS3中背景增加了4个新属性。背景大小,背景显示区域,背景裁剪区域,以及多背景。

1.背景大小Background-size:

background-size常用来调整背景图片的大小,有以下可能的属性:
background-size: contain;缩小图片以适合元素(维持像素长宽比);
background-size: cover;扩展元素以填补元素(维持像素长宽比)
background-size: 100px 100px;按照指定的长宽来显示图片
background-size: 50% 100%;缩小图片至指定的大小,百分比是相对包含元素的尺寸.
background-size: 100% 80px;还可以采用百分比和像素混合显示。

继续阅读“CSS3属性之-背景”

CSS3属性之嵌入字体-@font-face

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3,web 设计师可以使用他们喜欢的任意字体。@font-face 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。但是浏览器需要一些时间来加载服务器端的字体,从速度来说,使用图片会带来更好的体验。如果你手上没有字体文件,你可以在dafont.com下载一些。

首先我们一起来看看@font-face的语法规则:
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

@font-face {

font-family: <YourWebFontName>;

src: <source> [<format>][,<source> [<format>]]*;

[font-weight: <weight>];

[font-style: <style>];

}

继续阅读“CSS3属性之嵌入字体-@font-face”

CSS3属性之边框和文本

CSS3边框增加了几个新的特性,通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框。

CSS3圆角边框

属性border-radius来创建圆角边框

border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */

属性border-shadow用于向边框添加阴影。

background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;

属性border-image,可以使用图片来创建边框

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3文本效果

属性text-shadow向文本应用阴影效果。
您能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色:
语法:

text-shadow: h-shadow v-shadow blur color;
h1
{
text-shadow: 5px 5px 5px #FF0000;
}

CSS3自动换行

word-wrap 属性允许您允许文本强制文本进行换行 – 即使这意味着会对单词进行拆分:

p {word-wrap:break-word;}

CSS3文本溢出效果-省略号代表

text-overflow: clip|ellipsis|string;

下面的实例多余用省略号代替,鼠标移到目标时显示全部

div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
text-overflow:ellipsis;
}

div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
JavaScript 语法:	object.style.textOverflow="ellipsis"

32个 HTML5 and CSS3 设计教程

今天分享35个HTML5 and CSS3 设计教程,让你进一步了解网页设计基础,加快网页设计步骤。

响应式网站设计流行的今年,HTML5 and CSS3也越来越受到大家的欢迎,今天从网络上收集了多种不同样式的简单有效的教程分享给大家。看完这些案例,有助于你如何创建响应式的网页布局,视差滚动技术,用户登录表单,CSS3 and HTML5验证,3D效果等,让你的网页看起来更有魅力。 继续阅读“32个 HTML5 and CSS3 设计教程”

网页中的数据表格用div还是用table

现在制作网站几乎都是采用符合网页标准的DIV+CSS方式,那么是不是说table就不能用了呢?其实这个问题跟我提出来的 网页中的数据表格用div还是table是两码事。现在做网页都说采用table是过时的,是不符合标准的,其实应该这么说,采用table进行网页排版,网页元素布局是不适合的,表格是用来显示数据的。

继续阅读“网页中的数据表格用div还是用table”