画像を使わずCSS3だけで尖ったBack・Nextボタンを作る方法

On 2011年5月14日, in Android, CSS3, iPhone, Web制作, スマートフォンサイト制作, by kosuke

この記事のURLをスマートフォンに送る

Check

画像を使わずにCSS3だけで尖ったボタン

CSS3だけで、iOS風のBackやNextの尖ったナビゲーションボタン作る方法ないかな〜と探していたところ、良記事があったので紹介します。~~Androidで確認してませんが、webkit向けなのでたぶんAndroidでも大丈夫だと思います。~~Androidはひと工夫必要そうです。

CSS3 Wizardry -Back and Next Buttons Revisited-
CSS3 Wizardry -Subpixel Rendering-

Buttons Revisitedの方が改良版で疑似要素バージョンみたいです。原理はSubpixel Renderingの方がわかりやすいです。

ポイントとなるHTML

ボタンを構成する要素はこれだけ。

<!--ボタン要素-->
<div class="button bordered back"> 
         <span class="label">Back</span> 
</div> 
<!--//ボタン要素-->

ポイントとなるCSS

その疑似要素をtransformで45度回転、mask-imageでつなぎ目を滑らかにしてるみたいですね。
なるほど…その発想はなかったです。発想って大事だなーと再認識しました（笑）

.button.bordered.back:before {
　…略…
-webkit-transform: rotate(45deg);
		-webkit-mask-image: 
			-webkit-gradient(linear, left bottom, right top, 
				from(#000000), 
				color-stop(0.5,#000000), 
				color-stop(0.5, transparent), 
				to(transparent));
position: absolute;
left: -9px;
top: 2.5px;
-webkit-background-clip: content;
}

スマートフォンサイトはWiFi接続時はそうでもないのですが、3G回線の時は通信速度が落ちるので画像を用いずCSS3でUIを作るというのは、とても有効な手段です。

応用すれば、いろんなデザインができそうですね。

デモ

ご興味のある方は導入されてみてはいかがでしょうか。
・デモ
・サンプルソースのダウンロード

【2011.5.14 追記】Androidで確認したところ、形的に尖るのですが、マスクがたぶん効かない状態になってしまうようです。Androidはひと工夫が必要ですね。
【2011.5.15 追記】ちなみに対象となるブラウザはwebkit系ブラウザです。（Safari、Chrome、Mobile Safari）※Androidは工夫が必要と思われる。