前端大本营

HTML5,CSS3,Responsive,资料站
一般浏览器不会出现下载按钮,只有谷歌浏览器会(低版本的右下角没有下载按钮,比如53.0版本) 。   如果你的谷歌浏览器版本是54.0~,并且也出现了视频右下角有按钮的情况都可以使用下面的代码。 解决方法:
video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}
Tags: ,
Posted in CSS最新技术 | Chrome浏览器 去掉HTML5 video默认下载按钮已关闭评论
2017 11/08 周三

CSS3 中的一些黑科技

1、鼠标移进网页里,不见了= =
*{
    cursor: none!important;
}
2、简单的文字模糊效果
*{ 
    color: transparent;
    text-shadow: #111 0 0 5px;
}
3、多重边框
.div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}
4、实时编辑CSS
<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
            body { color: blue }
        </style>
    </body>
</html>
5、CSS中简单运算
.div{
    width: calc(100% - 500px);
}
6、border-radius 因为基本上很多人都是这么用的:
.div {
     border-radius: 4px;
}
稍微高端一点的是这样的:
.div {
    border-radius: 4px 6px 6px 4px;
}

然而,终极黑科技是这样用的:
.div {
     border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}
border-radius 它可以赋8个值:
斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,
各个数字就分别代表四个不一样的方向。
7、outline-offset 在input下写CSS的时候对下面的语句会很熟悉:
input {
    outline : none;
}

input:focus {
    outline : none;
}
这就是将input输入框去掉默认的蓝线框的方法。 CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离:
input {
    outline-offset: 4px ;
}
 

