ホームページ制作アトリエ

心えがおホームページ制作 atelier(アトリエ)は、ホームページ・動画制作、教育ICT・アプリ開発、名刺・ポスター・チラシの作成を行っております。

box-shadowを使ったeffect

カテゴリー:css3
css3でよく見かけるようになったbox-shadowを使った紙がふんわり浮いたようなeffectのまとめです。

使うのは:before擬似要素:after擬似要素です。
transformプロパティを使って要素に2D変形、または、3D変形を適用させていきます。
指定するtransform関数はrotate(回転角度)skew(X軸の傾斜角度, Y軸の傾斜角度)です。

デモ

ベース

HTML

css

全体的に浮かせる

まずはbox-shadowの基本形です。

左下と右下にシャドウをつける

ここでは:before擬似要素と:after擬似要素を使ってみます。
画像の裏にポジショニングし、transform で少しだけ回転させて、シャドウを落とす仕組みになっています。 これを分解すると・・・

左下

右下

シャドウの量を増やしてみる

シャドウでカーブを描く

これを上にもつけてみる・・・

上下にカーブを描いたシャドウをつける

両サイドのシャドウ