1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 画像を一切使わずにCSS3だけで描かれた「ポン・デ・ライオン」がすごい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
ロジクールのSetPointを拡張する「SetPointPlus」で様々な機能を追加しよう!

ロジクールのSetPointを拡張する「SetPointPlus」で様々な機能を追加しよう!

ロジクールのマウスのボタン設定などを行うソフトであるSetPointですが、このSetPointを拡張して様々な機能を追加することが出来る「SetPointPlus」を紹介したいと思います...

日本未発売のコスパ最高Android Oneスマホの「Xiaomi Mi A1」を使ってみた!

日本未発売のコスパ最高Android Oneスマホの「Xiaomi Mi A1」を使ってみた!

前々から気になっていたAndroid Oneを入手したのでレビューを書きたいと思います。ちなみに今回のAndroid Oneスマホは日本では未発売でコスパ最強の「Xiaomi Mi A1」です。...

GearBest.comを使って海外からスマホやガジェットなどを安く買い物をする方法!

GearBest.comを使って海外からスマホやガジェットなどを安く買い物をする方法!

海外からスマホやガジェットなどを安く輸入したいときに便利なサイトのGearBestを紹介したいと思います。日本では売っていないような珍しいスマホやタブレット、周辺機器な...

サイトのデザインをVer3.5にアップデートしました!

サイトのデザインをVer3.5にアップデートしました!

本日よりShopDDのテンプレートデザインをVer3.5にアップデートしました。今回のアップデートでは見た目はあまり変化がないですが、内部コンテンツを大幅に書き直して高速化...

radikoや超!A&G+など様々なネットラジオを録音できるソフト「AnGe4u」がすごい!

radikoや超!A&G+など様々なネットラジオを録音できるソフト「AnGe4u」がすごい!

今はラジオもネット進出している時代で、昔以上にラジオは身近な存在になっています。そんな中でもリアルタイムで聞くのは難しいことも多々あり、録音してあとで聞きたいと...

ブラウザ上で簡単にロゴをデザインできるサイト「DesignEvo」が便利!

ブラウザ上で簡単にロゴをデザインできるサイト「DesignEvo」が便利!

DesignEvoは、誰でも簡単に魅力的でユニークなロゴを創り出すために、4000以上のテンプレートを備えた無料のオンラインロゴ製作サイトです。ブラウザを使ってWebサイト上で...

コピー禁止の保護されたPDFファイルから簡単にテキストをコピーする方法!

コピー禁止の保護されたPDFファイルから簡単にテキストをコピーする方法!

PDFファイルと言えば幅広く使われているファイル形式ですが、中にはセキュリティ保護によって内容をコピーできないPDFも存在します。今回はPDFセキュリティ保護の「内容の...

Amazonプライム特典の「Twitch Prime」で毎月無料でゲームをもらう方法!

Amazonプライム特典の「Twitch Prime」で毎月無料でゲームをもらう方法!

Amazonプライム会員の特典として提供されている「Twitch Prime」では、追加料金なしで毎月ゲームが無料で手に入る会員限定のまったく新しいキャンペーン、「Primeでゲーム...

コスパ最強のdtab d-01JがついにAndroid 7.0へアップデートされました!

コスパ最強のdtab d-01JがついにAndroid 7.0へアップデートされました!

昨年購入したコスパ最強タブレットのdtab Compact d-01JがついにAndroid 7.0 Nougat(ヌガー)へアップデートが開始されました。タブレットの場合は画面も大きいのでスマホ以...

PS3のコントローラーをXInput Wrapper for DS3でパソコンに簡単に接続する方法!

PS3のコントローラーをXInput Wrapper for DS3でパソコンに簡単に接続する方法!

以前このブログではパソコンとPS3コントローラーをBluetooth接続して遊べるMotionJoy!という記事で紹介した通り、MotioninJoyを使ったPS3コントローラーをパソコンで使う...

NetaGear RSS News

Now Loading

Article

画像を一切使わずにCSS3だけで描かれた「ポン・デ・ライオン」がすごい!

pon_de_ling_001.png

