画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた！

今回作成したのは、とある魔術の禁書目録やとある科学の超電磁砲に度々出てくる風力発電＋飛行船です。ただし、飛行船はchromeだけのおまけです。

もちろん、今回も使うものはHTML+CSS3だけで一切の画像やjavascriptは使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。

CSS3で作ったとある科学の風力発電の完成品！

とある科学の風力発電 Demo

注意事項としてはGoogle ChromeまたはSafari、firefox4 Beta12で閲覧してください。Google Chrome,SafariまたはOpera,firefox4 Beta12以外のブラウザではアニメーションが動きません（Operaとfirefox4 Beta12は羽の上にマウスを乗っけると動き出します。）。また、スペックの低いPCで閲覧するとアニメーションによってCPU使用率が急激に上がる恐れがあります。firefoxはアニメーションが動きませんが、それ以外ではきちんと表示することが出来ます。Opera、IE9では一部CSS3に対応してない部分があります。また、IE8以下はCSS3には全く対応していないので構造が崩れてひどいことになります。

Google chromeを入れていない方はぜひこの機会に試してみてください。
→Google Chromeのダウンロード

今回はアニメーションをやりたかったので、風力発電はアニメーションがメインに作ってあります。もちろん、画像は一切使っていないので「とある魔術の禁書目録」のロゴも画像を使っていません。ただし、ロゴを正しく表示するには小塚明朝 Pro Bや小塚明朝 Pro Hといったフォントが必要です。

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

各ブラウザの動作

アニメーションが動くのはChromeだけです。その他のブラウザはマウスを乗っけるとちょっと傾きます。
追記：アニメーションが動くのはchrome,Safari,Opera,firefox4 Beta12以降です。Operaとfirefox4 Beta12は羽の上にマウスを乗っけると動き出します。その他のブラウザはマウスを乗っけるとちょっと傾きます。

静止画として考えると、ChromeとFirefoxは完全に表示できています。Opera、IE9 RCはgradientが使えないのでグラデーションを加えられず、ちょっと薄っぺらな印象です。Operaに至っては背景のグラデーションがかからないので、文字まで見辛くなっています。

最後はいつも通りオチ担当のIE7、8ですが、謎のミサイルが3つ飛んでいる状態ですね。もうなんだか意味がわからないです。

おまけ

おまけとしてChromeだけ飛行船を飛ばしました。飛行船はアニメーションで移動します。これは記事公開前に思いつきで追加したものなのでそんなにしっかり作ってません。

関連作品

とあるぐぬぬの禁書目録 Demo

関連作品としては、とあるぐぬぬの禁書目録 Demoがあります。閲覧時の注意事項としてはGoogle ChromeまたはSafariで閲覧してください。Google Chrome,Safari以外のブラウザではかなり崩れます。Google ChromeまたはSafari以外のブラウザではアニメーションが動きません。また、スペックの低いPCで閲覧するとアニメーションによってCPU使用率が急激に上がる恐れがあります。

今まではブラウザの互換性を重視して、Chromeやfirefoxでは完全に見れるように作ってきましたが、今回のは互換性を維持できませんでした。そんなこんなで今回はChrome or Safari限定になってしまいます。

Pure CSS Design

Pure css design

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

今回の個人的感想

今回のものは、CSSの行数で行ってもドラえもんより少ない500行でした。今回はアニメーションに重点をおいているため、簡単な題材でつくったので時間はそんなに掛かりませんでしたね。アニメーションという意味合いでは、gifアニメーション画像よりもきれいでファイルサイズを軽く出来るのでその点はメリットがあるように思えます。その代わりにどのブラウザでも使えるというわけではないので、CSS3をつかったアニメーションは一長一短ですね。

ぶっちゃけ最近ではSVGとjavascriptでアニメーションしたほうが、もっと複雑なことが可能なのでそっちの方がいいかもしれません。まあ、今回のような回転するだけなら、CSS3を使うのもありかと・・・。もちろん回転させるのは画像の場合ですけどね。

元々CSSはHTMLの装飾するためのもので、本来はこういった使い方をするものではないのですが、CSS3によってデザインの幅が広がったということは間違いない事実です。今回の技術デモでCSSでの新たなアイデアや知見が広がればと考えています。

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