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

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。

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

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

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

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

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

Appleです。

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

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

Windowsとか

ジョブズ

ナイキとか。

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

以下よりどぞ。

ecsspert.com(via:Chris Coyier)