ネット・PC

TwitterやNikeなど有名なロゴをCSS3のみで再現


Javascriptやjpg、png等の画像を全く使わず、CSSのみを使用して有名なロゴを再現したサンプルとCSSコードの紹介です。複雑な形や微妙なカーブ、アニメーションを使用しているものなど、なかなか凝ったロゴも綺麗に再現されています。

1.Twitterのロゴ。複雑な鳥の形状を再現。
How to draw the Twitter logo with 100% CSS. No javascript! No images!

2.Atariのロゴ。アニメーションでピンボールゲームも再現しています。
How to draw the Atari logo with 100% CSS. No javascript! No images!

3.マクドナルドのロゴ。
How to draw the McDonald's logo with 100% CSS. No javascript! No images!

4.ありがとう。スティーブ・ジョブズ
Thank you Steve Jobs

5.BPのロゴ。2001年にBritish Petroleum(ブリティッシュ・ペトロリアム)から略称であったBPが正式な名称になっています。
How to draw the BP logo with 100% CSS. No javascript! No images!

6.1976年〜1998年頃まで使用されていた虹色をしたアップルのロゴ。ちょっと懐かしいですね。
How to draw the Apple logo with 100% CSS. No javascript! No images!

7.2008年頃まで使用されていた水滴が素敵なペプシのロゴ。
How to draw the Pepsi logo with 100% CSS. No javascript! No images!

8.Windowsのロゴ。色の濃淡が良い感じになっています。
How to draw the Windows logo with 100% CSS. No javascript! No images!

9.Nikeのロゴ。
How to draw the Nike logo with 100% CSS. No javascript! No images!

10.Magentoのロゴ。eコマース用のCMSです。
How to draw the Magento logo with 100% CSS. No javascript! No images!

11.アディダスのロゴ。
How to draw the Adidas Originals logo with 100% CSS. No javascript! No images!

12.アドビのロゴ
How to draw the Adobe logo with 100% CSS. No javascript! No images!

ソース:How to draw the Twitter logo with 100% CSS. No javascript! No images!

CSS3 スタンダード・デザインガイド

関連記事

神秘の調和、アップル社のプロダクトデザインに隠された「黄金比」 - DNA

ライバル企業同士のロゴを融合させたアート作品「Brandversation」 - DNA

有名企業のロゴをミックスしてみたら、意外とおもしろい仕上がりに - DNA

あの有名なバットマン・ロゴの進化がよくわかるイラストとムービー - DNA

HTMLやCSSで「Center」ではなく「Centaur」と書くとこうなるはず、というスクリプト「text-align: centaur;」 - DNA

この記事をブックマーク/共有する


前後の記事

DNAをこれからもよろしくお願いします!

Facebook上のコメント一覧

Twitter上のコメント一覧