画像を使わず、HTMLやCSSで作られた凄い作品のまとめ

画像を使わず、HTMLやCSSで作られた凄い作品のまとめ

たまに見かける画像を使わずにCSSの疑似要素やgradient、animation、border-radiusなどを駆使して作られた作品のまとめです。中にはdivタグひとつでできているものや、Flashなどを使用せずにちょっとしたミニゲームができてしまうものまであります。

今までは画像で対応していた角丸やグラデーション背景といったものが少しの記述でできたり、ライトボックスやスライダーといったJSを使っていた機能をCSSだけで実装するテクニックが出てきたりと、CSS3によって様々なことができるようになりました。

Pure CSS Slideshow

Pure CSS Slideshow

Pure CSS Lightbox

Pure CSS Lightbox

Pure CSS accordion

Pure CSS accordion

Pure CSS Tooltips

Pure CSS Tooltips

サポートブラウザのことを考えるとまだまだ案件によっては簡単に導入にするわけにはいかない場合もありますが、今後は上記のようなテクニックが更に普及していくかと思います。

今回は上記のようなものに比べると実用性は低いですが、基本的に画像を使うことなく(ほんの一部画像を使っているものもあります)HTMLやCSSだけを使用して作られた作品をまとめてみました。
「HTMLとCSSだけでここまでできるんだ!」という驚きや単純に見てて面白いというのもありますが、それらをどのようにして実装しているかなど部分的にとても参考になるテクニックが沢山詰まっています。

※一部のブラウザ(特にIE)では上手く表示されないものもあるので、ChromeやFirefoxなどのブラウザ(Chrome推奨)で確認してください。

画像を使わず、HTMLやCSSで作られた凄い作品のまとめ 目次

  1. Appleデバイス
    1. CSS only 3d Macbook Air
    2. Single Element Pure CSS MacBook Pro
    3. Old School Mac – Pure CSS
    4. Title unknown…(MacBook)
    5. Apple Keyboard made via css3
    6. iPhone 4 in pure CSS3!
  2. 動物
    1. Frog
    2. Sheep
    3. Mr. CSS Lion
    4. Title unknown…(ペンギン)
    5. Title unknown…(鳥)
    6. Piggy
    7. Cute CSS3-only animals
    8. Cute animals made with CSS3
  3. アニメ&キャラクター
    1. CSS3 ドラえもん
    2. Pure CSS Totoro
    3. Mario Bros
    4. Full CSS Luigi
    5. CSS 3D Mario
    6. 3D Animated Danbo
    7. CSS3 AT-AT
    8. Star Wars Storm Trooper in pure CSS
    9. Storm Trooper
    10. Darth Vader
    11. Pure CSS3 R2-D2 (no images)
    12. Pure CSS3 Star Wars Lightsaber Checkboxes
    13. ‘K-ON!’ Akiyama Mio
    14. Pon de lion
  4. ロゴ
    1. Dropbox Logo CSS3
    2. PURE CSS WordPress logo
    3. Twitter Logo
    4. Pure CSS Twitter Fail Whale
    5. Logos In Pure CSS
    6. Logo Android
  5. ミニゲーム
    1. CSS3 OF THE DEAD
    2. CSS PANIC
    3. CSS 8puzzle
    4. Pure CSS お絵かきロジック
    5. MAZE – CSS game
  6. その他
    1. Ken’s Street Fighter II with animated sprites
    2. Mona Lisa with pure CSS
    3. CSS Creatures
    4. CSS Factory
    5. Pure CSS Space Shuttle
    6. Radar
    7. Full CSS NES
    8. Reel to reel recorder
    9. CSS Tube Map
    10. Wall Clock in Pure CSS3

1. Appleデバイス

MacBook、iPhoneといったAppleデバイスの作品。
中でもアニメーションを含めて全てHTMLとCSSで作られている「CSS only 3d Macbook Air」とiPhoneだけでなく中のアイコンまでHTMLとCSSで作られている「iPhone 4 in pure CSS3!」が凄いです。

CSS only 3d Macbook Air

CSS only 3d Macbook Air

Single Element Pure CSS MacBook Pro

Single Element Pure CSS MacBook Pro

Old School Mac – Pure CSS

Old School Mac - Pure CSS

Title unknown…(MacBook)

Title unknown...(MacBook)

Apple Keyboard made via css3

Apple Keyboard made via css3

iPhone 4 in pure CSS3!

iPhone 4 in pure CSS3!

目次へ

2. 動物

可愛らしいものやアートな雰囲気で作られた動物の作品。
マウスオンで表情を変えたり、こちらを見てきたりするアニメーションが加えられているものがあります。

