1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Painterなどが最大91%OFFのVEGAS&Corel全製品値下げキャンペーンが開催中!

Painterなどが最大91%OFFのVEGAS&Corel全製品値下げキャンペーンが開催中!

現在ソースネクストの公式サイトでは、PaintShop、WinDVD、Painter、VideoStudio、CorelDRAWなどのCorel全製品とVEGAS Pro、ACID Pro、SOUND FORGE、SPECTRALAYERSなどのVE...

YouTubeでHTTP Error 400が出てサイトにアクセスできない時の解決方法!

YouTubeでHTTP Error 400が出てサイトにアクセスできない時の解決方法!

今回はYouTubeで出くわしたHTTP Error 400(Bad Request)が出て、YouTubeにアクセスできなくなってしまった時の解決方法を紹介したいと思います。この現象が発生してしまう...

日本郵便が無償で提供する年賀状ソフト「はがきデザインキット2019」がおすすめ!

日本郵便が無償で提供する年賀状ソフト「はがきデザインキット2019」がおすすめ!

今年も残すところあと30日間を切り、もうそろそろ年賀状を用意して送らないといけない時期ですね。そこで今回は年賀状作成ソフトについて書きたいと思います。ちなみにみな...

ついにFC2ブログの独自ドメインがSSL対応したのでSSL化しました!

ついにFC2ブログの独自ドメインがSSL対応したのでSSL化しました!

ついにFC2ブログで独自ドメインを使ってるブログもSSLに対応しました。FC2のサブドメインを使っているブログは2017年10月からSSL化されていましたが、有料プランである独自...

CASIO G-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスからしてみた!

CASIO G-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスからしてみた!

今回はCASIOの時計のG-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスから申請した時の流れを書きたいと思います。G-SHOCKタフソーラーの二次電池の場合は普通の時...

KADOKAWAの電子書籍が半額でさらにポイント50倍のニコニコカドカワ祭りがものすごい!

KADOKAWAの電子書籍が半額でさらにポイント50倍のニコニコカドカワ祭りがものすごい!

現在電子書籍ストアのBOOK☆WALKERで開催されているニコニコカドカワ祭り2018でものすごいキャンペーンを実施中です。KADOKAWA作品が19000点が半額でさらに45000点がコイン5...

Amazon.comで不良品が送られてきたのでEMSで返品して返金してもらった話!

Amazon.comで不良品が送られてきたのでEMSで返品して返金してもらった話!

以前に海外のAmazonを有効活用して安く買い物をしよう!という記事で簡単に海外のAmazon.comから輸入する方法を紹介しましたが、今回は海外Amazonで購入したものが不良品だ...

総額350ドル!有料ソフト8製品のライセンスキーを無料配布するキャンペーンが実施中!

総額350ドル!有料ソフト8製品のライセンスキーを無料配布するキャンペーンが実施中!

WonderFox Soft, Inc.は同社製品である新しいWonderFox HD Video Converter Factory Proを含む合計8製品のライセンスキーを無料配布するWonderFox 2018 Back to School Par...

Chromeのタブを休止させてメモリ消費を抑えられる拡張機能「The Great Suspender」を使おう!

Chromeのタブを休止させてメモリ消費を抑えられる拡張機能「The Great Suspender」を使おう!

みなさんもよく使っているであろうブラウザのChromeですが、タブを沢山開いているとメモリの消費量がすごいことになることがよくありますよね。そんな時におすすめなのがCh...

無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

今回はWindows・Macどちらでも使える無料で使える3DキャラメイカーのVRoid Studioを紹介したいと思います。3D制作の知識がなくても誰でも簡単に自分だけのオリジナル3Dのキ...

NetaGear RSS News

Now Loading

Article

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

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

MENU

NetaGear

Pure Css Design

Access Ranking

Now Loading...

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

Amazon

Now Loading...