[CSS]画像に枠線やウォーターマーク、キャプションをつけるスタイルシート

TORRANCE WEB DESIGNのエントリーから、画像に枠線やウォーターマーク、キャプションをつけるスタイルシートを紹介します。

デモのキャプチャ

5 Ways to Spice up Your Images with CSS

Drop Shadow Effect

画像を使用し、ドロップシャドウのエフェクトを適用します。

デモのキャプチャ

demo: Drop Shadow Effect

HTML

CSS

Double Border Effect

paddingを指定し、ボーダーが二重にあるようなエフェクトを適用します。

デモのキャプチャ

demo: Double Border Effect

HTML

CSS

Framed Image Effect

空spanと画像を使用し、フレームのエフェクトを適用します。

デモのキャプチャ

demo: Framed Image Effect

HTML

CSS

Watermark Effect

半透明の画像を使用し、ウォーターマークのエフェクトを適用します。

デモのキャプチャ

demo: Watermark Effect

HTML

CSS

Image with Caption

半透明のキャプションを画像に重ねます。

デモのキャプチャ

demo: Image with Caption

HTML

CSS

sponsors

top of page

©2018 coliss