Frog

Frog

Sheep

Sheep

Mr. CSS Lion

Mr. CSS Lion

Title unknown…(ペンギン)

Title unknown...(ペンギン)

Title unknown…(鳥)

Title unknown...(鳥)

Piggy

Piggy

Cute CSS3-only animals

Cute CSS3-only animals

Cute animals made with CSS3

Cute animals made with CSS3

目次へ

3. アニメ&キャラクター

こういった作品が出始めてきた頃に話題になった「CSS3 ドラえもん」、髪や瞳の揺れまで再現している「‘K-ON!’ Akiyama Mio」、細かいパーツも全てHTMLとCSSで作成されている「CSS3 AT-AT」、checkboxのcheckedを利用してスイッチのオンオフを再現している「Pure CSS3 Star Wars Lightsaber Checkboxes」など、全体的にクオリティ高いものが多いです。

CSS3 ドラえもん

CSS3 ドラえもん

Pure CSS Totoro

Pure CSS Totoro

Mario Bros

Mario Bros

Full CSS Luigi

Full CSS Luigi

CSS 3D Mario

CSS 3D Mario

3D Animated Danbo

3D Animated Danbo

CSS3 AT-AT

CSS3 AT-AT

Star Wars Storm Trooper in pure CSS

Star Wars Storm Trooper in pure CSS

Storm Trooper

Storm Trooper

Darth Vader

Darth Vader

Pure CSS3 R2-D2 (no images)

Pure CSS3 R2-D2 (no images)

Pure CSS3 Star Wars Lightsaber Checkboxes

Pure CSS3 Star Wars Lightsaber Checkboxes

‘K-ON!’ Akiyama Mio

'K-ON!' Akiyama Mio

Pon de lion

Pon de lion

目次へ

4. ロゴ

Dropbox Logo CSS3

Dropbox Logo CSS3

PURE CSS WordPress logo

PURE CSS WordPress logo

Twitter Logo

Twitter Logo

Pure CSS Twitter Fail Whale

Pure CSS Twitter Fail Whale

Logos In Pure CSS

Logos In Pure CSS

Logo Android

Logo Android

目次へ

5. ミニゲーム

今までこういったちょっとしたWeb上のミニゲームは、FlashでできていたりJavaScriptで作られていたりするものがほとんどでしたが、以下で紹介しているものは見栄えだけでなく動きなどもCSSで作成されているものになります。

CSS3 OF THE DEAD

CSS3 OF THE DEAD

クリックでゾンビを倒すミニゲームで、Chromeでプレイできます。
JSは使用されておらず、動きは全てCSSで作成されています。

CSS PANIC

CSS PANIC

ワニワニパニックをCSSで作成したミニゲームで、同じくChromeでプレイできます。
こちらもJSは使用されておらず、全てCSSで作成されています。

CSS 8puzzle

CSS 8puzzle

8パズルのミニゲームで、JSは使用せずにCSSを使って作成されています。

Pure CSS お絵かきロジック

Pure CSS お絵かきロジック

お絵かきロジックをCSSで作成したミニゲームです。

MAZE – CSS game

MAZE - CSS game

CSSのみで作成されているイライラ棒ゲーム。
普通に難しいです…。

目次へ

6. その他

Ken's Street Fighter II with animated sprites

Ken's Street Fighter II with animated sprites

他のものと違って画像もJSも多用されているんですが、普通に凄いと思ったので紹介。
ストリートファイターのケンをキーボードで操作でき、パンチやキックだけでなく、波動拳などの技も出せます。

Mona Lisa with pure CSS

Mona Lisa with pure CSS

以前に話題になったCSS3のbox-shadowのみで作成されたモナリザ。
HTMLはdivひとつですが、それに対してCSSは7500行以上記述されています。

CSS Creatures

CSS Creatures

CSS Factory

CSS Factory

Pure CSS Space Shuttle

Pure CSS Space Shuttle

Radar

Radar

Full CSS NES

Full CSS NES

Reel to reel recorder

Reel to reel recorder

CSS Tube Map

CSS Tube Map

CSSのみで作成された地下鉄マップで、細かいアイコンなども画像ではなく全てCSSで作成されています。

Wall Clock in Pure CSS3

Wall Clock in Pure CSS3

目次へ

以上、画像を使わず、HTMLやCSSで作られた凄い作品のまとめでした。
他にもこういったものは沢山あるのですが、キリがないので個人的に目に止まったものや好みなものに絞ってまとめてみました。(ホントにこれで絞ったのかよって量ですけど…)
「こんな凄いのもあるよ!」とか「これも面白いよ!」っていうのがあれば、是非教えてください :)

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。