CSS3だけで色んなモノを10個再現してみた

皆さんこんにちは。
僕は小田 大輔(@hinodeya_pon)と申します。
これからTobiraにて公式ライターとして記事を執筆させていただくことになりました。宜しくお願いします!
始めに少し自己紹介を。

僕は高校1年生で最近は、このメディア「Tobira」の発起人でもある小幡さん(@nagomiobataのもとでライターとして活動したりWEBデザインなどをしています。趣味は音楽鑑賞・映画・ピアノです。岩手在住ですが、2,3か月に1回関東のITイベントやスタートアップ系イベント、アイデアソンに参加しに行ったりしています。プログラミングが結構好きでPHPとJavaScriptでよくWEBアプリを創ったりするんですが、これからはVR(バーチャルリアリティ)とIoT開発と人工知能について深く勉強していきたいと思ってます。

ちなみに趣味は、遠くを眺めること・音楽&映画鑑賞、それからヘタっぴですけどピアノも良く弾きますね。
こんな感じですよろしくお願いします!

メインコンテンツ

さて、

今回はCSSだけで身の回りのいろんなものを再現してみました。
WEB制作などでちょっとしたイラスト代わりに使えそうなものをCSSで表現してみた
ので、デザインのアクセントとして利用したりするのもいいかなと思います。
コードもあわせて掲載しているのでご自由に改変するなり、なんなり好きにお使いください!

1.黒板消し

2.黒板消しをきれいにする機械

3.カジノのコイン

4.スマートフォン

5.ビン

6.学校

7.ペン

8.パン

コッペパンです。

9.顔

10.インベーダー

インベーダーはこちらのサイトのものをコピペして色だけ変えてみました。
text-shadowプロパティでゴリ押ししているようなので、この手法を応用してドット絵の要領でインベーダー以外にも
色んなものが再現できそうです。

この記事を書いた人