今回紹介するのは、画像を一切使わずにhtml+CSSだけでポン・デ・ライオン(Pon De Lion)を描いた作品です。実物を見てもらえば分かると思いますが、ものすごくクオリティが高く、普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。

ポン・デ・ライオン(Pon De Lion)といえば、ミスタードーナツの一番有名なマスコットキャラクターですね。そのポン・デ・ライオンをまったくの画像なしで、html+CSSのコードだけで表現しています。
ちなみにPon De Lion with CSS3の元記事は以下のとおりになっています。

pon_de_ling_005.png

Pure CSS Design - 波堤獅 (Pon De Lion) with CSS3
http://blog.yam.com/hanasan/article/38107158

製作者は台湾の人らしいです。台湾にもこんなすごいCSS職人がいるとは非常に驚きです。なにげに私の作ったCSSドラえもんも紹介してもらっているのでうれしいですが、なんて書かれているのかまったく読めないのが残念です。

當然, Pure CSS Design的精神即是:
「不使用任何一張圖片,僅用HTML及CSS刻畫完成的作品」
「drawn with HTML & CSS3 only, with no images」

どうやら私の作ったサイトのPure CSS Design的な精神に感銘を受けて作ったとか書いてあったらいいな。読めないから分からないけど、たぶんそんなことが書いてありそう。

pon_de_ling_001.png
Pon De Lion with CSS3 Demo

Pon De Lion with CSS3を見て思うのが、本当に画像のように見える。パッと見てこれが画像を一切使わずにhtml+cssでできていると分かる人はいないでしょうね。それくらいすばらしい出来だと思います。

ブラウザ比較


pon_de_ling_002.png
Firefox4,Chrome11,Safari,Opera11,IE9,IE8の比較画像です。CSS3系ではいつもどおりIE8がネタにされるのですが、今回もIE8だけあれですね・・・。

pon_de_ling_003.png
ここからはネタとなるIE7,IE6です。IE7は自殺寸前?IE6は涙と鼻水出てます。

仕掛け


pon_de_ling_004.png
ちょっとした仕掛けとして、顔の上にマウスを持っていくとポン・デ・ライオンの顔が怒った顔に変化します。その他にもchromeはしっぽが動きます。

Pure CSS Design


doraemon_css3_v2_003.png
Pure css design

私が作ったCSSドラえもんなどの過去作品はPure CSS Designの方で公開中です!興味のある人はぜひご覧ください。たまに重い時があるので、そういうときは時間を置いてからアクセスしてください。他の作品の記事は下からどうぞ。

→画像を一切使わずにCSS3だけでとあるぐぬぬの禁書目録を描いてみた!
→画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!
→IE9に対応したCSS3 Draemon Ver2を公開!

今回の個人的感想!




今回紹介したポン・デ・ライオンの出来はすばらしいですね。ポン・デ・ライオンだけじゃなくて背景までつくっているのもすごい。以前紹介したCSS QBもすごかったですが、今回のポン・デ・ライオンも本当によく出来ていると思います。Pure CSS Designのサイトの方に紹介枠の空きが一つあるので、ぜひ入れさせてほしいくらいですね。

それにしても私が作ったCSSドラえもんが日本だけでなく他の国の人にも影響を与えていることを考えると非常にうれしいですね。また、こういった世界的に楽しめるような何か新しいもの、面白いものを作りたいですね。

もし、このようなすごいCSSの作品があったらコメントで教えていただけるとうれしいです。

Related article

COMMENT TO THIS ENTRY

自殺寸前とは、センスありすぎです。

9220

「日本の神人ShopDDの作品みたいに複雑な線を描くには、あと何カ月もかかるだろうなあ」という感じですね。

9221

で?

9222

自慢?

9224

どこがsugoi???w

9226

なんだこれ、本当に画像みたい。
マジですげーな!

9227

http://www.imgtocss.com/

もう知ってらっしゃるかもしれませんが

9230

どうでもいいけどブログパーツ重すぎだろ

重い上に糞レンタルサーバーのfc2使うとか

9231

そう思うのなら見なければおk

9244

Most Popular

Now loading...

Social Links

Sponsored Link

MENU

NetaGear

Pure Css Design

Access Ranking

Now Loading...

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

Amazon

Now Loading...