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

サイト構築 -CSS

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

Building the New Visual Annotations

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

sample

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

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

CSS

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;
}

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

via:How to Build the New Visual Annotations with CSS3

Post on:2010年1月15日

top of page

Trackback

leave your Comments

Comments

links for 2010-01-15 « 個人的な雑記

on 2010年1月16日

[...] [CSS]画像の一部にフレームをオーバーレイさせて目立たせる方法 | コリス (tags: css) [...]

top of page

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

CSS

Related Posts

Trackback

leave your Comments

Comments

Subscription

Sponsors

Recnet Entry

Pickup Entry

Archive by month

Category

Blog Info