CSS3アニメーションでつくるインターフェイス表現

第1回プッシュボタンのアニメーション

新たに始まった連載「CSS3アニメーションでつくるインターフェイス表現」では、CSS3によるアニメーション表現を紹介していきたい。その中でも、幅広い読者に応用してもらえるだろうインターフェイスをおもなお題とする。CSS3が充実し、ブラウザの実装も進んできたので、JavaScriptコードを書かずとも豊かな表現ができる。第1回は、基本を抑える意味で、プッシュボタンのアニメーションをつくる。

ボタンのもとになる静的スタイル

まず、<body>要素に書くコードだ。プッシュボタンにする<a>要素は、つぎのようにclass属性"button"を定めた<p>要素に含める。それをさらに、class属性"container"の<div>要素で包んだ。

<body>
<div class="container">
	<p class="button"><a href="#">Push Button</a></p>
</div>
</body>

プッシュボタンのもととなるスタイル図1は、以下の<style>要素で定める。まだ、アニメーションはしないし、四角い背景があるだけでプッシュボタンとしての見た目も寂しい。順に手を加えていこう。

図1 プッシュボタンのもととなるスタイル
図1 プッシュボタンのもととなるスタイル
<style>
body {
	background: white;
	font: 30px sans-serif;
}
.button a {
	display: block;
	width: 200px;
	margin: 0 auto;
	padding: 10px;
	color: white;
	text-align: center;
	text-decoration: none;
	background-color: lightseagreen;
}
</style>

ボタンの角に丸みを加える

ボタンらしく、4つの角は丸める。そのためのプロパティは、border-radiusだ。プロパティの値には、角丸の半径を与える。

border-radius: 角丸の半径

プッシュボタンclass属性"button")<a>要素に、つぎのようにボックスの角丸(5ピクセル)を定めた。すると、ボタンの背景の4つの角に丸みが加わる図2⁠。

.button a {

	border-radius: 5px;
}
図2 プッシュボタンの角に丸みを加えた
図2 プッシュボタンの角に丸みを加えた

影でボタンを立体的に見せる

さらに、box-shadowプロパティでボタンに影を加えたい。オプション(構文の[]は省略可の意)insetは後で用いる。水平・垂直のずれをともに正の値にすると、影は右下につく。負の値なら左上だ。

box-shadow: [inset] 水平のずれ 垂直のずれ ぼけ幅 カラー

プッシュボタンclass属性"button")<a>要素には、つぎのように右下に影を加えた図3⁠。影はrgba()関数で半透明にしている。

.button a {

	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
}
図3 プッシュボタン外側の右下に影が加わった
図3 プッシュボタン外側の右下に影が加わった

box-shadowプロパティには、カンマ(,)区切りで影をいくつでも加えられる。オプションにinsetを与えると、影はボックスの内側にかかる。位置は、水平・垂直のずれをともに正の値にすると左上に、負の値だと右下になる。つぎのように、内側左上を白、右下を黒で定めれば、ボタンが出っ張って見える図4⁠。

.button a {

	box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
		inset -4px -4px 4px rgba(0, 0, 0, 0.4);
}
図4 プッシュボタン内側の左上に白と右下に黒の影が加わった
図4 プッシュボタン内側の左上に白と右下に黒の影が加わった

プッシュボタンの外側右下の影も加えた<style>要素の記述はつぎのとおりだ。これで、3次元で出っ張ったように見えるプッシュボタンの右下に影を加えた表現ができた図5⁠。

body {
	background: white;
	font: 30px sans-serif;
}
.button a {
	display: block;
	width: 200px;
	margin: 0 auto;
	padding: 10px;
	color: white;
	text-align: center;
	text-decoration: none;
	background-color: lightseagreen;
	border-radius: 5px;
	box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
		inset -4px -4px 4px rgba(0, 0, 0, 0.4),
		4px 4px 8px rgba(0, 0, 0, 0.6);
}
図5 出っ張ったプッシュボタンの右下に影を加えた表現
図5 出っ張ったプッシュボタンの右下に影を加えた表現

マウスポインタを重ねたときのボタンの表現

プッシュボタンにマウスポインタを重ねたとき、見た目が変わるようにしよう。つぎのように<a>要素の:hover擬似クラスで、背景色を明るめに変えるとともに、影は縮めた。さらに、transformプロパティで位置を少し下げる。translateY()関数が垂直位置を動かす。これで、マウスポインタが重なると、プッシュボタンの色と影が変わって、下にずれる図6

.button a:hover {
	background-color: mediumaquamarine;
	box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.6),
		inset -2px -2px 4px rgba(0, 0, 0, 0.4),
		2px 2px 4px rgba(0, 0, 0, 0.8);
	transform: translateY(2px);
}
図6 マウスポインタを重ねたときのプッシュボタンの表現
図6 マウスポインタを重ねたときのプッシュボタンの表現

