1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Alexa(アレクサ)を使って出前館で注文すると10000円キャッシュバック!

Alexa(アレクサ)を使って出前館で注文すると10000円キャッシュバック!

現在、全国2万店以上の店舗から簡単に注文・デリバリーできる総合サイトの出前館では、アマゾンのAlexa(アレクサ)における出前館のAlexaスキルを使って注文した場合、初回...

Kindle Unlimitedが3ヶ月249円で電子書籍が読み放題のキャンペーンを実施中!

Kindle Unlimitedが3ヶ月249円で電子書籍が読み放題のキャンペーンを実施中!

現在AmazonではKindle Unlimited(通常月額980円)が3ヶ月249円で利用可能になるキャンペーンを実施しています。Kindle UnlimitedはAmazonが提供する電子書籍読み放題サービ...

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

現在AmazonではBluetooth対応のスマート体重計・体組成計がなんとクーポンコードを使用することで衝撃の1290円で販売されています。スマート体重計・体組成計はスマホやタ...

Googleが11.11特別価格セールを実施中!Google HomeやChromecastなどが対象!

Googleが11.11特別価格セールを実施中!Google HomeやChromecastなどが対象!

現在、Googleが11.11だけの特別価格セールを実施しています。Google Pixel 4 / 4 XL を購入すると、Google Nest Hubをプレゼントしたり、Google Nest Hubが4,400円引き、Go...

SONY NEXシリーズのダミーバッテリーUSB電源ケーブルを買ってみた!

SONY NEXシリーズのダミーバッテリーUSB電源ケーブルを買ってみた!

私はブログでレビュー記事を書く時に写真はSONY NEX-5Nという今ではだいぶ古いカメラを使っているのですが、最近の悩みはバッテリーがすぐに無くなってしまい、製品の写真...

ダイソーの防滴ワイヤレスBluetoothスピーカー「BTS-032A」を買ったみた!

ダイソーの防滴ワイヤレスBluetoothスピーカー「BTS-032A」を買ったみた!

今回紹介するのは100円ショップのダイソーで販売されているワイヤレスBluetoothスピーカーの防滴仕様です。スマホとなどとBluetoothで連携して、ワイヤレスで音楽などを再...

DearMob iPhoneマネージャーでiTunesを使わず音楽を転送しよう!

DearMob iPhoneマネージャーでiTunesを使わず音楽を転送しよう!

前回はDearMob iPhoneマネージャーでiTunesを使わない簡単に写真を転送する方法について紹介しました。今回の記事ではiTunesを使用せずにDearMob iPhoneマネージャーで簡単...

Auslogics Windows SlimmerでWinSxSフォルダを小さくしよう!

Auslogics Windows SlimmerでWinSxSフォルダを小さくしよう!

今回はAuslogics Windows Slimmerを使ってWindowsの無駄なファイルを整理してSSDやHDDの容量を増やす方法を紹介したいと思います。Auslogics Windows SlimmerにはWinSxSフ...

合計900ドルのソフトウェアをプレゼント!WonderFoxのハロウィンキャンペーン!

合計900ドルのソフトウェアをプレゼント!WonderFoxのハロウィンキャンペーン!

WonderFoxでは、合計900ドル分となる18個のソフトウェアのライセンスコードをプレゼントするWonderFoxハロウィンキャンペーンを実施しています。このキャンペーンは2部に分...

NetaGear RSS News

Now Loading

Article

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

Webデザイン > 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位が表示されます。今ならリンクするだけで簡単に上位に表示されます。