CSS3で写真風に装飾をするには！？

css

最近は、各ブラウザもCSS3に対応してきてるので割と装飾もCSS3でやってしまおう！というのが増えてきたと思います。
でせっかくなのでCSS3のbox-shadowやtransformを使って写真風に装飾する方法を勉強してみた。

htmlファイルの準備

htmlファイルに関しては画像をdivタグで括って、クラスを設定しているだけです。
ざっくり言うとこのdivタグにbeforeとafterの擬似要素を利用して画像の下に影を作ります。

photoクラスの初期設定

さて、ここではphotoクラスの設定をしていこうかと思います。ここでの設定が後で設定するcssの基準となりますので。
といっても難しい設定ではないです。


.photo{
    position:relative;
    background:#fff;
    width:100%;
    padding:10px;
    margin:0 auto;
}

まずは、positionをrelativeに設定しています。これは、のちのち「:before」と「:after」の擬似要素をabsoluteで絶対配置にする必要があるため、基準値にするためです。

あとは写真らしくpaddingとbackgroundで背景色を白で設定してあげると写真風の枠が出来上がります。

擬似要素を利用して影をつけ写真風にする

先ほどの設定で余白と背景色はつけましたがこれだけだと写真風の装飾にはなりません。ここで「:before」と「:after」の擬似要素を使用して影を作ります。

:beforeで左側の影を作る。

beforeはもちろん「前」ということなので、ここではdiv要素の開始タグの直後に挿入されます。ちなみに、contentプロパティは必須でないと動作しません。＊なほサンプルでプレフィックスを付けてますが、ここでは省略させていただきます。


.photo:before{
　　position:absolute;
  　z-index:-1;
    content:"";
    bottom:10px;
    left:10px;
    width:50%;
    top:80%;
    background:#8d8c8c;
    box-shadow:0 15px 10px #8d8c8c;
    transform:rotate(-5deg);
    
}

上記は、まず絶対配置にしてz-indexで-1を指定することで画像の下に隠れるようにしています。＊影なので画像の上にあったら変ですよね

contentプロパティは必須なので””だけを記載しています。あとはdiv要素を基準にしているので,leftで左から10pxの位置、bottomで下から10pxの位置、topは上の位置からdiv要素の高さの80%分の位置に影を設定しています。あとはbackgroundで影の色です。

幅はdivタグの半分で50%を指定してます。サンプルを見ると分かりますが、画像の中央あたりから左右に斜めに影が出ているので半分の50%にしています。右側の影も同じです。

この段階では画像と影が被っているので見えないはずです。＊サンプルでleftを-10pxで左に移動させると影があるのが分かります。

影の高さは、位置はdiv要素の80%の位置から始まっているので100%-80%=20%で影の高さがdiv要素の20%分の高さになっています。例：div要素の高さ100pxだと影は20pxの高さになる。

box-shadowで影をぼかす

ここでbox-shadowのプロパティで15pxほど水平方向に移動させて10px分ほどぼかしの距離を出しています。そそうすると影が出てくると思います。詳しいbox-shadowの説明はこちら「box-shadow－CSS3リファレンス – HTMLクイックリファレンス」

transformプロパティで回転させる

CSS3のtransformプロパティは、変形、移動、回転などを指定することができます。詳しくは「CSS3 変形処理を行う transform プロパティ | CSS Lecture」で説明してくれています。

ここまでの作業だと影が水平になっていると思いますが、これをサンプルのようにすこし回転させてあげると自然な感じになりますので、rotate(deg)を使用して回転させます。

サンプルでは左の影は、画像中央から左下に影が斜めになっているので、rotate(-5deg)回転させています。これは、プラスの数値だと時計周りに回転していくのでマイナス指定で反時計回りに回転させることで左側が斜めになっています。

:afterで右側の影を作る。

afterは「後」となるのでここでは、div要素の閉じタグの前に入ります。

基本的には、beforeと同じ処理ですが、右側の影になるので位置をleftではなく、rightとして右側から10pxの位置に指定して、transformプロパティでrotate（5deg）で時計回りに回転させて、右下に向かって斜めになっていると思います。


.photo:after{
   z-index:-1;
    position:absolute;
    content:"";
    bottom:10px;
    right:10px;
    width:50%;
    top:80%;  
    background:#8d8c8c;   
    box-shadow:0 15px 10px #8d8c8c;
    transform:rotate(5deg);
    
}

といった具合で、CSS3にはdox-shadowとかtransformプロパティなど充実しているので組み合わせ次第では他の表現も可能になりそうですね。

参考サイト

今回の、写真風は結構ネットで出回っているようなので、基本的にはCSSは似てしまうというか同じような設定になってしまいますね（笑）