前端大本营

HTML5,CSS3,Responsive,资料站

使用过苹果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 利用渐变属性制作纹理图案已关闭评论
2017 06/21 周三

Atom 各种插件

Atom是一款最近非常流行的编辑软件,除了免费,他还有很多的插件为用户提供更好的服务。
这里介绍几款大家都用的到的插件

在设置 → 安装扩展 输入框中输入以下关键字,就可以找到相应的插件
1. tag 作者: uzyn 此时版本0.5.0 功能: 自动添加关闭tag, 如输入<div>, 当输入</会自动关闭div
2. Activate Power Mode 作者: JoelBesada 此时版本2.0.0 功能:打字特效
Posted in 精彩内容 | Atom 各种插件已关闭评论

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

示例
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 渐变特效制作的按钮已关闭评论
我们在Div元素中,制作一个花边背景效果 看示例
使用了五张背景图片。制作这样的效果
CSS代码
.demo { 
			width: 240px; 
			border: 20px solid rgba(104, 104, 142,0.5); 
			border-radius: 10px;
			padding: 80px 60px; 
			color: #f36; 
			font-size: 25px; 
			line-height: 1.5; 
			text-align:center; 
		}
			.multipleBg {
	    background: url("bg-tl.png") no-repeat left top,url("bg-tr.png") no-repeat right top,url("bg-bl.png") no-repeat left bottom,url("bg-br.png") no-repeat right bottom,url("bg-repeat.png") repeat left top;
	   /*改变背景图片的position起始点,四朵花都是border边缘处起,而平铺背景是在paddin内边缘起*/
	   -webkit-background-origin: border-box, border-box,border-box,border-box,padding-box;
	   -moz-background-origin: border-box, border-box,border-box,border-box,padding-box;
	   -o-background-origin: border-box, border-box,border-box,border-box,padding-box;
	   background-origin: border-box, border-box,border-box,border-box,padding-box;
	   /*控制背景图片的显示区域,所有背景图片超边border外边缘都将被剪切掉*/
	   -moz-background-clip: border-box;
	   -webkit-background-clip: border-box;
	   -o-background-clip: border-box;
	   background-clip: border-box;			
	 }

HTML代码
<div class="demo multipleBg">我使用了五张背景图片。制作这样的效果</div>
这样我们就利用CSS3的新功能,轻松的实现了上面的效果。
Posted in CSS最新技术 | 利用CSS3 制作花边背景已关闭评论
首先我们看效果

HTML

<form id="formWrapper">
      <div class="formFiled clearfix">
    	  <input type="text" required="" placeholder="Search for CSS3, HTML5, jQuery ..." class="search">
     	  <input type="submit" class="btn submit" value="go">
     	</div>
   </form>

CSS

 #formWrapper {
      width: 450px;
      padding: 8px;
      margin: 20px;
      overflow: hidden;
      border-width: 1px;
      border-style: solid;
      border-color: #dedede #bababa #aaa #bababa;
      box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
      border-radius: 10px;
      background-color: #f6f6f6;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
      background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
      background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
      background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
      background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
      background-image: linear-gradient(top, #f6f6f6, #eae8e8);
      }
      #formWrapper .search {
      width: 330px;
      height: 20px;
      padding: 10px 5px;
      float: left;
      font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
      border: 1px solid #ccc;
      box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
      border-radius: 3px;
      }
      #formWrapper .search:focus {
      outline: 0;
      border-color: #aaa;
      box-shadow: 0 1px 1px #bbb inset;
      }
      #formWrapper .search::-webkit-input-placeholder,
      #formWrapper .search:-moz-placeholder,
      #formWrapper .search:-ms-input-placeholder {
        color: #999;
        font-weight: normal;
      }

      #formWrapper .btn {
      float: right;
      border: 1px solid #00748f;
      height: 42px;
      width: 100px;
      padding: 0;
      cursor: pointer;
      font: bold 15px Arial, Helvetica;
      color: #fafafa;
      text-transform: uppercase;
      background-color: #0483a0;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
      background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
      background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
      background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
      background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
      background-image: linear-gradient(top, #31b2c3, #0483a0);
      border-radius: 3px;
      text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
      }
        #formWrapper .btn:hover,
        #formWrapper .btn:focus {
      background-color: #31b2c3;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
      background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
      background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
      background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
      background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
      background-image: linear-gradient(top, #0483a0, #31b2c3);
      }
        #formWrapper .btn:active {
      outline: 0;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
      }
       #formWrapper::-moz-focus-inner {
      border: 0;
      }

简单说明

Posted in CSS最新技术 | 利用CSS3 制作的搜索框 转自《图解CSS3核心技术与案例》已关闭评论
CSS3及HTML5 已经逐渐的被广泛使用 各种新的功能及样式,被各种浏览器所支持, 今天我们谈一谈, object-position 及 object-fit属性的使用方法。 object-fit语法 object-fit:fill | contain | cover | none | scale-down object-fit说明
object-fit主要适合于替换元素,比如:<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默认值为fill。object-fill取值的说明如下:
  1. fill:此值为boject-fit的默认值,替换内容的大小被设置为填充元素的内容框,也就是说,元素的内容扩大到完全填充容器的外形尺寸,即使这打破其内在的宽高比。
  2. contain:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为一个包含元素的宽度和高度。也就是说,如果你在替换元素上设置一个明确的高度和宽度,此值将导致内容大小,完全在固定的比例显示,但仍在元素尺寸内显示。
  3. cover:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说,替换元素内容大小保持长宽比,但改变宽度和高度,以便完全覆盖内容元素。
  4. none:替换元素内容不调整大小以适应内部元素的容器,内容完全忽略设置在元素上的任何高度和权重,并且仍在元素尺寸内显示。
  5. scale-down:当内容大小设置了non或contain,将导致具体对象变得更小。
作者亲身体验: object-fit感觉和 background-size的功能很像, 尤其是cover值。 你完全可以用object-fit来替换 background-size object-position语法 object-position: left | top | bottom | right | object-position说明 object-position主要适用于控制替换内容的位置。 作者亲身体验: object-position, 可以当作background-position来使用。例如如下例子 object-position: right 20px bottom 20px; 替换元素相对于右下角20px 20px地方定位 虽然现在很多浏览器都已经支持了这两个属性,不过IE(Edge )各版本对这两个属性还不能很好的支持。 在使用时需要对IE特别开发。
Posted in CSS最新技术 | CSS3 理解object-position/object-fit属性已关闭评论