ホームページを作る人のネタ帳

CSSで様々なアクセサリをつける装飾CSS+jQuery

CSS装飾ギャラリー

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

どのように表示するのか


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


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

セロハンテープ


CSSサンプル

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


ビデオマーク


ビデオマーク

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


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


コメント吹き出し

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


付箋付きクリップ


付箋付きクリップ

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


光沢の演出


光沢の演出

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


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

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


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

それでは、また。
yamada
Posted byyamada

Comments 1

There are no comments yet.

疑問  

何故でしょうか?

一番最初に紹介されている「ピン」で刺された画像の装飾は素敵ですね。
この装飾のCSSでちょっと疑問が生じました。
もしお分かりでしたら教えていただければと思います。

■ピンが写真画像よりも全面に表示される

ピンと写真画像、ソースはピンが先に、その後に写真画像ソースが記述されているのに、画面上ではピンは写真画像の上に表示されています。cssのz-indexなどで処理されていれば納得できるのですが、この場合は特にz-indexの記述はありません。
ソールの流れから判断すると、ピンは写真画像の後ろに表示されてしまうのと思うのですが・・・。

もしお分かりでしたらご教授いただければと思います。
よろしくお願いします。

2008/06/13 (Fri) 09:25

Leave a reply

Trackbacks 1

Click to send a trackback(FC2 User)
この記事へのトラックバック