プッシュボタンのボックスの位置を下げるには、transformプロパティでなく、たとえばつぎのようにtopプロパティで変えることもできる。だが、transformは位置を動かすだけでなく、伸縮や回転もできるし、さらに3次元の表現も加えられる。さまざまなCSSのアニメーションを試してみようというこの連載では、こちらのプロパティを使いたい。

.button a {
	position:relative;

}
.button a:hover {

	top: 2px;
}

プッシュボタン上でマウスボタンを押したときの表現は、<a>要素の:active擬似クラスにつぎのように定める。内側insetオプション)の影の左上と右下の色を入れ替えれば、プッシュボタンは凹んで見える図7⁠。外側の影はさらに縮めて、位置も下げた。これでプッシュボタンとしての基本的な動きができた。

.button a:active {
	color: gainsboro;
	background-color: darkcyan;
	box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.4),
		inset 2px 2px 4px rgba(0, 0, 0, 0.8),
		1px 1px 1px rgba(0, 0, 0, 0.6);
	transform: translateY(4px);
}
図7 マウスボタンを押したときのプッシュボタンの表現
図7 マウスボタンを押したときのプッシュボタンの表現

ベンダープレフィックスと-prefix-free

ひとつ注意しておかなければならないのは、transformプロパティの仕様だ。本稿執筆時現在では「草案」となっている。そのため、ブラウザやそのバージョンによっては、ベンダープレフィックス(接頭辞)を添えなければならない。たとえば、ChromeやSafariであれば、つぎのようにプレフィックス-webkitを加えることになる。

.button a:active {

	-webkit-transform: translateY(4px);
	transform: translateY(4px);
}

この連載はCSS3のアニメーションでどのような表現ができるのか、実験的な紹介をしていきたい。したがって、⁠勧告」前の機能も使うつもりだ。他方で、細かい装飾的なコードは省いて、簡潔に示したいと考える。そこで、ベンダープレフィックスは、JavaScriptライブラリ-prefix-freeを使って入力は省くことにしよう図8⁠。-prefix-freeはつぎのように<script>要素に読み込めばよく(JSファイルはフォルダ「lib」に納めた⁠⁠、JavaScriptコードは書かなくてよい。

<script src="lib/prefixfree.min.js"></script>
図8 -prefix-freeサイト
図8 -prefix-freeサイト

ボタンに滑らかなアニメーションを定める

擬似クラス:hover:activeに定めたプッシュボタンの見た目は、このままではただちに切り替わる。滑らかなアニメーションにした方が、魅力は増すだろう。そこで、transitionプロパティ(仕様は「草案⁠⁠)を用いる。最低限与えるべき値は、アニメーションに費やす時間だ(あとはデフォルト値が使われる⁠⁠。つぎのようにプッシュボタンの<a>要素にプロパティを定めれば、0.5秒かけて滑らかに動く。

.button a {

	transition: 0.5s;
}

プッシュボタンを押したときの動き:active擬似クラス)はもっと速くしたい。もちろん、transitionプロパティを定め直してもよい。だが、アニメーション時間だけを変え、他の設定は触らずにおきたいという場合に備えて、つぎのようにtransition-durationプロパティを使うことにしよう。

.button a:active {

	transition-duration: 0.2s;
}

これで今回のお題のプッシュボタンのアニメーションはでき上がった。ここまで書いてきた<script><style>の定めはつぎのコード1のとおりだ。併せて、後掲サンプル1をjsdo.itに掲げた。

コード1 プッシュボタンのアニメーション
<script src="lib/prefixfree.min.js"></script>
<style>
body {
	background: white;
	font: 30px sans-serif;
}
.button a {
	display: block;
	width: 200px;
	margin: 0 auto;
	padding: 10px;
	color: white;
	text-align: center;
	text-decoration: none;
	background-color: lightseagreen;
	border-radius: 5px;
	box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
		inset -4px -4px 4px rgba(0, 0, 0, 0.4),
		4px 4px 8px rgba(0, 0, 0, 0.6);
	transition: 0.5s;
}
.button a:hover {
	background-color: mediumaquamarine;
	box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.6),
		inset -2px -2px 4px rgba(0, 0, 0, 0.4),
		2px 2px 4px rgba(0, 0, 0, 0.8);
	transform: translateY(2px);
}
.button a:active {
	color: gainsboro;
	background-color: darkcyan;
	box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.4),
		inset 2px 2px 4px rgba(0, 0, 0, 0.8),
		1px 1px 1px rgba(0, 0, 0, 0.6);
	transform: translateY(4px);
	transition-duration: 0.2s;
}
</style>
サンプル1 CSS3: Push button

おすすめ記事

記事・ニュース一覧