新着記事一覧

新着記事一覧

ニュース
» 2011年12月20日 18時31分 UPDATE

CSS3だけで描いた「けいおん!」の澪がすごい しかもちょっと動く

アニメ「けいおん!」の澪を、画像を使わずCSS3だけで描いた絵が話題だ。髪や目も少し動く。

[ITmedia]

 アニメ「けいおん!」の秋山澪をCSS3だけで描いた絵がすごいと話題になっている。画像を使っていないのに画像のように見え、しかも髪や目にかすかな動きも付いている。

ah_css1.jpgah_css2.jpg CSS3だけで描いた澪(左)とソース(右)

 描いたのは台湾のWebデザイナー、Reiさん。ほかにも「機動戦士ガンダムSEED」のラクス・クラインリラックマをCSS3で作っている(ブラウザの種類やバージョンによっては正しく表示されない場合がある)。

 ほかにもCSS3を使って絵を描いているWeb技術者がおり、@shop_ddさんはドラえもんや「とある魔術の禁書目録」の回転する風車などを、@TjRusさんはiPhone 4を展示している。CSS3で描いたiPhone 4は、電源ボタンやホームボタンをマウスでクリックしたり、スライドバーをスライドさせることができる。

ah_css3.jpg

 CSSだけで描いた有名企業のロゴを展示しているecsspertというサイトもある。

Copyright© 2016 ITmedia, Inc. All Rights Reserved.

注目のアイコン

注目のアイコン

「ITAN」×「ねとらぼ」コラボマンガ

FEATURES

編集部からのお知らせ:

ご応募お待ちしております。

IMALUという名は「生きてるだけで丸もうけ」というさんまさんの座右の銘から。

“バリュータイプ”の新ディズニーホテル「東京ディズニーセレブレーションホテル」を一足先にチェックしてきました。

ファッションブランド「Black Milk」の水着がすごく……透けてます。

ねとらぼがスマホからも見れる!

過去記事カレンダー

オススメ記事