2012-12-05

CSS Cake

CSS Programming Advent Calendar 2012 の5日目の記事です。

CSS Cake というバースデーケーキを作ってみました。
参加表明時に「アニメーション系の組み合わせ。実用性ないやつ。」というコメントを書いておいたので、そういうネタで。

jsdo.it がサービス終了したためサンプルは見れません

なお、検証は以下の2つでのみ行なっています。
Windows については、フォントの関係でちょっとズレが出てますが、動作はします。

仕組みについて

今回のサンプルで多用したのは、以下のもの。

サンプルを作成するにあたり、まとりさんの記事を参考にさせてもらいました。
CSS アニメーションの基礎 | Unformed Building

-webkit-animation

いろいろな要素を動かすために必須のものでした。

今回、animation をショートハンドで書いた時に、animation-delay を省略し、別に書いています。
これは、animation-delay だけ変更したいものが多かったのもありますが、ショートハンド内に秒数を指定する箇所が複数あり、視認性も悪いかなと思い、delay の指定を別にしています。

これに対応する keyframes についてですが、なかなか大変だなというのが素直な感想。

分からないなりに遊んでみて、以下の2点に気づきました。

from の省略

from を省略しても動く。

@-webkit-keyframes{
    to{
        opacity: 0;
    }
}

仕様書を見てみたら、書いてありました。
CSS Animations 3. Keyframes

%指定のカンマ区切り

同じ指定のものはひとまとめにしても動く。

20%, 30%, 40%{
    opacity: 0;
}

CSS 的には普通の内容ですが、@-webkit-keyframes 内でもまとめられました。

-webkit-transform

要素の変形系。

scale

ケーキの遠近感を出すためなどのために使用。ロウソクと炎部分。
-webkit-transform: scale(x); の x に前方は1.0、後方は0.7のようにして使っています。

rotate、perspective

ケーキの立体感を出すためなどに使用。
正しい使用方法かどうかではなく、見た目がそれっぽくなるようにしています。

nth-child

それぞれ class や id を振ってもいいんですが、どうせなら使えるセレクターを使おうかと。
普段だと jQuery で代用するか、それぞれに class を追加して対応してます。

box-shadow

複数の box-shadow を重ねて、炎のようになるようにした箇所で主に使っています。
その他でも使っていますが、単純な装飾なので省略。

:before、:after

ここらはできるだけタグの数を減らすために多用しています。

最後に

普段あまり使う機会がないものばかりだったので、いろいろと調べながら作成しました。
効率良くかけていないところなどあるかと思いますが、楽しみながらできたので参加して良かったです。
間違いなどあればコメントしてもらえると嬉しいです。

今回は全て手書き（この表現が正しいか分からないけど）でやりましたが、実務として扱うなら Sass や LESS などの力を借りるのが現実的かなと思います。

6日目

6日目は、去年の JavaScript おれおれ Advent Calendar 2011に続き、今年も CSS おれおれ Advent Calendar 2012を1人で更新しているギンペイさんです。