【CSS】CSSだけで実装できるハイセンスなイラスト15選！

CSS3になってからCSSの可能性はどんどん広がっていきます。
ページのスピードが重要視される今では、CSSで表現できる部分はなるべくCSSで表現したほうが、JSを多用するよりも軽くなります。

少し前にCSS3だけでできる動きやエフェクトなどを紹介したかと思いますが、今回はイラスト編です。

「イラストなんてSVGで書き出したらええやん！」と思うかもしれませんが、ここは「CSSでもここまでできるんやで！」というところを知っていただきたいなと思います笑

1. CSS Only iPhone 6

See the Pen CSS Only iPhone 6 by Fabrizio Bianchi (@_fbrz) on CodePen.0

CSSだけでiPhone6が作られてます。いやこれどないなっとんねん、というのが第一印象です。他にもちらほらCSSオンリーのiPhone6を見かけたのですが、海外のコーダーの間で流行っているのでしょうか。。。

2. CSS only animated rocket

See the Pen CSS only animated rocket by Eva Lettner (@eva_trostlos) on CodePen.0

ロケットがふよふよしています。Atomっぽくてかわいいですね。個人的にはTopへ戻るボタンでこんなのがあったらついつい押してしまいます。

3. Map marker CSS only

See the Pen Map marker CSS only by Andreas Storm (@andreasstorm) on CodePen.0

マップのピンです。作りはシンプルですが、利用シーンで考えるとぼちぼちあるんじゃないでしょうか。ぽわんぽわんとしているのも可愛らしいですね。よく見るとピンの影まで細かく表現されています。

4. CSS Only 3d Camera Animation

See the Pen CSS Only 3d Camera Animation by Burak Can (@neoberg) on CodePen.0

いやこれどないなっとんねんその2です。
シャッターをきる瞬間、ちゃんと画面がフラッシュします。それからカメラをよく見ると、「CSSCAM」と書いてあります。細かいです。

5. Responsive CSS only Building

See the Pen Responsive CSS only Building by Girish Patil (@girishpatil) on CodePen.0

タイトルを見て「まさか」と思いました。画面の幅によってビルの形が変わります。レスポンシブ仕様の建物です。

6. Mobile menu, CSS only

See the Pen Mobile menu, CSS only by Poppe1219 Web & Backend Developer (@poppe1219) on CodePen.0

またもやCSSでスマホです。ホバーやクリックにもエフェクトが効いているうえに、検索窓をクリックするとちゃんと検索窓が出てきます。

7. CSS only 3d Macbook Air

See the Pen CSS only 3d Macbook Air by Burak Can (@neoberg) on CodePen.0

CSSだけで描かれたMacbook Airです。。何がこの人をそうさせたのか気になるぐらいの出来。。Macへの愛でしょうか。。

8. Walking Mr Elephant. NOW WITH MOVING FEET! CSS only animation

See the Pen Walking Mr Elephant. NOW WITH MOVING FEET! CSS only animation by Fabio (@FabioG) on CodePen.0

歩くゾウさんです。瞬きもします。フッターの上を歩いていたらすごくいいんじゃないかと思いました。こんなのが歩いていたらずっと見てしまいますね。

9. Tiny city

See the Pen Tiny city by Stepan (@stepan) on CodePen.0

CSSで描かれた街です。車も走っていますし、噴水もあります。

10. CSS-Only Cube Pack

See the Pen CSS-Only Cube Pack by David Khourshid (@davidkpiano) on CodePen.0

CSSのみで作られたキューブです。Loading画面でこんな風に動いていたら待つのも苦じゃないですね。

11. Slidin’ Squares Loader – CSS Only Recreation

See the Pen Slidin’ Squares Loader – CSS Only Recreation by Sebastian Inman (@sebastianinman) on CodePen.0

CUBEと同じく、ローディングにこういうのがあると楽しいなと思いまして選びました。わくわく感がありますよね。

12. Pure CSS radial progress bar

See the Pen Pure CSS radial progress bar by Alex Marinenko (@jo-asakura) on CodePen.0

CSSのみで描かれたグラフです。グラフは画像やJSで処理することが多いですよね。人によっては利用できるシーン多いんじゃないでしょうか。

13. CSS Only 3D Bar Graph

See the Pen CSS Only 3D Bar Graph by Tim Ruby (@TimRuby) on CodePen.0

こちらは棒グラフバージョンです。3Dです。

14. Encroachment (CSS-only)

See the Pen Encroachment (CSS-only) by Shaw (@shshaw) on CodePen.

ループするキューブのアニメーションです。面白くてしばらく眺めてしまいました。

CSS Illustration ‘face’

See the Pen CSS Illustration ‘face’ by white pallet (@WhitePallet) on CodePen.0

顔です。顔。ちょっとびっくりしすぎてまじまじとソースを見てしまいました。
ちなみに左側の1～5のボタンを押すと髪型が変わります。

まとめ

いかがでしたか？　この記事を見て、少しでもCSSの可能性が広がってくれたらいいなと思います。
機会があればぜひCSSでのイラストにチャレンジしてみてください。