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

すごいっすね

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

こいつ・・・動くぞ！

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

すごいですね～
IEもすごいですがｗｗｗ

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

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

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

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

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

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

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

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

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

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

うーん。Google Chrome 強いなｗ

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

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

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

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

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

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

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

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

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

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

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

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

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

すげー

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

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

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

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

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

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

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

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

SVG使えよ

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

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

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

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

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

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

ソースはソース！！
どうやって書いてるの？

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

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


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

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

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

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

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

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

rasaitoの再来や～

IE6だと原型のこらないです（笑）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

凄い！の一言です！

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

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

おめでとう！

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

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

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

　　　　 /: : : : : __: :/: : ::/: : :／/: : :/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　　 ヾ　丶
　　　　　"~､ｿ:: :い:: :　　　　　＼_　　ノ　,　　　 ヾ　丶

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　　　　　　ヾｼヾ⌒ｼヾ-‐ヽ
　　　　 ー丿　　　　　　　　　 ヾヽ
　　 　ｼ 　　　　　　　　　　　　　,,,α
　　ξ　　　　　　　　　　ゞシヾ"　　ヽ　　　　　　　　　,,,....,,,､､...,,,....,,
　　!　　　　　　　　　　 彡　　　　　　 ヽ:::　　　　　..i'´.　　　　　　 　ヾ'''､､､,,,
　　 ｼ　　　　　　　　　　彡　　　　　　　,j:::　　　..,／ヾ,　　　　　　　　　　　 ヽ
　　　!ｼ　　　　　　　　　,,彡　　　　　　 :ｼ　　,;''''　　　ヾ　　　,___　　　　　　　ヽ
　　　　j　　,-‐-､　　　i　　　　ッ三ﾐ:;j i､'　　j-‐ 　　　｀, , ‐'' =　)　　　　　　　ヽ:
　　　 　し { !⌒- ヽ!　j　　　　　‐-‐'j　ヽ､...'　　　　　 　'　 .,_//,　　　　　　　　!;::
　　　　　ヾ丶｀-'　　! !　　　　　　　 {__,__,!'　　　　　　　　　-‐'　ヾ　　　　　 　ﾉ:::
　　　　　　,ヾ　　'　 ､　　　　　　　,'　 ....,)　　　　　　　　::　　　　　ヽ　　　　　ﾉ::::::
　_...-‐‐'''´　:::　　　　　　　　　　　　´::( 　　　　　_...　´　　　　　　　ヽ　　　 /:::::::
　　　　　　　 ::　　　　　　　　　　　　　 !　....　-‐´　　　　　　　　　　 ヽ 　 /:::::　　　　 __,....,,-‐-､
　::::.　　　　　 　ヽ　　 !......:-‐ー､　,,,,,,;;;ヽ ＿_ ...-‐､　　　　　::　　　　　｀ヽ-､___,--/'´　,､　　 ,　｀ヽ､
　　　　　　　　　　　　!:::,´´´´´:::::｀"""´:::::::::::::::;;;;;;;;ヽ､　　　 ;::　　　　　　　　　　　ヽ-‐' !　 ./　　 iヽ
　　　　　　　　　　　　 　　　　　　　　　　　　::::::::::::;;;;;;;;i　　　;::　　 ;　　　　　　__,,,　　　　｀､丿　./　　)
　　　　　　　　　　　::::　　　　　　　　　　　　 ´´´::::-´::ヽ:::　 l::　　;　　　　-‐´　　..,;;;;　　　 ヽノ､ 　/
　　　　　　　　　　 ::::　　　　　　　　　　　　　　／´　　　　　　!::　 ｊ::　　

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

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

CSS3だけで描画とはすごい

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

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

IE8のオチ

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

IEでもちゃんと表示されるじゃないか！
いいかげんにしろ！
（笑）

ドラえもんCSS3がバリデーションエラー起きてますよヽ(；▽；)ﾉ

FC2の解析のタグで <div align="right"> ダメって言われているので <div style="text-align: right;> にすれば解決だとおもいますが(⌒-⌒; )

IE11だと火狐と似たような表示になる(但し眼は動かない模様...)
edgeだとIE11とほぼ同じ表示で眼は動くのだが...縦に動くと横に灰色の線が入る...参考までに↓
https://twitter.com/yorozuya61377/status/996764981659025408