buena suerte!


iPhone Buttons を画像を使わずに CSS で再現してみる。

Safari の開発者向けサイトのサンプルコードにある iPhone の UI によくあるボタンっぽいボタン iPhoneButtons を画像を使わずにというか、 CSS3 の -webkit-border-image を使わずに再現してみる試み。

動作確認

Chrome(7.0.517.41) で確認。

同じ webkit の Safari でも表示されますが、微妙な動作の違いでボタンの上にボーターを 1px 入れないと光沢感が足りない。 -webkit-gradient の調整とか -webkit-box-shadow + inset でうまくいくかもしれない。 iPhone 向けに使うボタンのはずなのに Safari では調整しないと使えないとかあれです。

デモサイト/Demo Site

左側が -webkit-border-image 有り、右側が無しになってます。

比較画像を追加してみた。 (20:27)
比較画像

HTML

a タグと囲むのに span 使ってるけど他のに変更しても問題ないはず。

<span class="white"><a href="#">iPhone</a></span>
<span class="blackright"><a href="#">iPod classic</a></span>
<span class="blue"><a href="#">iPod nano</a></span>
<span class="blackleft"><a href="#">iPod shuffle</a></span>
<span class="black"><a href="#">iPod touch</a></span>

CSS

Mayer's CSS Reset でリセットしてます。普通のボタンはともかく、矢印は擬似要素使って無理矢理な感じに。

