CSS3 badge

今日はオンズのオリジナルのスタイルシート［DarkForce.css］を紹介します。

まるでスターウォーズに登場する宇宙船に乗っているような感じで、壮大な宇宙の彼方にトリップしていけるCSSのテクニック。
まずはサンプルをご覧ください。

ONZE - CSS3［DarkForce.css］

以下、［DarkForce.css］のキモの部分を解説します。

HTMLの記述

まずはHTMLの記述ですが、body要素の直下に以下のコードを記述します。

<div id="d1">
<div id="d2">
<div id="d3">
</div>
</div>
</div>

body要素との組み合わせで、この３つのdiv要素がそれぞれ、背景の「星屑」を描画するレイヤーになります。

CSSの読み込み

続いてスタイルシートの設定ですが、こちらは配布している［DarkForce.css］を読み込むだけでOKです。
［DarkForce.css］は先に紹介したサンプルのサイトからダウンロード可能です。

ONZE - CSS3［DarkForce.css］

ダウンロードした「darkforce.css」を読み込むには <head>〜</head> 内で以下のように記述します。

<head>
<link rel="stylesheet" href="darkforce.css">
</head>

基本的に、たったこれだけの設定で［DarkForce.css］が実装されます。
簡単ですね。

スタイルシートの解説

スタイルシートの中身をご覧いただければ一目瞭然ですが、［DarkForce.css］はCSS3の「perspective」プロパティをbody要素に効かせることからスタートしています。

body {
overflow:hidden;
background:#000;
	-webkit-perspective:300;
	-moz-perspective:300;
	-ms-perspective:300;
	-o-perspective:300;
	perspective:300;
}

続いて「d1」「d2」「d3」の各要素には、同じくCSS3の transform-style:preserve-3d; を指定します。
このとき、「animation-delay」プロパティをそれぞれの要素に指定して時間差で動くようにします。

#d1,
#d1:before,
#d1:after,
#d2,
#d2:before,
#d2:after,
#d3,
#d3:before,
#d3:after {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display:block;
margin:0;
padding:0;
width:100%;
height:100%;
}

#d1,
#d2,
#d3 {
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
}

#d1:before,
#d1:after,
#d2:before,
#d2:after,
#d3:before,
#d3:after {
background-image:url(star.png);
content:"";
	-webkit-animation:12s warp linear infinite;
	-moz-animation:12s warp linear infinite;
	-ms-animation:12s warp linear infinite;
	-o-animation:12s warp linear infinite;
	animation:12s warp linear infinite;
visibility:visible;
background-position:50% 50%
}

#d1:before {
background-position:-190px 80px
}
#d1:after {
background-position:90px -180px;
	-webkit-animation-delay:-2s;
	-moz-animation-delay:-2s;
	-ms-animation-delay:-2s;
	-o-animation-delay:-2s;
	animation-delay:-2s;
}
#d2:before {
background-position:210px 180px;
	-webkit-animation-delay:-4s;
	-moz-animation-delay:-4s;
	-ms-animation-delay:-4s;
	-o-animation-delay:-4s;
	animation-delay:-4s;
}
#d2:after   {
background-position:-120px 40px;
	-webkit-animation-delay:-6s;
	-moz-animation-delay:-6s;
	-ms-animation-delay:-6s;
	-o-animation-delay:-6s;
	animation-delay:-6s;
}
#d3:before {
background-position:130px 140px;
	-webkit-animation-delay:-8s;
	-moz-animation-delay:-8s;
	-ms-animation-delay:-8s;
	-o-animation-delay:-8s;
	animation-delay:-8s;
}
#d3:after {
background-position:-150px -90px;
	-webkit-animation-delay:-10s;
	-moz-animation-delay:-10s;
	-ms-animation-delay:-10s;
	-o-animation-delay:-10s;
	animation-delay:-10s;
}

奥行きのある遠近感を生む動きと緩やかな回転は「animation」プロパティと「@keyframes」で描画。
「@keyframes」部分のCSSは下記のように設定しています。

@-webkit-keyframes warp {
	from{opacity:0;-webkit-transform:rotate(-60deg) translateZ(-300px)}
	to{opacity:1;-webkit-transform:rotate(60deg) translateZ(300px)}
}
@-moz-keyframes warp {
	from{opacity:0;-moz-transform:rotate(-60deg) translateZ(-300px)}
	to{opacity:1;-moz-transform:rotate(60deg) translateZ(300px)}
}
@-ms-keyframes warp {
	from{opacity:0;-ms-transform:rotate(-60deg) translateZ(-300px)}
	to{opacity:1;-ms-transform:rotate(60deg) translateZ(300px)}
}
@-o-keyframes warp {
	from{opacity:0;-o-transform:rotate(-60deg) translateZ(-300px)}
	to{opacity:1;-o-transform:rotate(60deg) translateZ(300px)}
}
@keyframes warp{
	from{opacity:0;transform:rotate(-60deg) translateZ(-300px);}
	to{opacity:1;transform:rotate(60deg) translateZ(300px);}
}

「opacity」が透明度の変化、「transform」が回転、「translateZ」が奥行きのある動きを司っています。

当然、CSS3を使っているので、古いブラウザには対応していません。
最新のモダンブラウザが対象となっています。

公開しているスタイルシートを読み込むだけの簡単な設定で実装できるので、初心者の方にもオススメできます。
404エラーのページなどで利用してみてはいかがでしょうか。

ちなみにライセンスは【GPL】（GNU General Public License）で、著作権表示をしていただければ誰でも無料で利用可能です。

公開しているスタイルシートを読み込むだけの簡単な設定で実装できるので、初心者の方にもオススメできます。
404エラーのページなどで利用してみてはいかがでしょうか。

ONZE - CSS3［DarkForce.css］