[CSS]画像一枚だけで写真を重ねたようにするチュートリアル

サイト構築 -CSS

Post on:2012年6月5日

sponsorsr

シンプルなHTMLで画像を配置し、:before, :after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。
重ねたエフェクトはホバー時にCSS3アニメーションします。

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

[ad#ad-2]

デモ
実装

デモ

デモは4つあり、垂直方向に重ねたもの、回転を加えて重ねたものがあり、それぞれホバー時に垂直方向に重なります。

デモページ

※ホバー時のアニメーションはFirefoxのみです。

実装

HTML

HTMLは非常にシンプルです。
ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。

<div class="stack">
    <img src="image1.jpg" />
</div>

[ad#ad-2]

CSS

スタイルシートは4つのデモのキャプチャと共に、紹介します。

まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:before, :afterを使用します。

.stack { position: relative; z-index: 10; }
 
/* Image styles */
.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
 
/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -webkit-transition: 0.3s all ease-out;
    -moz-transition: 0.3s all ease-out;
    transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */

2番目のスタイルシートではrotateを使い、重なりに回転を加えます。

/* Second stack example (rotated to the right from the bottom left) */
.stack.rotated:before {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    transform: rotate(2deg);
}
.stack.rotated:after {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    transform: rotate(4deg);
}

3番目は:afterの重なりを反対方向にしています。

/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    transform: rotate(4deg);
}
.stack.twisted:after {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);
}

4番目は2番目と似ており、両方とも反対方向に回転させています。

/* Fourth stack example (Similar to the second but rotated left) */
.stack.rotated-left:before {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
.stack.rotated-left:after {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    transform: rotate(-6deg);
}

ホバー時には回転させていない状態に戻します。
※:before, :afterのCSS3アニメーションはFirefoxのみサポートされています。

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}