[CSS]画像の一部にフレームをオーバーレイさせて目立たせる方法

画像にフレームを配置し、美しいビジュアルの注釈を作るスタイルシートのチュートリアルをZURBから紹介します。

実装のイメージ

Building the New Visual Annotations

sampleのページでは、実際にどのようになるか確認することができます。

サイトのキャプチャ

sample

使用しているテクニックはCSS3で、下記のようなフレームを画像内の特定の箇所にオーバーレイさせ、注釈を表示しています。

フレームのキャプチャ

左の画像を使用して、下記のスタイルシートで指定します。

CSS

border-imageを単に境界線のためだけに使用するのではなく、オーバーレイさせてユーザーの視線を集めるビジュアル要素にしています。

via:How to Build the New Visual Annotations with CSS3

sponsors

top of page

©2018 coliss