[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
Post on:2013年12月11日
スタイルシート初心者でも簡単に実装できる、classを加えるだけで画像にキャプションをさまざまなアニメーションを使って表示するスタイルシート(LESSも有り)を紹介します。
↓この画像をホバーしてみてください。
![サイトのキャプチャ](/wp-content/uploads-201303/2013121103.png)
InContent
classを加えるだけでキャプションを表示します!
InContentのデモ
いつもなら静止画のキャプチャやgifアニメーションで紹介するところですが、デモをそのまま掲載した方が軽いのでデモにしました。
アニメーションのエフェクトは全部で12種類、どれもかっこいいです。
![Pic](/wp-content/uploads-201303/2013121104/01.jpg)
Bottom to Top
画像のキャプションのテキスト
![Pic](/wp-content/uploads-201303/2013121104/02.jpg)
Top to Bottom
画像のキャプションのテキスト
![Pic](/wp-content/uploads-201303/2013121104/03.jpg)
Left to Right
画像のキャプションのテキスト
![Pic](/wp-content/uploads-201303/2013121104/04.jpg)
Right to Left
画像のキャプションのテキスト
![Pic](/wp-content/uploads-201303/2013121104/05.jpg)
Rotate In
画像のキャプションのテキスト
![Pic](/wp-content/uploads-201303/2013121104/06.jpg)
Rotate Out
画像のキャプションのテキスト
![Pic](/wp-content/uploads-201303/2013121104/07.jpg)
Open Up
画像のキャプションのテキスト
![Pic](/wp-content/uploads-201303/2013121104/08.jpg)
Open Down
画像のキャプションのテキスト
![Pic](/wp-content/uploads-201303/2013121104/09.jpg)
Open Left
画像のキャプションのテキスト
![Pic](/wp-content/uploads-201303/2013121104/10.jpg)
Open Right
画像のキャプションのテキスト
![Pic](/wp-content/uploads-201303/2013121104/11.jpg)
Come Left
画像のキャプションのテキスト
![Pic](/wp-content/uploads-201303/2013121104/12.jpg)
Come Right
画像のキャプションのテキスト
InContentの使い方
実装はとても簡単です。
Step 1: 外部ファイル
当スタイルシートをhead内に配置します。
<head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head>
Step 2: HTML
画像のimg要素とキャプションのspan要素をdivで包みます。
<div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div>
用意されているclassは12種類。spanの「bottom-to-top」を変更して利用してください。
- .bottom-to-top
- .top-to-bottom
- .left-to-right
- .right-to-left
- .rotate-in
- .rotate-out
- .open-up
- .open-down
- .open-left
- .open-right
- .come-left
- .come-right
sponsors