メイン画像
HEADLINE NEWS

画像を一切使わずにCSS3だけでドラえもんを描いてみた!

doraemon_css3_001.png

昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない?という疑問を抱き実際に作ってみました!

今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。

CSS3で作ったドラえもんの完成品!


doraemon_css3_002.png
CSS3 ドラえもん Demo

最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対応してない部分があります。また、IEはCSS3には全く対応していないので構造が崩れてひどいことになります。

ちなみにGoogle ChromeはCSS3のアニメーションで目が動くおまけ付です!

画像ではない証拠はhtmlとCSSのソースを確認してもらえば分かると思います。まあ、画像と違って右クリックで保存することができないってのも一つの特徴ですかね。どちらにしても、スクリーンショット撮られたら関係ないですけど。。。

各ブラウザの動作


doraemon_css3_003.png

ChromeとFirefoxはCSS3によく対応しておりさすがというべきか、ちゃんと同等に表示できています。Operaはgradientが使えないのでグラデーションを加えられず、ちょっと薄っぺらな印象です。

最後はIEですが、さすがは我らがIEさん!すばらしいオチをつけてくれましたね!
もうIEとかネタでしかないし、早く滅びればいいのにw

作っている途中にも感じましたが、CSS3はブラウザごとに結構挙動が違います。そんな中でもOperaのborder-radiusはちょっと特殊で、口を見てもらえば分かるんですが鋭くなっているんです。最初はもっと口が裂けていて、Operaだけ口裂けお化けみたいになっていたのでものすごく驚きました。

XHTMLの記述とW3Cについて


doraemon_css3_004.png

こんなむちゃくちゃな事をやるってことはhtmlの記述に問題がありそうな気がしますが、その点は全く問題なくXHTML 1.1で製作しています。もちろんW3C Markup Validatorも通りますし、ちゃんと
「This document was successfully checked as XHTML 1.1!」と表示されます。

→W3CでCSS3ドラえもんを確認する

今回のはコンテンツなしのdivタグレイアウトなので通って当たり前なのですが、とりあえずWeb標準で書いていることは確かです。

画像との容量の比較


今回はhtml+CSSで記述しましたが、本来画像ならばどれくらいの容量になるのか調べてみました。用いた画像はGoogle Chromeからスクリーンショットを撮って保存したものです。

この画像との比較を行う意味合いとしては、もともとの容量と画像との容量の差を測ることで、画像を使わずCSS3で描くことのメリットを無理やり探し出すというわけです。

GIF


doraemon_css3_005.gif

ファイルサイズ 33.5KB
画像の中では一番圧縮されていますが、画質がいまいちです。GIFの限界は256色なので画質が低下しており、さらにGIF特有のざらつきがちょっと現れています。

JPEG


doraemon_css3_006.jpg

ファイルサイズ 96.5 KB
こちらのJPEGはフルカラーで作成した場合。フルカラーのため画質は非常によく、きれいなのだが当然のことながら容量が大きくなりました。

PNG


doraemon_css3_007.png

ファイルサイズ 60.2KB
フルカラーでPNGを作成した場合。フルカラーで非常にきれいなのですが、やはり容量が大きくなりました。ファイルサイズと画質を考えると、バランス的にはPNGが画像では一番ですね。

html+CSSの場合


doraemon_css3_008.png

html 2.05KB
CSS 14.2KB

ファイルサイズ 2.05KB + 14.2KB = 16.25KB
html+CSSで作成した場合。さすがに画像を使っていないだけあってか、ファイルサイズは最も小さくなりました。読み込みの速度も速く非常にきれいに表示されます。
※htmlに関してはドラえもんの記述のみを抽出して計算しています。

やはり画像と比較するとファイルサイズはかなり小さくできるようです。画質的にはPNGと同等ですが、PNGの容量はソースコードの4倍ですからね。数が増えればこの差は読み込みに関しても非常に大きく影響を及ぼすことでしょう。

つまり、html+CSSで絵を描くメリットは存在するということです。しかしながら、それを圧縮するための労力と苦労がハンパないので、わざわざ画像を使わずhtml+CSSで書く必要性は皆無ですね。

Pure CSS Design


doraemon_css3_v2_003.png
Pure css design


今回の作品も含め、CSSドラえもんなどの過去作品はPure CSS Designの方で公開中です!興味のある人はぜひご覧ください。近々、もう一つのCSS3作品を公開予定です。

