CSSで描くスペクタクル！「ドラ○もん 3D」

2013-02-06 15:31

この記事は約 4 分で読めます。

CSSで3Dにチャレンジする「ぷるぷる！飛び出す？！CSSでテキストを3Dっぽくしみた！」ではいくつか反響を頂きました。そして、その中でも気になったのが・・・

追記：2013-02-06 20:10 | 同時上映が決まりましたのでお知らせします。
■詳細はこちら↓

ぷるぷるしてたw 何枚も重ねたら面白そうだなぁ。('A')っ｜ぷるぷる！飛び出す？！CSSでテキストを3Dっぽくしみた！ :. SQUEEZE .: squeeze.jp/blog/web-desig…
— すしぱくさん (@susipaku) 2013年2月6日

それでは・・・
just-do-it

まずは、何枚も重ねたような絵の素材が必要です。「街並みのシルエットを何層にも重ねて」など色々と考えていましたが、なかなかしっくり来ません。
そこで思い出したのがこれ↓
・CSSで絵を描く！？今日から作れる達人のコツをご紹介 | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

『よし！キャラを描こう！』

まずは2D ORAEMON

なかなか良いできです。
「box-shadow」「border-radius」など駆使して描きました。
（※CSS3に対応した最新のブラウザでご覧ください。）

さらに3D ORAEMON

CSSで描くスペクタクル！「ドラ○もん 3D」の完成です。
（なんとなく立体的に見えませんかね？(汗)）
パーツを4層に分けて、左右の移動距離を奥から2px、4px、6px、8pxと変える事で実現しています。原理はこちらの記事「ぷるぷる！飛び出す？！CSSでテキストを3Dっぽくしみた！」をご確認ください。

いかがでしたでしょうか？スペクタクルは描けていたでしょうか？以下のfacebookコメントやシェアから感想やご意見、ご指摘などいただけると嬉しいです。よろしくお願いします。

同時上映 3D ORAMI

さらに、以下のようなリクエストをいただいたので同時上映を追加しました。htmlはそのままで、CSSのみ変更しました。「jsdo.it」では、「フォーク」といって投稿されたコードをもとに、自分なりのアレンジを加えて新しい作品をつくることができます。ぜひ、ドラ○もんやドラ○ミをアレンジしてみてください！
※兄妹の共演はこちらをご覧ください。http://jsdo.it/squeezejp/4Zmu

うむ、許可する！（違ドラミちゃんはまだですか〜？ RT @squeezejp: #3Dプルプルというジャンルを確立したい所存ですｗ RT @actywav もっと3Dプルプルくれw
— あくちーさん (@actywav) 2013年2月6日

IE対応について

連続してCSS(CSS3)を使った記事を投稿していますが、その中でいくつかIE対応についてのご指摘をいただきました。
IE独自のfilterなどを利用すれば、ご紹介したもののいくつかはIEに対応可能です。
ですが当ブログをご覧の方は、Web関係の方が多くIE以外のブラウザをご使用だと思い対応していませんm(_ _)m

今後もSQUEEZEでは、みなさまのアイデア、デザインの源泉となるような記事をお届したいと思っておりますので、技術的な部分は深く言及しません。

技術的な部分は、より詳しいサイトが多数ありますので、そちらを参考に当サイトのアイデアにアレンジを加えていただけると嬉しいです。

【CSS3のIE対応参考記事】