调节该属性值的大小你就可以看到outline的距离变化了。
Tags:
Posted in CSS最新技术 | CSS3 中的一些黑科技已关闭评论
.rect {
    position: absolute; 
    top: 20px;
    left: 20px; 
    width: 100px; 
    height: 100px; 
    background: linear-gradient(to left, #f00, #f00) left top no-repeat, 
                linear-gradient(to bottom, #f00, #f00) left top no-repeat, 
                linear-gradient(to left, #f00, #f00) right top no-repeat,
                linear-gradient(to bottom, #f00, #f00) right top no-repeat, 
                linear-gradient(to left, #f00, #f00) left bottom no-repeat,
                linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat;
    background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;  
}
<div class="rect"></div>
Posted in CSS最新技术 | div只有四个角有边框怎么实现?已关闭评论

首先现在比较流行的区别IE与其他浏览器的CSS写法,

条件判断式

这种方法旨在页面读取中使用相应的判断条件,让浏览器读取指定的CSS样式

<!--[if !IE]><!--> 除IE以外的浏览器都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE浏览器可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
稍作说明 ! 表示否,除了
lt 表示小于
lte 表示小于等于
gt 表示大于
gte 表示大于等于
( ) 优先计算
& 表示和,并且
| 表示或者
加载CSS2
<!--[if lt IE 9]>
加载CSS1(可以把要重写的写在这里).
<![endif]-->
以上内容均为了解即可, 这里告诉大家一个更有效的CSS写法,可以直接在样式表内,判断是否为IE浏览器。
@media all and (-ms-high-contrast:none){
   *******
}
简单吧,再不用为一个IE浏览器,来回在页内追加判断代码了
Tags: ,
Posted in CSS最新技术 | IE区别于其他浏览器的CSS代码写法。不使用判断条件式已关闭评论

使用过苹果Mac系统的人都知道Dock导航, 我们利用CSS3的过渡创建一个Dock导航

示例
CSS代码
body {
	margin: 0;
	padding: 0;
	font: normal 14px/1.5 "PT Sans", Helvetica, Arial, sans-serif;
	background: rgb(30, 30, 30);
	color: rgb(220, 220, 220);
}

.wrapper {
	position: absolute;
	top: 48%;
	left: 50%;
	width: 660px;
	height: 340px;
	margin: -190px 0 0 -330px;
}

.content {
	position: relative;
	width: 660px;
	height: 340px;
	overflow: hidden;		
	background: rgb(15, 15, 15) url(images/bg.jpg) no-repeat center bottom;
	border-radius: 10px;
	box-shadow: 0 1px 10px rgb(10, 10, 10);
}

h1 {
	margin-top: 1.5em;
	color: rgba(255, 255, 255, .9);
	line-height: 1;
	font-size: 70px;
	text-align: center;
	font-weight: bold;
	text-shadow: 0px 1px 5px rgb(255, 160, 55), 0px 1px 15px rgb(255, 160, 55);
	cursor: default;
}

h1 em {
	display: inline-block;
	font-size: .29em;
	font-style: normal;
	vertical-align: top;
	margin-left: -.4em;
	padding-top: .46em;
}

/* css dock style*/
@-webkit-keyframes bounce {
	  0% { -webkit-transform: translateY(0); }
	100% { -webkit-transform: translateY(-20px); }
}

@-moz-keyframes bounce {
	  0% { -moz-transform: translateY(0); }
	100% { -moz-transform: translateY(-20px); }
}
@-o-keyframes bounce {
	  0% { -o-transform: translateY(0); }
	100% { -o-transform: translateY(-20px); }
}

@-ms-keyframes bounce {
	  0% { -ms-transform: translateY(0); }
	100% { -ms-transform: translateY(-20px); }
}
@keyframes bounce {
	  0% { transform: translateY(0); }
	100% { transform: translateY(-20px); }
}

.dock {
	position: absolute;
	bottom: 0;
	z-index: 10;
	width: 100%;
	text-align: center;
	font: normal 14px/1 'Lucida Grande', Arial, sans-serif;
}

.dock ul {
	position: relative;
	display: inline-block;
	padding: 0 5px;
	margin: 0;
}
.dock li {
	display: inline-block;
	position: relative;
	margin: 0 1px;
	margin-bottom: 15px;
	vertical-align: baseline;
	-webkit-box-reflect: below -16px -webkit-gradient(
		linear, left top, left bottom,
		from(transparent),
		color-stop(91%, rgba(255, 255, 255, .1)),
		color-stop(91.01%, transparent),
		to(transparent)
	);
}

.dock a {
	display: inline-block;
	cursor: default;
	outline: none;
}
.dock li:target a {
	-webkit-animation: bounce .3s 6 alternate ease-out;
	-moz-animation: bounce .3s 6 alternate ease-out;
	-o-animation: bounce .3s 6 alternate ease-out;
	-ms-animation: bounce .3s 6 alternate ease-out;
	animation: bounce .3s 6 alternate ease-out;
}
.dock li:after {
	content: " ";
	position: absolute;
	bottom: -5px;
	left: 50%;
	width: 5px;
	height: 5px;
	opacity: 0;
	visibility: hidden;
	background-color: rgba(255, 255, 255, .8);
	margin-left: -2px;
	border-radius: 5px;
	box-shadow:
		inset 0 1px 3px rgba(75, 255, 255, .4),
		0 0 4px rgba(75, 255, 255, .5),
		0 -1px 7px rgb(75, 255, 255);
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-o-transition: opacity .5s;
	-ms-transition: opacity .5s;
	transition: opacity .5s;
}
.dock li:target:after {
	visibility: visible;
	opacity: 1;
}
.dock em {
	position: absolute;
	top: -34px;
	left: 50%;
	display: none;
	width: 150px;
	margin-left: -75px;
	text-align: center;
}
.dock em:after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid rgba(0, 0, 0, .6);
	border-bottom: none;
}
.dock em span {
	display: inline-block;
	padding: 5px 12px;
	font-size: 14px;
	font-style: normal;
	color: #FFF;
	background: #000;
	background: rgba(0, 0, 0, .6);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
	border-radius: 12px;
}

.dock li:hover em, 
.dock li a:focus em {
	display: block;
}
.dock img {
	width: 86px;
	height: auto;
	border: none;
	-webkit-transition: width .2s, height .2s;
	-moz-transition: width .2s, height .2s;
	-o-transition: width .2s, height .2s;
	-ms-transition: width .2s, height .2s;
	transition: width .2s, height .2s;
}

.dock li:hover img, 
.dock li a:focus img {
	width: 96px;
}

.dock li:active img {
	opacity: .9;
}	
.dock-container {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.dock-panel {
	width: 560px;
	height: 100px;
	background: -webkit-linear-gradient(to bottom, #eee 0%, #eee 28%,#bbb 51%,#bbb 100%);
	background: linear-gradient(to bottom, #eee 0%, #eee 28%,#bbb 51%,#bbb 100%);
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-o-backface-visibility: visible;
	-ms-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	-moz-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	-o-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	-ms-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	position: relative;
	left: 50%;
	margin-left: -280px;
	bottom: -50px;
}
HTML代码
<div class="wrapper">
		<div class="content">
			<h1>CSS Dock</h1>
			<div class="dock">
				<ul>
					<li id="mail">
						<a href="#mail">
							<em><span>Mail</span></em>
							<img src="images/icon-mail.png" alt="Mail">
						</a>
					</li>
					<li id="ical">
						<a href="#ical">
							<em><span>iCal</span></em>
							<img src="images/icon-ical.png" alt="iCal">
						</a>
					</li>
					<li id="addressbook">
						<a href="#addressbook">
							<em><span>Address Book</span></em>
							<img src="images/icon-addressbook.png" alt="Address Book">
						</a>
					</li>
					<li id="iphoto">
						<a href="#iphoto">
							<em><span>iPhoto</span></em>
							<img src="images/icon-iphoto.png" alt="iPhoto">
						</a>
					</li>
					<li id="idisk">
						<a href="#idisk">
							<em><span>iDisk</span></em>
							<img src="images/icon-idisk.png" alt="iDisk">
						</a>
					</li>
				</ul>
			</div>
			<div class="dock-stage">
					<div class="dock-container">
						<div class="dock-panel"></div>
					</div>
				</div>
		</div>
	</div>
Tags:
Posted in CSS最新技术 | CSS3 过渡创建 Dock 导航已关闭评论
2017 06/23 周五

CSS3 制作旋转按钮

利用CSS3的变形属性,我们可以制作很多原来只能用Flash才能做出来的效果
比如今天展示的这些按钮都是通过CSS3和简单的图片就可以实现的

示例
CSS代码
ul:before,
ul:after {
	display: table;
	content: "";
}
ul:after {
	clear: both;
	overflow: hidden;
}

ul {
	zoom: 1;
	list-style: none outside none;
	margin-bottom: 30px;
}

ul li {
	float: left:
	margin: 10px;
}
ul a {
	display: block;
	float: left;
	text-decoration: none;
}
ul img {
	border: 0;
}
h1 {
	margin: 2em 0;
}

#socialicons img,
#socialicons2 img{ 
	-moz-transition: all 0.8s ease-in-out;
	-webkit-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}

#socialicons img:hover{
	-moz-transform: rotate(360deg) scale(1.5);
	-webkit-transform: rotate(360deg) scale(1.5);
	-o-transform: rotate(360deg) scale(1.5);
	-ms-transform: rotate(360deg) scale(1.5);
	transform: rotate(360deg) scale(1.5);
}



#socialicons2 img:hover{ 
	-moz-transform: rotate(-360deg) scale(.7);
	-webkit-transform: rotate(-360deg) scale(.7);
	-o-transform: rotate(-360deg) scale(.7);
	-ms-transform: rotate(-360deg) scale(.7);
	transform: rotate(-360deg) scale(.7);
}

HTML代码
<ul id="socialicons">
	<li><a href="#"><img src="images/rss.png" alt="" /></a></li>
	<li><a href="#"><img src="images/delicious.png" alt="" /></a></li>
	<li><a href="#"><img src="images/facebook.png" alt="" /></a></li>
	<li><a href="#"><img src="images/twitter.png" alt="" /></a></li>
	<li><a href="#"><img src="images/yahoo.png" alt="" /></a></li>
</ul>
<h1>逆时针旋转360度缩小0.7倍</h1>
<ul id="socialicons2">
	<li><a href="#"><img src="images/rss.png" alt="" /></a></li>
	<li><a href="#"><img src="images/delicious.png" alt="" /></a></li>
	<li><a href="#"><img src="images/facebook.png" alt="" /></a></li>
	<li><a href="#"><img src="images/twitter.png" alt="" /></a></li>
	<li><a href="#"><img src="images/yahoo.png" alt="" /></a></li>
</ul>
Tags: ,
Posted in CSS最新技术 | CSS3 制作旋转按钮已关闭评论

突然发现CSS3的渐变真的很厉害, 随便什么样的背景都能制作。
看看这些神奇的纹理图案吧

示例
CSS代码
.patterns {
    width: 200px;
    height: 200px;
    float: left;
    margin: 10px;
    box-shadow: 0 1px 8px #666;
}

.pt1 {
    background-size: 50px 50px;
    background-color: #0ae;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.pt2 {
    background-size: 50px 50px;
    background-color: #f90;
    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.pt3 {
    background-size: 50px 50px;
    background-color: white;
    background-image: 
    	-webkit-linear-gradient(to top,transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    	-webkit-linear-gradient(to left, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
    background-image: 
    	linear-gradient(to top,transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    	linear-gradient(to left, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5))
}

.pt4 {
    background-size: 50px 50px;
    background-color: #ac0;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

.pt5 {
    background-size: 50px 50px;
    background-color: #c16;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

.pt6 {
    background-color: #eee;
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    background-image: 
    	-webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    	-webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    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);
}

.pt7 {
    background-color: #eee;
    background-size: 60px 60px;
    background-image: 
    	-webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    	-webkit-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    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);
}


.pt8 {
    background-color: #fff;
    background-size: 100% 1.2em;
    background-image: 
    	-webkit-linear-gradient(to right, transparent 21px, #abced4 21px, #abced4 23px, transparent 23px), 
    	-webkit-linear-gradient(#eee .05em, transparent .05em);
    background-image: 	
    	linear-gradient(to right, transparent 21px, #abced4 21px, #abced4 23px, transparent 23px), 
    	linear-gradient(#eee .05em, transparent .05em);
}

.pt9 {
    background: 
    	-webkit-radial-gradient(circle, white 10%, transparent 10%), 
    	-webkit-radial-gradient(circle, white 10%, black 10%) 50px 50px;
    background: 
    	radial-gradient(circle, white 10%, transparent 10%), 
    	radial-gradient(circle, white 10%, black 10%) 50px 50px;
    background-size: 100px 100px;
}

.pt10{
    background: 
    	-webkit-radial-gradient(circle at 0% 2%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), 
    	-webkit-radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background: 
    	radial-gradient(circle at 0% 2%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), 
    	radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background-size: 20px 20px;
}


.pt11 {
    background-color: #88AA33;
    background-image: -webkit-radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background-image: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background-position: 0 10px, 0 0%, 0 0;
    background-size: 20px 20px;
}


.pt12{
    background-color: #330000;
    background-image: 
    	-webkit-radial-gradient(#890000 4%, #5B0000 9%, rgba(102, 0, 0, 0) 9%), 
    	-webkit-radial-gradient(#890000 4%, #5B0000 8%, rgba(102, 0, 0, 0) 10%), 
    	-webkit-radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), 
    	-webkit-radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), 
    	-webkit-radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%), 
    	-webkit-radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%), 
    	-webkit-radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)), 
    	-webkit-radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)), 
    	-webkit-linear-gradient(45deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%), 
    	-webkit-linear-gradient(135deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%);
    background-image: 
    	radial-gradient(#890000 4%, #5B0000 9%, rgba(102, 0, 0, 0) 9%), 
    	radial-gradient(#890000 4%, #5B0000 8%, rgba(102, 0, 0, 0) 10%), 
    	radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), 
    	radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%), 
    	radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%), 
    	radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)), 
    	radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)), 
    	linear-gradient(45deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%), 
    	linear-gradient(135deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%);
    background-position: 0 0px, 50px 50px, 50px 0px, 0 50px, 50px 0px, 100px 50px, 0 0px, 50px 50px, 0 0px, 0 0;
    background-size: 100px 100px;
}

