CSSで様々なアクセサリをつける装飾CSS＋ｊQuery

なにやらクールなイメージ装飾スクリプト。
ちょっと興味があるので勉強がてらご紹介。

どのように表示するのか

以下のような感じで、Divとclassによって何の装飾もない画像に、ワンポイントのアクセサリーをつけるというもの。



サンプルデモが以下。
CSS Decorative Gallery
クリップや、映像マーク、セロハンテープ、光沢など、様々な装飾が可能。

セロハンテープ

テープで写真を貼り付けたように見せてくれる装飾。
サンプルデモ

ビデオマーク

Diggなんかでよく見かけるような小さなアイコンを画像に付加できます。
サンプルデモ

ポインタを合わせると吹き出しが出る

ポインタを合わせると吹き出しが画像から出てきます。
サンプルデモ

付箋付きクリップ

付箋とクリップの装飾。
サンプルデモ

光沢の演出

透Png画像を使って写真に色々な演出も。
サンプルデモ


IE7のPng透過問題も解決するものが同梱されています。
様々なブラウザに対応しているようで、実用性も高いかも。

以下のようにバックグラウンドからハックできるようなので、ギャラリーサイトも作り易くなってますね。



細かいところはダウンロードして確認するか、以下配布サイト様で確認してください（英語）
CSS Decorative Gallery

それでは、また。