画像を装飾するためのスタイル一覧をご紹介します。
画像に限らず、ボックスの枠などにも適用できると思います。
なお、以下の画像はファイル名の末尾を「_off.jpg」にしています。
末尾を「_off.jpg」にしておき、別に末尾を「_on.jpg」にした画像を設置しておくと、マウスオーバーで画像が置き換わるようになっています。
影付き
imgタグにクラス「shadow」を追加します。
|
1 2 3 |
<figure> <img class="shadow" src="./images/sample012_off.jpg" alt="サンプル" width="240" height="240"> </figure> |
影付き2
imgタグにクラス「shadow02」を追加します。
|
1 2 3 |
<figure> <img class="shadow02" src="./images/sample012_off.jpg" alt="サンプル" width="240" height="240"> </figure> |
囲み線（1px）
imgタグにクラス「outline」を追加します。
|
1 2 3 |
<figure> <img class="outline" src="./images/sample012_off.jpg" alt="サンプル" width="240" height="240"> </figure> |
角丸
imgタグにクラス「rc12」を追加します。
ほかにも「rc4」「rc8」があらかじめ用意されています。
|
1 2 3 |
<figure> <img class="rc12" src="./images/sample012_off.jpg" alt="サンプル" width="240" height="240"> </figure> |
円
imgタグにクラス「circle」を追加します。
|
1 2 3 |
<figure> <img class="circle" src="./images/sample012_off.jpg" alt="サンプル" width="240" height="240"> </figure> |
写真風
imgタグにクラス「frame」を追加します。
|
1 2 3 4 |
<figure> <img class="frame" src="./images/sample012_off.jpg" alt="サンプル" width="240" height="240"> <figcaption class="al-c m10-t">写真風</figcaption> </figure> |
装飾を複数適用する
また上記の装飾を複数同時に適用する場合は、class名の後に半角スペースを入れて、もう一つの付けたい装飾のclass名を入れてください。例えば、影と角丸を適用する場合は「img class=”shadow rc12″」と入れてください。
|
1 2 3 4 |
<figure> <img class="shadow rc12" src="./images/sample012_off.jpg" alt="サンプル" width="240" height="240"> <figcaption class="al-c m10-t">写真風</figcaption> </figure> |