.pt13 {
    background-color: white;
    background-image: 
    	-webkit-radial-gradient(midnightblue 9px, transparent 10px), 
    	-webkit-repeating-radial-gradient(midnightblue 0px, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);
    background-image: 
    radial-gradient(midnightblue 9px, transparent 10px), 
    repeating-radial-gradient(midnightblue 0px, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);
    background-position: 0 0;
    background-size: 30px 30px, 90px 90px;
}

.pt14 {
    background-color: #282828;
    background-image: 
    	-webkit-radial-gradient(black 15%, transparent 16%), 
    	-webkit-radial-gradient(black 15%, transparent 16%), 
    	-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
    	-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
    background-image: 
    	radial-gradient(black 15%, transparent 16%), 
    	radial-gradient(black 15%, transparent 16%), 
    	radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
    	radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
    background-position: 0 0px, 8px 8px, 0 1px, 8px 9px;
    background-size: 16px 16px;
}

.pt15 {
    background-color: #BB0033;
    background-image: 
    	-webkit-radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
    	-webkit-radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
    	-webkit-radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%),
    	 -webkit-radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), 
    	 -webkit-radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%), 
    	 -webkit-radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
    	 -webkit-radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
    	 -webkit-radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), 
    	 -webkit-radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), 
    	 -webkit-radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%);
    background-image: 
    	radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
    	radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
    	radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%),
    	radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), 
    	radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%), 
    	radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
    	radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), 
    	radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), 
    	radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), 
    	radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%);
    background-position: 0 0%, 0 0%, 0 0%, 0 0%, 0 0%, 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px;
    background-size: 100px 100px;
}
.pt16 {
	background-color: #6d695c;
	background-image:
		-webkit-repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
		-webkit-repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
		-webkit-linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
		-webkit-linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
	background-image:
		repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
		repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
		linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
		linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
	background-size: 70px 120px;
}
.pt17 {
	background-image: 
		-webkit-radial-gradient( circle at 100% 50% , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent),
		-webkit-radial-gradient( circle at 0% 50% , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent);
	background-image: 
		radial-gradient(circle at 100% 50%, transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent), 
		radial-gradient( circle at 0% 50%, transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent);
	background-color: slategray;
	background-size:75px 100px;
  background-position: 0 0%, 0 -50px;
}