・IE9に対応したCSS3 Draemon Ver2を公開!
・画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!
・画像を一切使わずにCSS3だけでとあるぐぬぬの禁書目録を描いてみた!
・IE10,Opera11に対応したCSS3 Draemon Ver3を公開!

今回の個人的感想


impression_canvas_001.png

今回のCSS3ドラえもんを作ったのは、この馬鹿な企画を通してCSS3のすごさと今後の可能性を皆さんに知っていただけたらと思って実行しました。ぶっちゃけますが、こんなことをするのは明らかに一部の馬鹿か変態のする行為です。

なんせ画像ならimgで貼るだけでできることをわざわざCSSのコードだけで600行近く書くなんて頭がおかしいとしか思えない。作った本人が言うのもあれですが、余程の暇人でない限りCSS3で絵を描くのは人には薦めません。

最初は顔だけの予定でしたのでもっとソースコードが短かったんですが、胴体を加えて影をつけたり細部にこだわり始めたらとまらなくなって、いつの間にか600行にもなっていました。CSSのプロとかならもっと短く書けるかもしれませんが、一介の素人たる私が書くとこんな感じになります。

そんなこんなで今回の企画でCSS3の新たな可能性をみなさんに知っていただけたのなら幸いです。

追記:IE9に対応したCSS3 Draemon Ver2を公開!
追記2:画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!
NetaGear News
Now loading...
COMMENT TO THIS ENTRY
2010 05 04

すごいっすね


2010 05 04

すばらしいです!
変態ではなくて、天才ですね。
CSS3でラクに描画できるソフトって、可能性ないんでしょうか?


2010 05 04

こいつ・・・動くぞ!


2010 05 04

CSS3のすばらしさがとても伝わりました!


2010 05 04

すごいですね~
IEもすごいですがwww

これならIEユーザーへ視覚的にいろいろと訴えられますねw


2010 05 04

一番出来の悪いIEが資格的なweb標準という矛盾を痛烈に感じました。CSS3前途多難ですね。


2010 05 04

まあ、ほんとにナチュラルに著作権侵害する人ですねえ。。。。
小学館はうるさいよ?


2010 05 04

これは本当にすごいですね!


2010 05 04

sleipnirを使っていますが、悲しくなりました・・・


2010 05 04

今度はアンパンマンでお願いします。。


2010 05 04

CSS3ってすごいですね
IEには吹いた
試しにIEで見てみたら目の部分が完全に崩れてた
IE早くなくなればいいのに


2010 05 04

LunaのTridentで見たらすごいことにw

Geckoはまあまあだけど、口がかわいいことにw
それに、右腕がなぜか色が違うww

WebKitは影のグラデーションがおかしいけど、普通。
目も動くしw

うーん。Google Chrome 強いなw


2010 05 05

Safariでの動作確認をしてないのは何故?


2010 05 05

Safari4.0.5でもChromeと同じように表示されるよ
そのぐらい、自分で調べれば?
CSS3対応だって、ブラウザの制作元が表記しているなら
それで済む話だろ。
動作確認する義務は、ここの管理人には無いよ。


2010 05 05

すごいですね...CSS3。
でも、何でドラえもんなんですかね?w
IEはもう消えれば良いのにw
「各ブラウザの動作」のIE見て吹きましたw

初コメです。
下のナビゲーションとかカッコイイですね。
とても気に入りました^^
あと、COMMENT FORMに「プレビュー」設置したら良いと思います。


2010 05 05

