[CSS]CSS3アニメーションを美しく使ったUIエレメントを作成するチュートリアル

通常時は画像が配置されたパネルで、ホバー時には元画像に重ねて、半透明のアニメーションで情報を見せる「Dribbble」風のエフェクトを実装するスタイルシートを紹介します。
本家よりこっちの方がかっこいいかも。

Using CSS3 Animations to Build a Sleek Box UI

[ad#ad-2]

• デモ
• 実装

デモ

デモではCSS3に対応したブラウザ、Firefox4+, Chrome, Safari, Opera, IE9+でご覧ください。

デモページ

[ad#ad-2]

通常時はdiv要素のパネルに、ポラロイド風のスタイルが適用されています。
影がとても繊細です。

通常時

ホバー時は通常時の画像の上に半透明でコンテンツが表示され、パネルの外枠のスタイルも変更されます。

ホバー時

実装

HTML

パネルはdiv要素で実装し、画像やホバー時のコンテンツを内包します。

<div id="container">
	<div class="boxxy">
		<a href="http://dribbble.com/shots/489532-Banking-App" target="_blank" class="anchor-hover">
			<img src="images/sendmoney.png" width="400" height="300" />
			<span class="details">
				<h2>Banking App</h2>
				<p class="desc">Here's a full shot of the send money transaction for this "secret" banking app which I've been working on. This is an early concept, I haven't landed the full project yet, but hoping they like the concept so far.</p>
				<span class="pubdate">Published March 28, 2012</span>
				<span class="viewlink">View on Dribbble &rarr;</span>
			</span>
		</a>
	</div>
</div>

パネル内の各コンテンツを省略すると、下記のようになります。
a要素内に、通常時の画像とspan要素でホバー時のコンテンツを内包します。

<div id="container">
	<div class="boxxy">
		<a href="http://" class="anchor-hover">
			<img src="images/sendmoney.png" width="400" height="300" />
			<span class="details">ホバー時に表示するコンテンツ</span>
		</a>
	</div>
</div>

CSS:通常時（ボックスシャドウ）

まずは、通常時のスタイルです。
ポラロイド風のスタイルで、box-shadowでさりげない影をつけます。

.boxxy {
	display: block;
	margin: 0 auto;
	background: #fff;
	margin-bottom: 22px;
	-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
	width: 400px;
	padding: 7px 9px;
	transition: box-shadow 0.3s linear 0s;
	-webkit-transition: box-shadow 0.3s linear 0s;
	-moz-transition: box-shadow 0.3s linear 0s;
	-o-transition: box-shadow 0.3s linear 0s;
}

CSS:ホバー時

ホバー時には、span要素で実装したコンテンツを表示するため「opacity: 1;」を使用します。また、パネルのシャドウも変更します。

.anchor-hover:hover .details {
	opacity: 1;
}
.boxxy:hover {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 10px rgba(182, 70, 165, 0.7);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 10px rgba(182, 70, 165, 0.7);
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 10px rgba(182, 70, 165, 0.7);
}

ホバー時に表示されるコンテンツのスタイルです。
内包するspan要素は「opacity: 0;」にし、通常時は見えないようにします。不透明度の変更はアニメーションで設定します。

.anchor-hover .details {
	opacity: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 390px;
	height: 290px;
	margin: 0;
	padding-top: 10px;
	padding-left: 10px;
	font-size: 1.2em;
	line-height: 1.4em;
	text-decoration: none;
	color: #888; background: rgba(255, 255, 255, 0.85);
	overflow: hidden;
	transition: opacity 0.25s linear 0s;
	-webkit-transition: opacity 0.25s linear 0s;
	-moz-transition: opacity 0.25s linear 0s;
	-o-transition: opacity 0.25s linear 0s;
}

ホバー時に表示されるコンテンツの各エレメントのスタイルは、元記事をご覧ください。

• Using CSS3 Animations to Build a Sleek Box UI