CSSで実現できることはこれまでにも見てきました。Operaのロゴ、Safari自体に組み込まれたSafariウィンドウ、Kinetic Typeのビデオなどです。では、Apple関連のものはどうでしょうか？今回は、iPhoneとiOSのアイコンをすべてCSSで作成しました。

Jeff BattertonがCSS3を使ってiPhoneテンプレートを作成しました。こちらをご覧ください。

オールCSSの時計を作ろうと決めました。制作を始め、ほぼ完成に近づいた頃、また別のオールCSSの時計に出会いました。アイデアを独創的なものにしたかったので、新しいアプローチが見つかるまでプロジェクトをしばらく保留にしました。

その後、iPhoneの世界時計に似せて自分の時計のスキンを作ろうと決めました。でも、それだけでは満足できませんでした。iPhoneの世界時計アプリ全体をCSSで作り直すことにしました。さらに一歩進んで、画像なしでiPhone全体を再現することにしました！

私が使用したメソッドとプロパティのほとんどは非常にシンプルで分かりやすいもの（border-radius、box-shadow、gradient）ですが、中には少し複雑なもの（transform、box-reflect）もあります。全体として、最終的な成果物にはかなり満足しています。完璧ではありませんが、画像を使わずに実現できるものとしてはほぼ完璧に近いものだと思います。

Louis Harboeは異なるアプローチを取り、メールや天気予報（iPhoneの標準アプリ）といったiOSの標準アイコンをCSSでレンダリングしてみることにしました。その結果は驚くほど素晴らしく、こちらからご覧いただけます。

以下のデモは、様々なCSSテクニックを用いて作成されています。角丸、影、グラデーション、RGBA、疑似要素、変形などはほんの一部です。これらの多くは、westcivのツールやBorder Radiusなどの便利なツールによって生成されました。これらのテクニックを組み合わせることで、わずか数行のコードでリッチなグラフィックを作成できます。以下にいくつか例を挙げます。

連絡先アイコンでは、シルエットアイコンに5つの異なる図形を使用しました。頭は角の丸い長方形、首は別の長方形、胴体は歪んだ半円です。肩から首にかけての曲線を表現するために、これらの図形の上に2つの円を配置しました。

天気アイコンには、太陽の背後から複数の光線が放たれています。これらの光線はそれぞれ、両端に向かって透明にフェードアウトするグラデーションを持つ細長い長方形です。-webkit-transform:rotate を使って、各長方形を異なる角度に回転させました。iTunesアイコンにも同じ効果を使用しました。

iDiskアイコンにクラウドアイコンを配置するために、角丸四角形の上に2つの円を重ねました。大きい方の円には、四角形の直前で途切れるグラデーションが施されています。

印象的な。