手軽に作れるドッグイヤーのバリエーション
ドッグイヤーデザインの基本は以上のとおりだが、応用編として2つ目のボックスを少しアレンジしてみよう。要素の角を丸くするborder-radius プロパティを使ってボックスの角と耳を丸くし、背景色を別の色に変更する。
下のボックスと耳にはわずかに角丸が適用されている。CSSの/* ROUND */ 以降が角丸にしたドッグイヤーのスタイルだ。border-radiusの使い方は本連載の第2回で詳しく解説しているので参考にしてほしい。
■サンプル3[HTML]
<p class="fold">CSS3を利用すれば、様々なことが表現できます。基本に忠実にシンプルに簡素にマークアップをおこないましょう。また CSS2.1も正しく利用できるようにしましょう。</p> <p class="fold rounded red">CSS3を利用すれば、様々なことが表現できます。基本に忠実にシンプルに簡素にマークアップをおこないましょう。また CSS2.1も正しく利用できるようにしましょう。</p>
■サンプル3[CSS]
.fold:before { content : ""; position : absolute; top : 0; right : 0; border-width : 0 16px 16px 0; border-style : solid; border-color : #fff #fff #658E15 #658E15; background : #658E15; -webkit-box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2); -moz-box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2); box-shadow : 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2); } .fold.red { background : #999868; } .fold.red:before { border-color : #fff #fff #676637 #676637; background : #676637; } /* ROUND */ .fold.rounded { -webkit-border-radius : 4px; -moz-border-radius : 4px; border-radius : 4px; } .fold.rounded:before { border-width : 8px; border-color : #fff #fff transparent transparent; -webkit-border-bottom-left-radius : 5px; -moz-border-radius : 0 0 0 5px; border-radius : 0 0 0 5px; } .fold p { margin : 0; } .fold p + p { margin : 24px 0 0; }
◆
今回作成したドッグイヤーデザインは、余計なマークアップを増やさずにさまざまな場面ですぐに使えるテクニックだ。便利な:before/:after 擬似要素をぜひマスターして、Webデザインの表現の幅を広げてほしい。
今回のお手本
|
---|
今回のお手本。画像を一切使用せずにCSS3だけでデザインできる(Mac OS X 10.6/Safari 5.0で表示) |
-->