凄いです♪
目が動くんですね、可愛らしい(*´∀`*)

私はMac Safariで拝見しましたが、完璧なドラちゃんでした♪


2010 05 05

作成お疲れ様です。
IEは確かにネタでしかないwww


2010 05 05

safariも綺麗に表示されますよw


2010 05 05

これを見てたらAcid2を思い出したわ。


2010 05 05

IE9で治ってたらいいんですけどね。
いまはfirefox使ってます。


2010 05 06

-moz-border-radiusのような、標準によく似た(そして、他のプロパティと組み合わせるととんでもない表示になってしまう)独自拡張を持っていることを、CSS3に対応って言ってしまうのはいかがなものかと。


2010 05 06

興味深い企画でした。 皆さんおっしゃっているように、IEは良いネタになりますね。


2010 05 06

svgが流行らないのは何でだろう?


2010 05 06

すげー


2010 05 06

ここまでできるようになってるんですね。


2010 05 06

IEはネタとして、これからも残って欲しいw


2010 05 06

Safari でも無事に表示され、目玉が動きます。


2010 05 06

何のために!?
というところが感動しました。
しかしIE8のカクカクぶり…
ほんと、滅びればいいのに!!


2010 05 06

ネタとしては面白いけど実際問題
使ってる人口が多すぎて笑えないw


2010 05 06

IE6だと更にカオスなドラえもんが見られますw


2010 05 06

はじめはCSS3だけでどうやって書いてるの?って疑問でしたが
IEの表示を見てやっとCSS3が理解できました。


2010 05 06

windows以外のOSだとどのように見えるのだろう・・・。


2010 05 06

SVG使えよ


2010 05 06

IE8をわざわざ互換モードにして表示乙。
IE8でもちゃんと表示されるよーんwww


2010 05 06

>最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので
なんでこういう、今の&原作ドラえもんファンの神経を逆なでするような事書くかね。本第には関係のない所で損をしてるよ。
でも内容自体は評価しますけどね。


2010 05 06

iPhone(iPod Touch)で確認してみましたが、顔と足だけ真四角でした。でもIE8より全然まともです。IE8は精進が必要ですね。


2010 05 06

>なんでこういう、今の&原作ドラえもんファンの神経を逆なでするような事書くかね。

自分は昔の方が好きだからそっちをイメージしてますって言ってるだけなのに、逆撫でしてるとかどうかしてるな。
今のドラえもんを中傷とかしてるわけじゃないんだから落ち着けよ。


2010 05 06

特定のブラウザを叩いている人も滅びればいいよ。
もちろん不特定でも駄目だけどね^^


2010 05 06

ソースはソース!!
どうやって書いてるの?


2010 05 06

Operaは正式な仕様にならないと真面目に対応しないからなー
だが、そこが良い!


2010 05 06

素晴らしい記事内容ですけど…
コレ、小学館から訴えられたり、警告されたりしないのですかねえ…
これがもしハム太郎の絵だったら、似た絵を独自に描いただけでも警告されるらしいですが。
www.dfnt.net/t/photo/column/use_images.shtml


IEで閲覧するとドラに見えない謎の何かになるからこの場合はセーフ、
といった線引きの有無が巷にあるのかどうかも気になります。
仮にそういうアレが有るとしたら、
あえてcssで描くことで何かしらアレなソレをコレして回避することに利用できるという展開もあるのでしょうね。


2010 05 07

ステキです。こういう時こそ、いいね!ボタン欲しいです。


2010 05 07

IEへのバッシングひどすぎwww


2010 05 07

WindowsのIE及びSafariでは確認しましたがMacでも正常に表示されていました。でも私が使っているプラグインがWin IEでしか機能しないため普段は Win IE派な私です。


2010 05 07

IEがこんなに不甲斐ないなんて知らなかった!! IEもう使わないw


2010 05 07

IE9 では両肩が崩れて、グラデーションと影がなくなって表示されるようです。
それ以外は大丈夫そうですね。
まだ Platform Preview 版の IE9 なので正式リリース時にはどうなるかわかりませんが。


2010 05 07

rasaitoの再来や~


2010 05 07

IE6だと原型のこらないです(笑)


2010 05 07

おれクロームだが左うざい


2010 05 07

結構、影響力強そうなサイトなのでまじめに。

CSS3 はまだ正式勧告されてないし、その点に関して IE は悪くない。
それにたとえば縦書きとなんかは IE だけしかサポートしてないし、粗を見つければいくらでも出てくる。(最近 Webkit がルビ対応したけど)

ま、結局目立つもんを抑えて、無知な世間にアピールできるかどうかで評価は決まっちゃうんだけどね。


2010 05 08

面白いですね。
iphoneからだとこうなりました
http://beebee2see.appspot.com/i/agpiZWViZWUyc2VlchULEgxJbWFnZUFuZFRleHQYvpaNAQw.jpg


2010 05 08

Sleipnir でも角ばるけど、ブラウザとしては普段使いやすいし、
こんなん見れなくても困りませんけどね(笑)


2010 05 08

容量比較ですが、ベクターとラスターを一緒にするのはズレてますね。
JPGやらPNGやらと比較するなら、全ピクセルを1x1のdivで表現するような形式でないと。


2010 05 08

面白いのはわかるけど、滅びれば良いのにとか言ってる人たちが気持ち悪い。誰と戦ってるんだろう。


2010 05 09

>CSS3 はまだ正式勧告されてないし、その点に関して IE は悪くない。

正式に採用されて、IE9で対応したとしてもXPはIE9使えない件・・・


2010 05 09

ブラウザなんて標準のIEで十分じゃないの?
画像で重いのを感じるスペックのPCなんて今は、誰も使ってないよ


2010 05 09

IE系で支障の出る仕様を好む人はIEについて発言しない方が良いと思う。
嫌いなのに必至に批判する為にIEと口にする。
いつの時代も不思議な人たちは居るもので。


2010 05 09

「-webkit-*」や「-moz-*」を使って、ChromeやFireFoxに無理矢理対応するのはかなりずるくありませんか?

それできちんとドラえもんが表示されたところで『CSS3によく対応してる』とは言えないと思いますが。


2010 05 09

やたらIEを擁護したがる人の意図が分からない。マイクロソフトの工作員かなんかなの?結局firefoxやchromeのように先行実装すらしていないブラウザがCSS3が勧告されてすぐに対応できるとは到底思えない。

「-webkit-*」や「-moz-*」はずるいとか言ってる人もいますが、それで表示できているならまだいいんじゃない?それすらできないブラウザがいるのに。正式にCSS3が勧告されればその独自拡張から接頭辞を外すんだしさ。


2010 05 09

> firefoxやchromeのように先行実装すらしていないブラウザがCSS3が勧告されてすぐに対応できるとは到底思えない。

IE8は先行実装してますよ。
-webkit-*や-moz-*を入れるなら、-ms-*入れて、
IE用のCSS3も呼び出すべきだろ



2010 05 09

>IE8は先行実装してますよ。
>-webkit-*や-moz-*を入れるなら、-ms-*入れて、
>IE用のCSS3も呼び出すべきだろ

この人何も知らないんじゃないのか?
IE8がCSS3に対応していないのは常識だろ。
-ms-ってつけてもradiusやgradientやshadowも全く動かんし。

自分の勘違いでサイトが滅びればいいとかどんだけ~。


2010 05 10

>>IE8は先行実装してますよ。
そんな訳無いだろw
IE8にどんな妄想抱いてるんだこいつは。

できるなら実際にIE8で丸いドラえもん書いてこいよw


2010 05 10

「CSS3だけで」って言ってるのに、「-webkit-*」や「-moz-*」を使ってるのがおかしい。

これは、各ブラウザの独自実装であってCSS3じゃ無いでしょ。


2010 05 10

>>「CSS3だけで」って言ってるのに、「-webkit-*」や「-moz-*」を使ってるのがおかしい。

じゃあ他のCSS3の記事を紹介しているサイトにでも行って
「これは接頭辞がついているからCSS3じゃない、おかしい」
と、馬鹿みたいに騒いでくればいいんじゃない?

どこのサイトのCSSS3の記事だってほとんど接頭辞ついてるし、
世間的にはそれがCSS3として扱われている。


2010 05 11

ベクターでいいならSVGのほうがいいのでは?
軽いし。拡大縮小思いのまま。


2010 05 11

なぁ、作者は今の時点のCSS3で何が出来るか書いているだけだろう?
今まではCSSと言えど直線を描くまでがデフォルトだった。
「今後はこういう事も出来るようになるよ」って、ただそれだけだろう?もうちょっと穏やかにみようや。
IEに関しては現状できなくてもIE9からの実装を目指しているんだし、あくまで【現段階】でこうなるって話じゃね?


2010 05 11

まず、CSS3 ってのはモジュール化されてるんだから、「CSS3 に対応」って発言自体あまり正しくない。
本当に CSS3 の全部のモジュールに対応してるならいいけどさ。

このドラえもんがカクカクなのは、CSS Backgrounds and Borders モジュールの「border-radius」系に対応してるかどうかって局部的な話だろ。
もともと、Mozilla が先行実装して、そのあとに仕様に取り込まれることになりそうなものなんだから、この件で IE を責めるのは馬鹿な気がするな。


2010 05 11

コメ欄見てると、世の中どれだけ馬鹿が多いかわかるな。
SVGがどうとか、容量比較でベクターとラスターを一緒にするのはズレてるとか、どんだけ読解力ないんだよ。はてブのコメントの方がよっぽどまとも。


2010 05 12

著作権うんぬん言ってるお利口バカ、
接頭辞がついてるからCSS3ではない原理主義者のバカ
SVGと比べろとか、知識ひけらかしバカ

世の中バカだらけだな、良いもの見させてもらったよ


2010 05 17

凄い!の一言です!


2010 05 17

スゲェ
正直、アンタ凄いよ!


2010 05 18

おお~
感動してしまいました。
趣味で絵に携わっていますが、
CSSでここまで可能とは。

おめでとう!


2010 06 24

長いものに巻かれるのは嫌いではないですけど
よい技術が世に出にくくなっているのならちょっと
考えちゃいますね。
ただ、私初心者な物でドラちゃんが綺麗に表示されると
パソコンを使う人たちにどういう恩恵が生まれるのかが
よくわからなくて...
初心者をうならせるほどの破壊力がないと
歴史の更新はゆるくなっちゃうんだろうなぁ、
私みたいな初心者のせいで。


2010 07 03

ここにswfものせて欲しかった。おそらくCSS3と同様のサイズになったと思いますよ。


2010 08 13

「-webkit-*」や「-moz-*」が認められるのならIE用にexpressionやbehaviorやfilterをつかうのもOKですよね?


2010 08 13

     /: : : : : __: :/: : ::/: : ://: : :/l::|: : :i: :l: : :ヽ: : :丶: : 丶ヾ    ___
     /;,, : : : //::/: : 7l,;:≠-::/: : / .l::|: : :l: :|;,,;!: : :!l: : :i: : : :|: : ::、  /     ヽ
    /ヽヽ: ://: :!:,X~::|: /;,,;,/: :/  リ!: ::/ノ  l`ヽl !: : |: : : :l: :l: リ / そ そ お \
   /: : ヽヾ/: : l/::l |/|||llllヾ,、  / |: :/ , -==、 l\:::|: : : :|i: | /  う う  前  |
.   /: : : //ヾ ; :|!: イ、||ll|||||::||    ノノ  イ|||||||ヾ、 |: ::|!: : イ: ::|/   な 思 が
   /: : ://: : :ヽソ::ヽl |{ i||ll"ン    ´   i| l|||l"l `|: /|: : /'!/l    ん う
 ∠: : : ~: : : : : : : :丶ゝ-―-      ,  ー=z_ソ   |/ ハメ;, :: ::|.   だ ん
   i|::ハ: : : : : : : : : : : 、ヘヘヘヘ     、  ヘヘヘヘヘ /: : : : : \,|.   ろ な
   |!l |: : : : : : : : :、: ::\    、-―-,      / : : :丶;,,;,:ミヽ   う  ら
     丶: :ハ、lヽ: :ヽ: : ::\__  `~ "      /: : ト; lヽ)   ゝ
       レ `| `、l`、>=ニ´        ,  _´ : :} `   /
         ,,、r"^~´"''''"t-`r、 _  -、 ´ヽノ \ノ   /    お ・
       ,;'~  _r-- 、__     ~f、_>'、_         |  で  前 ・
      f~  ,;"     ~"t___    ミ、 ^'t         |  は  ん ・
      ,"  ,~         ヾ~'-、__ ミ_ξ丶     |  な  中 ・
     ;'  ,イ ..          ヽ_   ヾ、0ヽ丶    l         /
     ( ;":: |: :: ..          .`,   ヾ 丶 !    \____/
     ;;;; :: 入:: :: ::      l`ー-、   )l   ヾ 丶
     "~、ソ:: :い:: :     \_  ノ ,    ヾ 丶


2010 08 13

反論できないからAAで誤魔化しているのですね、わかります。 


2010 08 15

ファイルサイズが小さいのは素晴らしいですけど、表示する際のレンダリングはやはりCPUとメモリを喰うのでしょう?


2010 08 30

すごいですね!!
ここまでできるなんて、素晴らしいです!!
IE…見て笑いました。早く滅びて欲しいです。


2010 08 30

CSSの本気ってすごい・・・乙です


2010 09 04

こんなこっといいな~♪でっきたっらいいな~♪


2010 10 03

今IE6使ってるが、これ見てもう終わってることを理解したww
chromeいいなーとか思うけどやっぱりIE6やめられねぇ


2010 10 14

感動しました。
本当にIEなくなってほしいです。


2010 11 13

>-とりあえず互換対策までしているようなので-
>IE系で支障の出る仕様を好む人はIEについて発言しない方が良いと思う。
>嫌いなのに必至に批判する為にIEと口にする。
>いつの時代も不思議な人たちは居るもので。

Webサイト制作者側的に手間がかかって困るんだよ。
無駄に画像とかも使いたくないし、Javascriptをいちいち使って多様したくないし。

滅びるかは別として、早く他のブラウザ同等の性能くらいにはなって欲しい。


2011 02 02

http://jqueryui.com/themeroller/
このページをいろいろなブラウザで見てみると
IEがかなりきついことがわかる
(高速でさまざまなブラウザに対応したJavaScriptライブラリ)

アニメーションになってない

対応してない機能が多いと
スクリプト側でやる処理も増えて
重いの不の連鎖が起きる

悪いことはいわんからIEやてめちゃんとしたブラウザつかってけれ


2011 02 21

ie9ではドラえもんの腕だけカクカクになるぞ!!。


2011 02 21

ie5.5で見るとすごいことになる!!


2011 03 21

       ヾシヾ⌒シヾ-‐ヽ
     ー丿          ヾヽ
    シ              ,,,α
  ξ          ゞシヾ"  ヽ         ,,,....,,,、、...,,,....,,
  !           彡       ヽ:::     ..i'´.        ヾ'''、、、,,,
   シ          彡       ,j:::   ..,/ヾ,            ヽ
   !シ         ,,彡       :シ  ,;''''   ヾ   ,___       ヽ
    j  ,-‐-、   i    ッ三ミ:;j i、'  j-‐    `, , ‐'' = )       ヽ:
     し { !⌒- ヽ! j     ‐-‐'j ヽ、...'       '  .,_//,        !;::
     ヾ丶`-'  ! !        {__,__,!'         -‐' ヾ       ノ:::
      ,ヾ  '  、       ,'  ....,)        ::     ヽ     ノ::::::
 _...-‐‐'''´ :::            ´::(      _... ´       ヽ    /:::::::
        ::              ! .... -‐´           ヽ   /:::::     __,....,,-‐-、
 ::::.       ヽ   !......:-‐ー、 ,,,,,,;;;ヽ __ ...-‐、     ::     `ヽ-、___,--/'´ ,、   , `ヽ、
            !:::,´´´´´:::::`"""´:::::::::::::::;;;;;;;;ヽ、    ;::           ヽ-‐' !  ./   iヽ
                         ::::::::::::;;;;;;;;i   ;::   ;      __,,,    `、丿 ./  )
           ::::             ´´´::::-´::ヽ:::  l::  ;    -‐´  ..,;;;;    ヽノ、  /
           ::::              /´      !::  j::  


