[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
スタイルシート初心者でも簡単に実装できる、classを加えるだけで画像にキャプションをさまざまなアニメーションを使って表示するスタイルシート(LESSも有り）を紹介します。スタイルシート初心者でも簡単に実装できる、classを加えるだけで画像にキャプションをさまざまなアニメーションを使って表示するスタイルシート(LESSも有り）を紹介します。
InContent
classを加えるだけでキャプションを表示します！InContent -GitHub
InContentの使い方
実装はとても簡単です。Step 1: 外部ファイル
当スタイルシートをhead内に配置します。
1
2
3
4
| <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /></head> |
Step 2: HTML
画像のimg要素とキャプションのspan要素をdivで包みます。
1
2
3
4
5
6
7
| <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
http://coliss.com/articles/build-websites/operation/css/css-incontent.html
