HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
Post on:2019年11月11日
sponsors
シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。
デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。
Izmirの特徴
- 画像をホバーすると多彩なアニメーションを適用します。
- エフェクトを組み合わせることで、2000通り以上のエフェクトを使用可能。
- 20種類のボーダーエフェクト、9種類の画像エフェクト、12種類のテキストエフェクト。
- オーバーレイのスタイル、アニメーションの遅延、テキストのレイアウトなど、classも豊富。
- アクセシブル（デスクトップはホバー、スマホはフォーカス）。
- 2Kbの超軽量ライブラリ。
- 実装・カスタマイズ用のドキュメント完備。
- MITライセンスで、商用プロジェクトでも無料。
Izmirのデモ
デモでは、Izmirのさまざまな画像エフェクトを楽しめます。
Izmirの使い方
Step 1: 外部ファイル
当CSSを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 |
<html> <head> <link rel="stylesheet" href="css/izmir.min.css"> </head> <body> コンテンツ </body> </html> |
Step 2: HTML
Izmirのエフェクトに使用する画像やテキストは、下記のように実装します。
|
1 2 3 4 5 6 7 8 |
<figure class="c4-izmir"> <img src="https://source.unsplash.com/FaPxZ88yZrw/400x300" alt="Sample Image"> <figcaption> <h3> Some sample text </h3> </div> </figure> |
.c4-izmirは共通に使用するclassで、ボーダーや画像やテキストなどのエフェクトはclassを加えるだけで簡単に実装できます。
カスタマイズ方法は、下記のドキュメントをご覧ください。
sponsors
