CSSだけでここまでできる！参考にしたいCSSエフェクト10選

HTML/CSSが多くのデバイスに浸透した今、さまざまな表現がCSSでできるようになりました。CSS3から使えるようになったアニメーションをいかし、ホバーアクションやマウスの効果を追加しませんか？

画像を使うよりも手軽に、思い描いた表現ができるかもしれません。

1. CSSだけでグラデーションバー

Sassを使用して、ローディングアニメーションを実装しています。

ローディングアニメーションにGIFアニメを用いる場合が多いですが、それは画像であればブラウザ対応に誤差がないためです。

カスタマイズしやすいように書かれているので、色やサイズを変更して使ってみては？

2. CSSだけで太陽系アニメーション

CSSで太陽系の描画と自転・公転を表現した、大変複雑なCSSプロジェクトです。惑星は回転速度を指定した球体。背景の星もさまざまな速度で動かしており、リアリティを演出しています。

3. CSSだけでマインスイーパ

かつてWindowsOSに搭載されていたゲームである『マインスイーパ』をCSSで復刻。

オリジナルに極力近いUIがCSSで実装されている他、時間のカウントまでできるとは、CSSの力は底しれません。ただしスコアの保持機能はないので改良の余地あり！思わず何回もプレイしてしまう、中毒性のあるゲームです。

4. CSSだけで朝と夜をモチーフにしたトグル

朝と夜をモチーフにしたトグル。状態が切り替わっていることが、よく伝わるUIですね。

処理はチェックボックスを介して行われ、バックエンドにデータを渡すように設計されており、見た目が良いだではなく、実用的なコードです。

5. CSSだけで動く遊園地イラスト

CSSだけで、動く遊園地のイラストを実装しています。ベクターのアイコンやイラストは見慣れていますが、CSSとSVGコードだけでデザインされた全画面幅のイラストは珍しいものではないでしょうか？

このコードは、SVGがサポートされているブラウザでのみ正常に表示されます。計算式を用い、ここまで完成度の高いイラストを作るのは、大変技術の要ることです。

とはいえ、　SVG形式の画像は近年注目を浴びているので、数年後にはWeb上でコードのみでイラストを表示できるようになっていくのかもしれませんね。

6. CSSだけで3Dで作るメビウスの輪

輪廻し続けるメビウスの帯を実装しています。

3D要素とグラデーションを使った直方体の要素に繰り返しのCSSアニメーションをかけました。使い道こそ少ないものの、HTMLとCSSの表現の幅を知ることが出来たことかと思います。

7. CSSだけでカスタムマップを作るシステム

3Dで描画されたキューブが、マウスホバーによって回転します。

JavaScriptを使ったようにしか思えないアプリケーションですが、全てCSSだけで表現しています。

8. CSSだけで作るiOS7のアイコン

CSSだけで、iOS7のアイコンを表現しました。SVGや、イメージファイルは使用していません。細部に至るまで正確に描画されています。CSSだけでもあらゆる描画ができるのです。

9. CSSで作るSlackのローディングアニメーション

Slackのローディングアニメーションを再現しました。HTMLは<div>のみで構成されており、100行以上のCSSでロゴの色やアニメーションを表現しています。

他サービスのローディングアニメーションに応用できそうです。

10. CSSで作る3Dバー

また、バーのサイズはemで指定されておりフォントサイズに基づいて自然に拡大縮小します。CSSの実装はここまで柔軟性のある実装が可能なのです。

（翻訳：Yuri Tanaka）