Nolan's Blog

a PHP JS UI APP developer

css3

Make A Back Button (iphone ios6 style) With CSS3

Bildschirmfoto-2011-12-05-um-11.29.44

Always we need to make insert this button in our site. (be less in today)
so how can build it only with css3 ? Come with me

1. build html


<a class="back" href="#"><b>Back</b></a>

2. design a simple button style


.back {
	color: #FFF;
	text-decoration: none;
	position: relative;
	display: block;
	float:left;
	margin-top:-8px;
	margin-left:5px;
}
.back b{
	display: inline-block;
	font: bold 13px/26px Tahoma;
	height: 27px;
	padding: 0 10px 0 10px;
	background: -webkit-linear-gradient(top, #FFAF44, #F28000);
	background: -moz-linear-gradient(top, #FFAF44, #F28000);
	border: 1px solid #CB741D;
	border-radius: 5px;
	text-shadow: 0 -1px 0px rgba(0, 0, 0, .4);
	box-shadow:inset rgba(255,255,255,.2) -1px 1px 1px;
}

QQ截图20140520104830

3.bulid a arrow with :before


.back:before{
	content: '';
	display: inline-block;
	width: 20px; /* 20 * √2 = 28 */
	height: 20px;
	-webkit-transform-origin: 0 0; /* set ratation point */
	-moz-transform-origin: 0 0;
	-webkit-transform: scaleX(0.8) rotate(45deg);  /* rotation 45 deg */
	-moz-transform: scaleX(0.8) rotate(45deg);
	background: -moz-linear-gradient(-45deg, #FFAF44, #F28000);
	background: -webkit-linear-gradient(-45deg, #FFAF44, #F28000);
	border: 1px solid #CB741D;
	border-radius: 3px 5px;
	position: absolute;
	left: 0px;
	top: -1px;
}

QQ截图20140520105620

4. adjustment


.back b {
	border-radius: 3px 5px 5px 3px;
	border-left: 0;
	position: relative;
	z-index: 2;
}
.back:before{
	z-index: 1;
	left: 2px;
}

20140520110345

da da da ~~~~..

继续阅读》

,

HTML 5 little cookbook

Tag

Voice input :


<input type=”text” x-webkit-speech />

Get picture form Camera :


<input type=”file” accept = “image/*; capture=camera” />
<input type=”file” accept = “video/*; capture=camcorder” />
<input type=”file” accept = “audio/*; capture=microphone” />

Send sms to people :


<a href="sms:18005555555?body=Text%20goes%20here">Send SMS</a> 

Tel somebody :


<a href="tel:18005555555">Call us at 1-800-555-5555</a>

继续阅读》

, , ,

Powered by WordPress.org.