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

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

この記事を読むのに必要な時間:およそ 3 分

新たに始まった連載「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 出っ張ったプッシュボタンの右下に影を加えた表現

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入