1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Facebookのいいね・シェア数が表示されなくなったので修正しました!

Facebookのいいね・シェア数が表示されなくなったので修正しました!

先日から記事のFacebookのいいね数(シェア数)の自作ボタンの数が表示されなくなっていることに気がつきました。最初は一時的なサーバーの問題かと思ったのですが、数日経っ...

FLEXISPOT CPU冷却ホルダー CH1Bでデスクの天板からPCを吊るそう!

FLEXISPOT CPU冷却ホルダー CH1Bでデスクの天板からPCを吊るそう!

前回の記事のFLEXISPOT 電動式昇降デスク E3シリーズをより良く使えるようにするために、今回はオプション的なパーツである「FLEXISPOT CPU冷却ホルダー スタンディングデ...

Gmailのメールを一括削除する方法!(スマホ・PC両方に対応)

Gmailのメールを一括削除する方法!(スマホ・PC両方に対応)

Gmailのメールを整理しようと思った際に、一つ一つメールを選択して削除するのはものすごく大変なので、特定のメールを一括選択して削除をしたいですよね。ですが、Gmailの...

最強のPCデスク!FLEXISPOT 電動式昇降デスク E3シリーズを使ってみた!

最強のPCデスク!FLEXISPOT 電動式昇降デスク E3シリーズを使ってみた!

今回は最強のPCデスクであるFLEXISPOT 電動式昇降デスク E3シリーズを紹介したいと思います。このFLEXISPOT 電動式昇降デスク E3シリーズはなんと電動式で高さを調節可能な...

ダイソーのLANケーブル延長コネクターを買ってみた!

ダイソーのLANケーブル延長コネクターを買ってみた!

今回紹介するのはダイソーで売っているLANケーブル延長コネクターです。LANケーブルを少しだけ延長したい場合、長いLANケーブルを買い直すのは少しもったいない気がします...

アンインストールできないソフトをきれいに削除できる「GeekUninstaller」!

アンインストールできないソフトをきれいに削除できる「GeekUninstaller」!

今回紹介するのはソフトウェアのアンインストールをサポートしてくれるソフトのGeekUninstallerです。普通にアンインストールする際にも使えるのですが、このソフトの良い...

様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利!

様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利!

今回紹介するのはサイトのFaviconを様々なデバイスに対応した状態で一括変換してくれる「Real Favicon Generator for all platforms」です。スマートフォンのiOS/Android、...

プロ用動画編集ソフトのVEGASシリーズが最大90%割引のキャンペーンを実施中!

プロ用動画編集ソフトのVEGASシリーズが最大90%割引のキャンペーンを実施中!

現在ソースネクストでは、全製品が衝撃プライスのThe Chance Ultraキャンペーンとして、プロ用映像制作ソフトの最新版となるVegas Pro 16シリーズや知識がなくても作曲可能...

Windowsで画像ファイルのサムネイル(縮小表示)が表示されない時の解決方法!

Windowsで画像ファイルのサムネイル(縮小表示)が表示されない時の解決方法!

今回はWindowsを使っていて画像ファイルのサムネイル(縮小表示)が白くなって正常に表示されない問題が発生したときの解決方法を紹介したいと思います。先日スクリーンショ...

NetaGear RSS News

Now Loading

Article

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

 html+CSS+javascript 
css_Wind_Electricity_000.png

先日の「CSS3 ドラえもん ver2」に引き続き、本日もCSS3の記事です。今回は画像を一切使わずにHTML+CSSでいろいろなものを作ってみようという企画の第3弾です!

だいぶ前のことになりますが、CSS3ドラえもん公開後の1ヵ月後にTwitter 'Fail Whale'という、CSSだけでTwitterのくじらを描いた猛者がいるという記事を目にしました。このくじらに触発されて今度はアニメーションに重点を置いたものを作ってみようと思い、実際に作ってみました。
doraemon_css3_008.png

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

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


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


css_Wind_Electricity_001.png
とある科学の風力発電 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のソースを確認してもらえば分かると思います。まあ、画像と違って右クリックで保存することができないってのも一つの特徴ですかね。どちらにしても、スクリーンショット撮られたら関係ないですけど。。。

各ブラウザの動作


css_Wind_Electricity_003.png

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

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

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

おまけ


css_Wind_Electricity_005.png

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

関連作品


gununu_index_css3_023.png
とあるぐぬぬの禁書目録 Demo

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

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

Pure CSS Design


doraemon_css3_v2_003.png
Pure css design


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


今回の個人的感想




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

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

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

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

Related article

COMMENT TO THIS ENTRY

これすげーな!
画像なしで、全部html+CSSで書かれているなんて驚き

9043

chrome最強伝説!
Opera(笑)

9044

Firefox3.6でも、ぎこちない(コマ送り)でアニメーションすることを確認しました。
また、chromeの現行バージョン(9.0.597.107)では「禁書目録」の文字が上方へ数pxずれます。
念のため、ご報告まで。

9045

↑firefoxってアニメーションしなくね?たぶんマウスを乗っけた時に少し回転するやつはアニメーションじゃないと思う。

9046

Firefox4.0 Beta12もぎこちないアニメーションしますね。
私の環境ではIE9もFirefoxも文字がずれるけどフォントのせいでしょうか。

9047

字がずれるというのはtwitterでも報告が入っています。正しく表示するには、とある魔術の禁書目録のロゴで実際に使われている小塚明朝 Pro Bや小塚明朝 Pro Hといったフォントが必要です。これが入ってないとずれてしまうようですね。

firefox4でのずれはフォントの問題ではないようです。現在調査中です。

9048

アンドロイドからですが、きちんとアニメーションまで完璧に動作しました。
CSS3に対応しているんですかね

9049

Operaとfirefox4 beta12以降でのアニメーション動作を追加しました。羽の上にマウスを乗っけると羽が回転し始めます。

私はアンドロイド端末を持っていないので動作確認をしていないのですが、webkit系のブラウザならアニメーションまでしっかり動くと思います。

9050

safariだけど飛行船飛んでました

9052

やはりすごいですね…

CSS3にはほんと驚かされます

9059

回る向きが逆、って事は無いんですよね。
自分のPC、ぼろいので・・・

9063

Android2.1 IS04
標準ブラウザで飛行船まで表示します

9066

firefox4でのズレを少し修正しました。firefox4 RCって3.6.8と表示が全然違うのはなぜなんだろう。。。

9068

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

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