2011 09 25

CSS習ってまだ2週間です
以外に簡単にドラえもんでができました
ドラえもんの体もできました。
あとクッキーていうやつもCSS3でできました。
クッキーは自身があります得に目がよくできました
モンスターボールもCSS3でできました。
本とCSS3ってすごいですよね。
何でもできますね。


2011 10 12

IE9ではFirefoxと同じような表示になりました。


2012 03 26

CSS3だけで描画とはすごい

しかしまあさすがIE8!これはひどい

ちなみにIE9ではOperaと同じ表示になりました。
ChromeとFirefoxは微妙に違いますがよく表示されています。

IE8のオチ


2012 07 18

新たな可能性がどんどん広がっていって見ているだけでも非常に楽しいです。


COMMENT FORM
 

画像を一切使わずにCSS3だけでドラえもんを描いてみた!のトラックバックURL

この記事にトラックバックする(FC2ブログユーザー)

 WebサイトやブログのデザインするCSS。その最新バージョンとなるCSS3を使って、裏技shop DDの中の人が画像を...
2010.05.05.Wed .No119 / テンプルナイツ 宮殿騎士団

最近、HTML と CSS を使い、Opera のロゴや、ドラえもん、アンパンマンを描画するといったネタをしばしば目にします。例えば HTML と CSS の表現力を利用すれば SVG のロゴを描画することもできます。 HTML と CSS を用いた SVG のロゴ border-radius による角丸や transf...
2010.06.16.Wed .No120 / ヨモツネット[日記]
prev top next


Pure CSS Design

Google Search Box


認証コードを入力してください。

Blog Status

裏技shop DDが雑誌に載りました!

GetMoney!にチャレンジ中!!!
現在開始320日目1024045ポイント
興味がある人はここから

メールアドレス
連絡はこちらに!タレこみも募集中!
Twitterアカウントはこちら

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位50位が表示されます。今ならリンクするだけで簡単に上位に表示されます。

ブログ検索

Now loading...

Download Status : Completion

Download Status : Now loading...

ブログパーツ