テキストシャドウ
主にボタンなどで文字が刻印されているような表現に採用しています。文字色に白など明るい色を入れ、文字の上側に半透過の黒い影を入れています。
text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0px;
グラデーション、角丸、テキストシャドウを組み合わせて応用し、画像を一切使わずにiPhoneアプリのヘッダーのようなUIを表現することができます。
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin:0;
padding: 0;
}
header {
position: relative;
border-bottom: 1px solid #273750;
border-top: 1px solid #ccd6e2;
height: 42px;
background: -webkit-gradient(linear, left top, left bottom,
from(#b2bcc8),
color-stop(0.48, #8a9bb5),
color-stop(0.52, #8192ae),
to(#73839c)
);
}
h1 {
position: absolute;
top: 0;
margin: 0;
width: 100%;
color: #fff;
font-size: 20px;
font-weight: bold;
line-height: 42px;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0;
}
.button {
display: block;
position: absolute;
top: 6px;
right: 5px;
width: 46px;
height: 28px;
line-height: 28px;
background: -webkit-gradient(linear, left top, left bottom,
from(#6b89d1),
color-stop(0.05, #809ee6),
color-stop(0.48, #3c6ded),
color-stop(0.52, #235fe1),
color-stop(0.95, #2b63d2),
to(#2b3d65)
);
border-color: #293647 #2f52a3 #124ab9;
border-radius: 4px;
border-style: solid;
border-width: 1px 1px 0;
font-size: 12px;
font-weight: bold;
color: #fff;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0px;
text-decoration: none;
}
/* ボタン下のハイライトの表現 */
.button:after {
position: absolute;
top: 0;
left: 0;
content: "";
display: block;
height: 100%;
width: 100%;
padding: 0 2px 1px 0;
border-bottom: 1px solid #9aabc7;
border-radius: 4px;
}
</style>
</head>
<body>
<header>
<h1>メニュー</h1>
<a class="button" href="#">完了</a>
</header>
</body>
</html>
CSSアニメーション
スマートフォン版Yahoo! JAPANトップの「サービス一覧」「アプリ一覧」「設定」を押すと、それぞれのページが下からせり上がるように動いて表示されます。「CSSアニメーション」や「CSSトランスフォーム」といった機能を使用しています。CSSアニメーションはCSSのみの記述でアニメーションを表現できます。ただしそれだと実行のタイミングや、ユーザーの操作に合わせた細かい挙動を制御できないので、実際にはJavaScriptからCSSトランジションや、CSSトランスフォームなどの機能を呼び出しています。
対象ブラウザをWebKitブラウザに限定すれば、クロスブラウザで動かすような複雑なJavaScriptや、重たいJavaScriptライブラリを使用しなくても動作可能です。またiPhoneに限って言えば、CSSプロパティのtop, leftなどの値をマイフレームごとに動かして作るアニメーションと比べ、CSSアニメーション・トランスフォームを使うと、デバイス自体のグラフィックエンジンが動き、ネイティブアプリケーションのような非常になめらかなアニメーションとして再生されます。このような機能がブラウザにまで開放されていることで、ウェブはもっとインタラクティブで面白いものになっていくでしょう。
以下は、ボタンをクリックすると上下左右に回転しながらスライドアニメーションをするサンプルです。
<!DOCTYPE html>
<html>
<head>
<title>WebKit Transformサンプル</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<style>
#buttons {
margin-bottom: 10px;
text-align: center;
}
#block {
width: 100px;
height: 100px;
background: red;
-webkit-transition: -webkit-transform 1s ease-in-out;
}
</style>
</head>
<body>
<div id="buttons">
<input type="button" onclick="move(0, 0, 0)" value="左上へ">
<input type="button" onclick="move(205, 0, 90)" value="右上へ"><br>
<input type="button" onclick="move(0, 150, 180)" value="左下へ">
<input type="button" onclick="move(205, 150, 270)" value="右下へ">
</div>
<div id="block"></div>
<script>
var node = document.getElementById("block");
function move (x, y, r) {
node.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px,0) rotate(' + r + 'deg)';
}
</script>
</body>
</html>
- WebKit Transform サンプルページ（Webkitブラウザでしか動作しません）
お手持ちのiPhoneや、iPod touch、iPadなどで見てみてください。ネイティブアプリケーションのように、なめらかに動いているのがわかると思います。
さらにiPhone／Androidなどで実装されているタッチイベントを組み合わせることで、指のタッチした軌跡に沿って滑らかに動くコンテンツが作成できます。スマートフォン版Yahoo! JAPANトップでは、以下のような箇所で、今回紹介したCSSアニメーションの機能を使っており、ネイティブアプリケーションにも負けない表現をしています。
