【CSS】画像に枠と影を付けて「めくれた写真」っぽく表現する方法

結構見るよねコレ。 今日はCSSを使って画像に「枠」と「影」を付ける方法を解説します。この2つを付けると、簡単に「フレーム付きの写真」が表現できるので、覚えておいて損は無し！

というわけで、今回はこの画像を色々と弄っていきます。 秋葉原でメイド喫茶DTを卒業した時に撮った写真です。とても厳しい戦いでした。

…それでは、まずは枠の付け方から。

Demo - 枠付きの画像

padding	枠の太さ
background	枠内の色
border	枠線の色

こんな感じで、枠を付けるだけなら超簡単です。
次は影を付けてみましょう。

Demo - 影付きの画像

画像を囲むdivに対し、2つの半透明なboxを擬似要素として裏に回りこませています。それぞれを少し傾けてあげれば、めくれた風になるというわけです。
言葉だと説明しづらいので、画像を透過してみます。


なんとなく伝わったでしょうか…

上記2つのテクニックを組み合わせれば、フレーム付きのめくれた写真が簡単に作れるようになります。影の部分は少し面倒ですが、仕組みさえ分かってしまえば楽勝なので、興味のある方は是非。