画像を使わずにCSS3だけで尖ったボタン
CSS3 Wizardry -Back and Next Buttons Revisited-
CSS3 Wizardry -Subpixel Rendering-
Buttons Revisitedの方が改良版で疑似要素バージョンみたいです。原理はSubpixel Renderingの方がわかりやすいです。
ポイントとなるHTML
ボタンを構成する要素はこれだけ。
[html]
<!–ボタン要素–>
<div class="button bordered back">
<span class="label">Back</span>
</div>
<!–//ボタン要素–>
[/html]
ポイントとなるCSS
その疑似要素をtransformで45度回転、mask-imageでつなぎ目を滑らかにしてるみたいですね。
なるほど…その発想はなかったです。発想って大事だなーと再認識しました（笑）
[css]
.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;
}
[/css]
スマートフォンサイトはWiFi接続時はそうでもないのですが、3G回線の時は通信速度が落ちるので画像を用いずCSS3でUIを作るというのは、とても有効な手段です。
応用すれば、いろんなデザインができそうですね。
デモ
・デモ
・サンプルソースのダウンロード
【2011.5.14 追記】Androidで確認したところ、形的に尖るのですが、マスクがたぶん効かない状態になってしまうようです。Androidはひと工夫が必要ですね。
【2011.5.15 追記】ちなみに対象となるブラウザはwebkit系ブラウザです。（Safari、Chrome、Mobile Safari）※Androidは工夫が必要と思われる。
他の人気エントリ