.pt18{
  background-color: #63773F;
  background-image: 
  	-webkit-radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), 
  	-webkit-radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), 
  	-webkit-radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), 
  	-webkit-radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), 
  	-webkit-radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210, 202, 171, 0) 17%), 
  	-webkit-radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54, 78, 39, 0) 17%), 
  	-webkit-radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210, 202, 171, 0) 17%), 
  	-webkit-radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54, 78, 39, 0) 17%);
  background-image: 
  	radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), 
  	radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), 
  	radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), 
  	radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), 
  	radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210, 202, 171, 0) 17%), 
  	radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54, 78, 39, 0) 17%), 
  	radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210, 202, 171, 0) 17%), 
  	radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54, 78, 39, 0) 17%);
  background-position: 50px 0px, 50px 0px, 0 50px, 0 50px, 0 0%, 0 0%, 50px 50px, 50px 50px;
  background-size: 100px 100px;
}
.pt19 {
  background-color: #C8D3A7;
  background-image: 
  	-webkit-radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%), 
  	-webkit-radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
	background-image: 
		radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%), 
		radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
  background-position: 0 0px, 55px 55px;
  background-size: 110px 110px;
}
.pt20 {
  background-color: #DDEEFF;
  background-image: 
  	-webkit-radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%), 
  	-webkit-radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%);
  background-image: 
  	radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%), 
  	radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%);
  background-position: 0 0px, 40px 40px;
  background-size: 80px 80px;
}	
HTML代码
<div class="patterns pt1"></div>
    <div class="patterns pt2"></div>
    <div class="patterns pt3"></div>
    <div class="patterns pt4"></div>
    <div class="patterns pt5"></div>
    <div class="patterns pt6"></div>
    <div class="patterns pt7"></div>
    <div class="patterns pt8"></div>
    <div class="patterns pt9"></div>
    <div class="patterns pt10"></div>
    <div class="patterns pt11"></div>
    <div class="patterns pt12"></div>
    <div class="patterns pt13"></div>
    <div class="patterns pt14"></div>
    <div class="patterns pt15"></div>
    <div class="patterns pt16"></div>
    <div class="patterns pt17"></div>
    <div class="patterns pt18"></div>
    <div class="patterns pt19"></div>
    <div class="patterns pt20"></div>
Posted in CSS最新技术 | CSS3 利用渐变属性制作纹理图案已关闭评论

不要问我为什么要用重复渐变,我也是头一次听说,不过看了效果非常不错,所以推荐给大家一起学习

示例
CSS代码
.body_2017062102{
  background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
  background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
  background-size: 100% 30px;
  position: relative;
  width:100%;
  height:500px;
}
.body_2017062102:before {
  content: "";
  display: inline-block;
  height: 100%;
  width: 4px;
  border-left: 4px double #FCA1A1;
  position: absolute;
  left: 30px;
}
HTML代码
<div class="body_2017062102"></div>
Tags:
Posted in CSS最新技术, 未分类 | CSS3 利用重复渐变制作纸张背景已关闭评论

