イメージ画像をCSSで装飾するサンプル | ユージック

イメージ画像をCSSで装飾するサンプル 2008年5月30日 イメージの上にCSSでPNG画像を被せて装飾するサンプルの紹介サイトをご紹介します。これCMSを使っている場合、かなり便利ですよ。 CSS Decorative Gallery 上記のような感じにセロハンや押しピンや切手風など様々なバリエーションがあります。サンプルを利用するのもありですが、やり方を覚えてオリジナルを作るのもいいですね。 マークアップとCSSはこういう感じに空のスパンをイメージタグの上に配置します。被せる画像にはPNG形式の画像を使用するのでIE６でのPNG対策としてiepngfix.htcを利用すると便利です。CSSでiepngfix.htcまでのルートを下記のように指定します。 <!--[if lt IE 7]> <style type="text/css"> .photo span { behavior:

[yntn247]

押しピン、テープ、枠 etc.

[amanotomoki]

わかりやすい

[suksuk]

画像をさらにCSSで装飾。こういう使い方もありですね。

[kurobuchi]

これはシンプルで簡単に実装できそうなテクニック。今度使ってみよう。

[evian226jp]

cssを利用した画像の装飾。CMS上のギャラリーなどで有効活用できそう。