• かちびと.net

    画像もJSも使わず、CSSのみでTwitterやApple、マクドナルドなどのロゴを作成、コードを公開しているサイトがありました。ユニークだったのでシェア。よく思いつきますね・・・

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

画像もJSも使わず、CSSのみでTwitterやApple、マクドナルドなどのロゴを作成、コードを公開しているサイト

スポンサーリンク

CSSのみでOperaやIEのロゴを作成したり、
というのを以前はよく見かけましたが、
インスパイアされたようでTwitterや、
Apple、マクドナルドやナイキなど様々
なロゴをCSSのみで作成、コードを公開
してるサイトがありましたよ・・

実用性は置いておいてちょっと面白かったのでシェア。CSS3でこんな事も出来るんですねー。

尚、閲覧ブラウザはChromeかSafariでお願いします。

ecsspert.com


これで画像もJavaScriptも使用せず、CSSのみで書かれたTwitterのロゴです。かなりTwitterですね。


CSS3だけ無効化したらこうなった。

e.g. Apple


Appleです。

リンゴの葉の部分はclip:rect()で切り抜いてるんですね。

.apple9:before {
    clip:rect(0 13px 80px 0px);
}
.apple9:after {
    clip:rect(14px 100px 76px 76px);
    left:-64px;
}

その他いろいろ


Windowsとか


ジョブズ


ナイキとか。

まだ数はさほど無いですけど、ちょっと面白いですねw暇なときにでもコード見てみようかな。

以下よりどぞ。

ecsspert.com(via:Chris Coyier)

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services