CSSで冊子風エフェクト

毎回PhotoShopとかで冊子風に加工するのが億劫だなと思って作ってみました。
けっこう冊子風の画像を掲載してるサイトって多いですけど、CSSで作れば若干労力が減る気がします。

こんな感じになります。
HTML側で、img要素を囲むタグ(divとかfigureとか)に「sassi」クラスを追加してます。
以下CSS。

.sassi {
  -moz-perspective:500;
  -webkit-perspective:500;
  -o-perspective:500;
  -ms-perspective:500;
}

.sassi img {
  -moz-transform: rotateX(10deg);
  -webkit-transform: rotateX(10deg);
  -o-transform: rotateX(10deg);
  -ms-transform: rotateX(10deg);
  box-shadow:
    0 8px 0 rgba(0,0,0,.3),
    0 6px 0 rgba(0,0,0,.3),
    0 2px 0 rgba(0,0,0,.3),
    0 4px 0 rgba(255,255,255,.9),
    2px 8px 5px rgba(0,0,0,.3);
}

若干奥行きを追加してます。
いらない場合は、

.sassi img {
  box-shadow:
    0 8px 0 rgba(0,0,0,.3),
    0 6px 0 rgba(0,0,0,.3),
    0 2px 0 rgba(0,0,0,.3),
    0 4px 0 rgba(255,255,255,.9),
    2px 8px 5px rgba(0,0,0,.3);
}

この部分だけで使えます。

カテゴリー : 技術・小ネタ

COMMENT FORM

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です。

※送信の前にプライバシーポリシーを必ずご確認ください。