[CSS]画像の一部にフレームをオーバーレイさせて目立たせる方法
Post on:2010年1月15日
sponsors
画像にフレームを配置し、美しいビジュアルの注釈を作るスタイルシートのチュートリアルをZURBから紹介します。
Building the New Visual Annotations
sampleのページでは、実際にどのようになるか確認することができます。
使用しているテクニックはCSS3で、下記のようなフレームを画像内の特定の箇所にオーバーレイさせ、注釈を表示しています。
左の画像を使用して、下記のスタイルシートで指定します。
CSS
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> div.border { border: 5px solid #feb515; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-border-image: url(border-image.png) 5 5 5 5 stretch; -webkit-border-image: url(border-image.png) 5 5 5 5 stretch; } </textarea> |
border-imageを単に境界線のためだけに使用するのではなく、オーバーレイさせてユーザーの視線を集めるビジュアル要素にしています。
sponsors