现在各种各样的CSS3 样式按钮被设计师设计出来, 我们提供一些比较常用的按钮样式,供大家使用

CSS代码
.body_bg{
  background-color: #282828;
padding:30px;
  background-image: 
	-webkit-radial-gradient(black 15%, transparent 16%), 
	-webkit-radial-gradient(black 15%, transparent 16%), 
	-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
	-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
  background-image: 
	radial-gradient(black 15%, transparent 16%), 
	radial-gradient(black 15%, transparent 16%), 
	radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
	radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
  background-position: 0 0px, 8px 8px, 0 1px, 8px 9px;
  background-size: 16px 16px;
}
@font-face {
  font-family: 'icomoon';
  src:url('common/font/icomoon.eot');
  src:url('common/font/icomoon.eot?#iefix') format('embedded-opentype'),
	url('common/font/icomoon.svg#icomoon') format('svg'),
	url('common/font/icomoon.woff') format('woff'),
	url('common/font/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.controls_button{
  width: 400px;
  margin:40px auto;
}
.button{
  width: 70px;
  height: 70px;
  margin-right: 90px;
  font-size:0;
  border-radius: 50%;
  border:none;
  box-shadow: 
    0 1px 5px rgba(255,255,255,.5) inset,
    0 -2px 5px rgba(0,0,0,.3) inset,
    0 3px 8px rgba(0,0,0,.8);
  background: -webkit-radial-gradient( circle at top center, #f28fb8, #e982ad, #ec568c);
  background: radial-gradient(circle at top center, #f28fb8, #e982ad, #ec568c);
}
.button:nth-child(3){
  margin-right: 0;
}
.button:after{
  font-family: 'icomoon';
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 36px;
  content: "\21";
  color: #dd5183;
  text-shadow:0 3px 10px #f1a2c1,0 -3px 10px #f1a2c1;
}
.button:nth-child(2):after{
  content: "\22";
}
.button:nth-child(3):after{
  content: "\23";
}
.button:hover:after{
  color: #fff;
  text-shadow:0 1px 20px #fccdda, 1px 0 14px #fccdda;
}
.button:active{
  box-shadow: 
    0 2px 7px rgba(0,0,0,.5) inset,
    0 -3px 10px rgba(0,0,0,.1) inset,
    0 1px 3px rgba(255,255,255,.5);
  background: -webkit-radial-gradient(circle at top center,  #f28fb8, #e982ad, #ec568c);
  background: radial-gradient(circle at top center, #f28fb8, #e982ad, #ec568c);
}
HTML代码
<div class="controls_button">
		<button type="button" class="button">Chrome</button>
		<button type="button" class="button">Firefox</button>
		<button type="button" class="button">IE</button>
	</div>
Tags:
Posted in CSS最新技术 | CSS3 利用径向渐变制作圆形图标按钮已关闭评论
现在各种各样的CSS3 样式按钮被设计师设计出来, 我们提供一些比较常用的按钮样式,供大家使用 示例
CSS代码
<style type="text/css">
@font-face {
  font-family: 'EntypoRegular';
  src: url('common/font/entypo-webfont.eot');
  src: url('common/font/entypo-webfont.eot?#iefix') format('embedded-opentype'),
       url('common/font/entypo-webfont.woff') format('woff'),
       url('common/font/entypo-webfont.ttf') format('truetype'),
       url('common/font/entypo-webfont.svg#EntypoRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.button, 
.button-bevel {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding: 7px 20px 9px;
  margin: .5em .5em .5em 0;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  text-transform: capitalize;
  transition: 0.1s linear;
}
.button {
  border-radius: 2px;
  box-shadow: inset rgba(255,255,255,0.3) 1px 1px 0;
}
.button:hover, 
.button-bevel:hover {
	color: #fff;
	text-decoration: none;
}  
.button:active {
  box-shadow: inset rgba(0,0,0,0.4) 0px 0px 6px;
}
.rounded {
	border-radius: 20px;
}
.orange {
  background: rgb(255,183,0);
  background: -webkit-linear-gradient(to bottom,  rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
  background: linear-gradient(to bottom,  rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
  border: 1px solid #e59500;
}  
.orange:hover {
  background: rgb(255,203,72);
  background: -webkit-linear-gradient(to bottom,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
   background: linear-gradient(to bottom,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
  }  
.magenta {
  background: rgb(255,130,172);
  background: -webkit-linear-gradient(to bottom,  rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
  background: linear-gradient(to bottom,  rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
  border: 1px solid #c60a56;
}  
.magenta:hover {
  background: rgb(255,155,189);
  background: -webkit-linear-gradient(to bottom,  rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
  background: linear-gradient(to bottom,  rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
}
.cyan {
  background: rgb(130,207,241);
  background: -webkit-linear-gradient(to bottom,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
  background: linear-gradient(to bottom,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
  border: 1px solid #3cafcf;
}  
.cyan:hover {
  background: rgb(153,216,244);
  background: -webkit-linear-gradient(to bottom,  rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
  ackground: linear-gradient(to bottom,  rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
}  
.red {
  background: #e25b53;
  background: -webkit-linear-gradient(to bottom,  #e25b53 0%,#dd2011 100%);
  background: linear-gradient(to bottom,  #e25b53 0%,#dd2011 100%);
  border: 1px solid #c42222;
}
.red:hover {
  background: #dd7671;
  background: -webkit-linear-gradient(to bottom,  #dd7671 0%,#dd2011 100%);
  background: linear-gradient(to bottom,  #dd7671 0%,#dd2011 100%);
}
.black {
  background: #444444;
  background: -webkit-linear-gradient(to bottom,  #444444 0%,#1c1c1c 100%);
  background: linear-gradient(to bottom,  #444444 0%,#1c1c1c 100%);
  border: 1px solid #2a2a2a;
}
.black:hover {
  background: #686868;
  background: -webkit-linear-gradient(to bottom,  #686868 0%,#1c1c1c 100%);
  background: linear-gradient(to bottom,  #686868 0%,#1c1c1c 100%);
}
.green {
  background: #82cc5d;
  background: -webkit-linear-gradient(to bottom,  #82cc5d 0%,#53b73c 100%);
  background: linear-gradient(to bottom,  #82cc5d 0%,#53b73c 100%);
  border: 1px solid #429E34;
}
.green:hover {
  background: #99cc80;
  background: -webkit-linear-gradient(to bottom,  #99cc80 0%,#53b73c 100%);
  background: linear-gradient(to bottom,  #99cc80 0%,#53b73c 100%);
}
.button-bevel {
  vertical-align: top;
  border-radius: 4px;
  border: none;
  padding: 10px 25px 12px;
} 
.button-bevel:active {
  position: relative;
  top: 5px;
}  
.button-bevel.orange {
  box-shadow: #c46d00 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}
.button-bevel.orange:active {
  box-shadow: #c46d00 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
}  
.button-bevel.magenta {
  box-shadow: #ca075c 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}
.button-bevel.magenta:active {
  box-shadow: #ca075c 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
}  
.button-bevel.cyan {
  box-shadow: #1994d3 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}
.button-bevel.cyan:active {
  box-shadow: #1994d3 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
 }  
.button-bevel.red {
  box-shadow: #88180e 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}
.button-bevel.red:active {
  box-shadow: #88180e 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
}  
.button-bevel.black {
  box-shadow: #000 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;
}
.button-bevel.black:active {
  box-shadow: #000 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;  
}  
.button-bevel.green {
  box-shadow: #439230 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}
.button-bevel.green:active {
  box-shadow: #439230 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;  
}
.button span, 
.button-bevel span {
  font-family: 'EntypoRegular';
  font-size: 20px;
  font-weight: normal;
  vertical-align: middle; 
  line-height: 0;
  margin-right: .1em;
}
.refresh:after { content: "h"; font-size: 34px; }
.shuffle:after { content: "f"; font-size: 34px; }
.preview:after { content: "M"; font-size: 34px; }
.tea:after { content: "u"; font-size: 34px; }
.wifi:after { content: "T"; font-size: 34px; }
.locator:after { content: "0"; font-size: 34px; }
 .rss:after { content: "S"; font-size: 34px; }
.cloud:after { content: "y"; font-size: 34px; }
.download:after { content: "w"; font-size: 34px; }
.trash:after { content: "I"; font-size: 34px; }
.rack:after { content: "t"; font-size: 34px; }
.map:after { content: "1"; font-size: 34px; }
.setting:after { content: "@"; font-size: 34px; }
.identity:after { content: "."; font-size: 34px; }
.navigation:after { content: "2"; font-size: 34px; }
.gallery:after { content: "p"; font-size: 34px; }
.email:after { content: "%"; font-size: 34px; }
.users:after { content: "+"; font-size: 34px; }
.calendar:after { content: "P"; font-size: 34px; }
.link:after { content: ">"; font-size: 34px; }
.time:after { content: "N"; font-size: 34px; }
.folder:after { content: "s"; font-size: 34px; }
.tag:after { content: "C"; font-size: 34px; }
.share:after { content: "5"; font-size: 34px; }
.lock:after { content: "U"; font-size: 34px; }
.unlock:after { content: "V"; font-size: 34px; }
.mic:after { content: "O"; font-size: 34px; }
.love:after { content: "6"; font-size: 34px; }
.star:after { content: "7"; font-size: 34px; }
.like:after { content: "8"; font-size: 34px; }
.phone:after { content: "!"; font-size: 34px; }
.flag:after { content: "?"; font-size: 34px; }
.adduser:after { content: "-"; font-size: 34px; }
.attach:after { content: "'"; font-size: 34px; }
.comment:after { content: ":"; font-size: 34px; }
.edit:after { content: "&"; font-size: 34px; }
.upload:after { content: "v"; font-size: 34px; }
.storage:after { content: "x"; font-size: 34px; }
.photo:after { content: "D"; font-size: 34px; }
.help:after { content: "K"; font-size: 34px; }
.glass:after { content: "R"; font-size: 34px; }
.print:after { content: "<"; font-size: 34px; }
.gadget:after { content: '"'; font-size: 34px; }
	</style>
HTML代码
<div data-for="beveled">
<div>
<a href="javascript:void(0)" class="button-bevel orange"> <span class="refresh"></span> Refresh </a>
<a href="javascript:void(0)" class="button-bevel orange"> <span class="shuffle"></span> Shuffle </a>
<a href="javascript:void(0)" class="button-bevel orange"> <span class="preview"></span> Preview </a> 
<a href="javascript:void(0)" class="button-bevel orange"> <span class="tea"></span> Tea </a> 
<a href="javascript:void(0)" class="button-bevel orange"> <span class="wifi"></span> Wifi </a> 
<a href="javascript:void(0)" class="button-bevel orange"> <span class="locator"></span> Locator </a> 
</div>
<div>
<a href="javascript:void(0)" class="button-bevel magenta"> <span class="rss"></span> Rss </a> 
<a href="javascript:void(0)" class="button-bevel magenta"> <span class="cloud"></span> Cloud </a> 
<a href="javascript:void(0)" class="button-bevel magenta"> <span class="download"></span> Download </a> 
<a href="javascript:void(0)" class="button-bevel magenta"> <span class="trash"></span> Trash </a> 
<a href="javascript:void(0)" class="button-bevel magenta"> <span class="rack"></span> Rack </a> 
<a href="javascript:void(0)" class="button-bevel magenta"> <span class="map"></span> Map </a> 
</div>
<div>
<a href="javascript:void(0)" class="button-bevel cyan"> <span class="setting"></span> Setting </a> 
<a href="javascript:void(0)" class="button-bevel cyan"> <span class="identity"></span> Identity </a> 
<a href="javascript:void(0)" class="button-bevel cyan"> <span class="navigation"></span> Navigation </a> 
<a href="javascript:void(0)" class="button-bevel cyan"> <span class="gallery"></span> Gallery </a> 
<a href="javascript:void(0)" class="button-bevel cyan"> <span class="email"></span> Email </a> 
<a href="javascript:void(0)" class="button-bevel cyan"> <span class="users"></span> Users </a> 
</div>
<div>
<a href="javascript:void(0)" class="button-bevel red"> <span class="calendar"></span> Calendar </a> 
<a href="javascript:void(0)" class="button-bevel red"> <span class="link"></span> Link </a> 
<a href="javascript:void(0)" class="button-bevel red"> <span class="time"></span> Time </a> 
<a href="javascript:void(0)" class="button-bevel red"> <span class="folder"></span> Folder </a> 
<a href="javascript:void(0)" class="button-bevel red"> <span class="tag"></span> Tag </a> 
<a href="javascript:void(0)" class="button-bevel red"> <span class="share"></span> Share </a> 
</div>
<div>
<a href="javascript:void(0)" class="button-bevel black"> <span class="edit"></span> Edit </a> 
<a href="javascript:void(0)" class="button-bevel black"> <span class="upload"></span> Upload </a> 
<a href="javascript:void(0)" class="button-bevel black"> <span class="storage"></span> storage </a> 
<a href="javascript:void(0)" class="button-bevel black"> <span class="photo"></span> photo </a> 
<a href="javascript:void(0)" class="button-bevel black"> <span class="help"></span> help </a>  
<a href="javascript:void(0)" class="button-bevel black"> <span class="comment"></span> comment </a> 
</div>
<div>
<a href="javascript:void(0)" class="button-bevel green"> <span class="like"></span> like </a> 
<a href="javascript:void(0)" class="button-bevel green"> <span class="phone"></span> phone </a> 
<a href="javascript:void(0)" class="button-bevel green"> <span class="flag"></span> flag </a> 
<a href="javascript:void(0)" class="button-bevel green"> <span class="adduser"></span> adduser </a> 
<a href="javascript:void(0)" class="button-bevel green"> <span class="attach"></span> attach </a> 
<a href="javascript:void(0)" class="button-bevel green"> <span class="glass"></span> glass </a> 
</div>
</div>


<div data-for="rectangle">
<div>
<a href="javascript:void(0)" class="button orange"> <span class="refresh"></span> refresh </a>
<a href="javascript:void(0)" class="button orange"> <span class="shuffle"></span> shuffle </a>
<a href="javascript:void(0)" class="button orange"> <span class="preview"></span> preview </a> 
<a href="javascript:void(0)" class="button orange"> <span class="tea"></span> tea </a> 
<a href="javascript:void(0)" class="button orange"> <span class="wifi"></span> wifi </a> 
<a href="javascript:void(0)" class="button orange"> <span class="locator"></span> locator </a> 
</div>
<div>
<a href="javascript:void(0)" class="button magenta"> <span class="rss"></span> rss </a> 
<a href="javascript:void(0)" class="button magenta"> <span class="cloud"></span> cloud </a> 
<a href="javascript:void(0)" class="button magenta"> <span class="download"></span> download </a> 
<a href="javascript:void(0)" class="button magenta"> <span class="trash"></span> trash </a> 
<a href="javascript:void(0)" class="button magenta"> <span class="rack"></span> rack </a>  
<a href="javascript:void(0)" class="button magenta"> <span class="map"></span> map </a> 
</div>
<div>
<a href="javascript:void(0)" class="button cyan"> <span class="setting"></span> setting </a> 
<a href="javascript:void(0)" class="button cyan"> <span class="identity"></span> identity </a> 
<a href="javascript:void(0)" class="button cyan"> <span class="navigation"></span> navigation </a> 
<a href="javascript:void(0)" class="button cyan"> <span class="gallery"></span> gallery </a> 
<a href="javascript:void(0)" class="button cyan"> <span class="email"></span> email </a> 
<a href="javascript:void(0)" class="button cyan"> <span class="users"></span> users </a> 
</div>
<div>
<a href="javascript:void(0)" class="button red"> <span class="calendar"></span> calendar </a> 
<a href="javascript:void(0)" class="button red"> <span class="link"></span> link </a> 
<a href="javascript:void(0)" class="button red"> <span class="time"></span> time </a> 
<a href="javascript:void(0)" class="button red"> <span class="folder"></span> folder </a> 
<a href="javascript:void(0)" class="button red"> <span class="tag"></span> tag </a> 
<a href="javascript:void(0)" class="button red"> <span class="share"></span> share </a> 
</div>
<div>
<a href="javascript:void(0)" class="button black"> <span class="lock"></span> lock </a> 
<a href="javascript:void(0)" class="button black"> <span class="unlock"></span> unlock </a> 
<a href="javascript:void(0)" class="button black"> <span class="mic"></span> mic </a> 
<a href="javascript:void(0)" class="button black"> <span class="love"></span> love </a> 
<a href="javascript:void(0)" class="button black"> <span class="star"></span> star </a> 
<a href="javascript:void(0)" class="button black"> <span class="comment"></span> comment </a> 
</div>
<div>
<a href="javascript:void(0)" class="button green"> <span class="like"></span> like </a> 
<a href="javascript:void(0)" class="button green"> <span class="phone"></span> phone </a> 
<a href="javascript:void(0)" class="button green"> <span class="flag"></span> flag </a> 
<a href="javascript:void(0)" class="button green"> <span class="adduser"></span> adduser </a> 
<a href="javascript:void(0)" class="button green"> <span class="attach"></span> attach </a> 
<a href="javascript:void(0)" class="button green"> <span class="glass"></span> glass </a> 
</div>
</div>

<div data-for="rounded">
<div>
<a href="javascript:void(0)" class="button rounded orange"> <span class="edit"></span> edit </a>
<a href="javascript:void(0)" class="button rounded orange"> <span class="upload"></span> upload </a>
<a href="javascript:void(0)" class="button rounded orange"> <span class="storage"></span> storage </a> 
<a href="javascript:void(0)" class="button rounded orange"> <span class="photo"></span> photo </a> 
<a href="javascript:void(0)" class="button rounded orange"> <span class="help"></span> help </a>  
<a href="javascript:void(0)" class="button rounded orange"> <span class="locator"></span> locator </a> 
</div>
<div>
<a href="javascript:void(0)" class="button rounded magenta"> <span class="print"></span> print </a> 
<a href="javascript:void(0)" class="button rounded magenta"> <span class="gadget"></span> gadget </a> 
<a href="javascript:void(0)" class="button rounded magenta"> <span class="download"></span> download </a> 
<a href="javascript:void(0)" class="button rounded magenta"> <span class="trash"></span> trash </a> 
<a href="javascript:void(0)" class="button rounded magenta"> <span class="rack"></span> rack </a> 
<a href="javascript:void(0)" class="button rounded magenta"> <span class="map"></span> map </a> 
</div>
<div>
<a href="javascript:void(0)" class="button rounded cyan"> <span class="setting"></span> setting </a> 
<a href="javascript:void(0)" class="button rounded cyan"> <span class="identity"></span> identity </a> 
<a href="javascript:void(0)" class="button rounded cyan"> <span class="navigation"></span> navigation </a> 
<a href="javascript:void(0)" class="button rounded cyan"> <span class="gallery"></span> gallery </a> 
<a href="javascript:void(0)" class="button rounded cyan"> <span class="email"></span> email </a> 
<a href="javascript:void(0)" class="button rounded cyan"> <span class="users"></span> users </a> 
</div>
<div>
<a href="javascript:void(0)" class="button rounded red"> <span class="calendar"></span> calendar </a> 
<a href="javascript:void(0)" class="button rounded red"> <span class="link"></span> link </a> 
<a href="javascript:void(0)" class="button rounded red"> <span class="time"></span> time </a> 
<a href="javascript:void(0)" class="button rounded red"> <span class="folder"></span> folder </a> 
<a href="javascript:void(0)" class="button rounded red"> <span class="tag"></span> tag </a>  
<a href="javascript:void(0)" class="button rounded red"> <span class="share"></span> share </a> 
</div>
<div>
<a href="javascript:void(0)" class="button rounded black"> <span class="lock"></span> lock </a> 
<a href="javascript:void(0)" class="button rounded black"> <span class="unlock"></span> unlock </a> 
<a href="javascript:void(0)" class="button rounded black"> <span class="mic"></span> mic </a> 
<a href="javascript:void(0)" class="button rounded black"> <span class="love"></span> love </a> 
<a href="javascript:void(0)" class="button rounded black"> <span class="star"></span> star </a> 
<a href="javascript:void(0)" class="button rounded black"> <span class="comment"></span> comment </a> 
</div>
<div>
<a href="javascript:void(0)" class="button rounded green"> <span class="like"></span> like </a> 
<a href="javascript:void(0)" class="button rounded green"> <span class="phone"></span> phone </a> 
<a href="javascript:void(0)" class="button rounded green"> <span class="flag"></span> flag </a> 
<a href="javascript:void(0)" class="button rounded green"> <span class="adduser"></span> adduser </a> 
<a href="javascript:void(0)" class="button rounded green"> <span class="attach"></span> attach </a> 
<a href="javascript:void(0)" class="button rounded green"> <span class="glass"></span> glass </a> 
</div>
</div>
Posted in CSS最新技术 | CSS3 渐变特效制作的按钮已关闭评论