Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2014年2月5日 Web制作

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


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

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

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

Demo - 枠付きの画像

sdw
padding枠の太さ
background枠内の色
border枠線の色
こんな感じで、枠を付けるだけなら超簡単です。
次は影を付けてみましょう。

Demo - 影付きの画像

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

sdw

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

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

sdw
関連するかもしれない記事