span.white,
span.blue,
span.black {
	text-align: center;
	margin: 15px auto;
	width: 178px;
	overflow: auto;
	display: block;
	background: rgba(0,0,255,0.3);
	-webkit-border-radius: 11px;
	background: -webkit-gradient(linear,left top, left bottom,
			from(#555),
			color-stop(0.02,#888),
			color-stop(0.15,#999),
			color-stop(0.70,#bbb),
			to(#bbb));
}
span.white a,
span.blue a,
span.black a {
	margin: 3px 3px 4px;
	display: block;
	line-height: 39px;
	font-size: 20px;
	font-weight: bold;
	font-family: helvetica, sans-serif;
	text-decoration: none;
	text-align: center;
	-webkit-border-radius: 9px;
}
span.white a {
	color: #000;
	text-shadow: #fff 0px 1px 1px;
	-webkit-border-radius: 9px;
	background: -webkit-gradient(linear,left top, left bottom,
			from(#fff),
			color-stop(0.01,#eaeaea),
			color-stop(0.05,#e3e3e3),
			color-stop(0.10,#dfdfdf),
			color-stop(0.49,#cdcdcd),
			color-stop(0.50,#bcbcbc),
			to(#bfbfbf));
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
span.blue a {
	color: #fff;
	text-shadow: #000 0px 1px 1px;
	-webkit-border-radius: 9px;
	background: -webkit-gradient(linear,left top, left bottom,
			from(#b7bfe0),
			color-stop(0.01,#94a0d1),
			color-stop(0.05,#8290c9),
			color-stop(0.30,#6374bb),
			color-stop(0.40,#5f71ba),
			color-stop(0.49,#5667b6),
			color-stop(0.50,#4559af),
			to(#5079b9));
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
span.black a {
	color: #fff;
	text-shadow: #000 0px 1px 1px;
	-webkit-border-radius: 9px;
	background: -webkit-gradient(linear,left top, left bottom,
			from(#777),
			color-stop(0.01,#666),
			color-stop(0.20,#555),
			color-stop(0.49,#444),
			color-stop(0.50,#333),
			to(#444));
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
span.hover a:hover {
	color: #fff;
	text-shadow: #000 0px 1px 1px;
	-webkit-border-radius: 9px;
	background: -webkit-gradient(linear,left top, left bottom,
			from(#b7bfe0),
			color-stop(0.01,#94a0d1),
			color-stop(0.05,#8290c9),
			color-stop(0.30,#6374bb),
			color-stop(0.40,#5f71ba),
			color-stop(0.49,#5667b6),
			color-stop(0.50,#4559af),
			to(#5079b9));
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

span.blackright {padding: 5px 10px 5px 0;}
span.blackleft {padding: 5px 0 5px 10px;}
span.blackright,
span.blackleft {
	display: block;
	margin: 15px auto;
	width: 160px;
	overflow: auto;
}

span.blackleft a,
span.blackright a {
	display: block;
	width: auto;
	line-height: 46px; 
	font-size: 20px;
	font-weight: bold;
	font-family: helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	text-align: center;
	-webkit-border-radius: 6px;
	border-right: 1px solid rgba(0,0,0,0.5);
	text-shadow: #000 0px 1px 1px;
	background: -webkit-gradient(linear,left top, left bottom,
			from(#333),
			color-stop(0.01,#444),
			color-stop(0.05,#888),
			color-stop(0.10,#999),
			color-stop(0.15,#999),
			color-stop(0.35,#666),
			color-stop(0.45,#555),
			color-stop(0.49,#444),
			color-stop(0.5,#222),
			to(#222));
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
span.blackright a {text-indent: 20px;}
span.blackleft a {text-indent: -20px;}

span.blackleft a::after {
	position: relative;
	margin-top: -23px;
	margin-left: -5px;
	margin-right: auto;
	display: block;
	height: 23px; 
	width: 20px;
	content: ' ';
	-webkit-transform: skew(25deg);
	background: -webkit-gradient(linear,left top, left bottom,
			from(#222),
			to(#222));
	border-left: 1px solid rgba(0,0,0,0.5);
}
span.blackleft a::before {
	float: left;
	margin-left: -5px;
	display: block;
	height: 23px; 
	width: 20px;
	content: ' ';
	-webkit-transform: skew(-25deg);
	background: -webkit-gradient(linear,left top, left bottom,
			from(#555),
			color-stop(0.02,#444),
			color-stop(0.10,#888),
			color-stop(0.20,#999),
			color-stop(0.30,#999),
			color-stop(0.70,#666),
			color-stop(0.90,#555),
			to(#444));
	border-left: 1px solid rgba(0,0,0,0.5);
}
span.blackright a::after {
	position: relative;
	margin-top: -23px;
	margin-right: -5px;
	margin-left: auto;
	display: block;
	height: 23px; 
	width: 20px;
	content: ' ';
	-webkit-transform: skew(-25deg);
	background: -webkit-gradient(linear,left top, left bottom, from(#222), to(#222));
	border-right: 1px solid rgba(0,0,0,0.5);
}
span.blackright a::before {
	float: right;
	margin-right: -5px;
	display:block;
	height: 23px; 
	width: 20px;
	content: ' ';
	-webkit-transform: skew(25deg);
	background: -webkit-gradient(linear,left top, left bottom,
			from(#555),
			color-stop(0.02,#444),
			color-stop(0.10,#888),
			color-stop(0.20,#999),
			color-stop(0.30,#999),
			color-stop(0.70,#666),
			color-stop(0.90,#555),
			to(#444));
	border-right: 1px solid rgba(0,0,0,0.5);
}

結果的には余計なタグが増え CSS も複雑になるだけで、普通に画像使ったほうがはやい気がした。 CSS3 の擬似要素の ::outside とか、 ::before(x) 、 ::after(x) なんかが使えるようになると、もうちっと簡単になるかなあ。

ってか、もたもた文章書いてる間に、同じ様でさらにクオリティの高いやつがカヤックさんにあがってた。久しぶりに書いたのにあんま意味なしw
1要素1クラス、画像を一切使わずCSSで実装するiPhone UI

CSS3 Buttons

なんかくやしいから CSS3 を使ったボタンに関するリンクを集めておいた。

ジェネレータとか
CSS3 Button Generator - http://css3button.net/
CSS3 Button Generator - http://css3buttongenerator.com/
CSS3 Button Maker | CSS-Tricks
CSS3 Gradient Generator
DryIcons.com | Blog Archive | A CSS3 Gradient Button Generator
CSS Corners, CSS3 Gradient
border-image-generator
サンプルとかチュートリアルとか
CSS3 buttons / ubuwaits.github.com/css3-buttons
CSS3 Gradient Buttons
12 Excellent CSS3 Button and Menu Techniques | Tutorials
20 CSS3 Tutorials and Techiques for Creating Buttons :Speckyboy Design Magazine
CSS3だけでつくるWebボタン!押さずにはいられないボタン簡単3ステップ
CSS3 Animated Bubble Buttons | Tutorialzine
Creating a Realistic Looking Button with CSS3
building beautiful buttons with css gradients
CSS3だけで丸いボタンを作る方法 - CSS3で遊んでみる | CSS-EBLOG
Top 10 CSS3 buttons tutorials - CatsWhoCode.com

以上です。

関連記事リンク



no Comment...

現在コメントを受け付けていません。

no Trackback...

現在トラックバックを受け付けていません。