[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート（フェードも可） -Label.css
Post on:2013年5月21日
sponsors
画像の上に半透明なラベルを天地中央、左右に簡単に配置でき、しかもホバー時にフェードでラベルを表示するなどのエフェクトも備えたスタイルシートを紹介します。
Label.cssのデモ
デモでは、画像のラベルを動的に試すことができます。
通常利用する時は、静的に。
左のパネルでラベルを表示する位置を指定すると、ラベルが表示されます。
中央の「○」をクリックしてみます。
デモ：中央に表示
中央右をクリックしてみます。
デモ：中央右に表示
ラベルはエフェクトも備えており、ホバー時にフェードで表示することもできます。
デモ：ホバー時にフェードで表示
Label.cssの使い方
使い方は簡単で、ラベルはclassとdata属性を加えて指定するだけです。
Step 1: 外部ファイル
当スタイルシートをhead内に配置します。
<head> <link rel="stylesheet" href="css/label.css" /> </head>
Step 2: HTML
画像を配置するimg要素にfigureを加えます。
<figure> <img src="image.jpg" alt="代替テキスト"> </figure>
figureにclassでlabelを加え、配置するポジションを指定します。
<figure class="label inside bottom"> <img src="image.jpg" alt="代替テキスト"> </figure>
画像の上に配置するテキストをdata属性に記述します。
<figure class="label inside bottom" data-label="画像の上に配置するテキスト"> <img src="image.jpg" alt="代替テキスト"> </figure>
エフェクトを加える時は、更に追加します。
<figure class="label inside bottom fade" data-label="画像の上に配置するテキスト"> <img src="image.jpg" alt="代替テキスト"> </figure>
オプション
ラベルのポジションやエフェクトは、classに指定します。
- inside
- 画像の内側
- outside
- 画像の外側
- top, middle, bottom ,left, right
- 配置する位置
- fade, float
- ホバー時のエフェクト
ラベルのカラーを変更したい時は、CSSなので簡単に変更できるのもいいですね。
sponsors
