プログラミング

プログラミング

【CSS3で遊ぼう】プログラマー必見!画期的なCSS3の技術で作成された実験的作品10選

2,782 views

読了時間 : 約3分24秒

CSS3が大きな注目を集めにつれ、CSSの限界を打ち破る新しい技術が日々開発されるようになってきました。次はどんな面白い技術が出てくるのか、楽しみでなりません。

本記事では実験的に開発されたCSS3の技術のうち、思わず圧倒されてしまうような画期的なものを紹介しています。気になったものがあればぜひ試してみてください。

 

 

1.太陽系

CSS3の[border-radius][transform][animation]機能を活用して太陽系を再現しています。軌道や惑星は[border-radius]で、アニメーションは[-webkit animation]プロパティと[transform]で作成されています。

 

 

2.HTMLとCSSでスターウォーズ

数年前までスターウォーズ:エピソードⅣのオープニングがCSSとHTMLだけで再現できるなんて考えられませんでした。

Star Wars HTML and CSS: A NEW HOPE →

 

 

3.CSS3のみでスターウォーズのAT-ATウォーカー

これはただのデモではなく、実験的に開発された技術をどう取り入れていくのかを、丁寧に解説したチュートリアルでもあります。「帝国の逆襲」に登場するAT-ATウォーカーのCSS3アニメーションの作成プロセスを見ることができます。

Animated AT-AT Walker from Star Wars →

 

 

4.CSSのみでスパイダーマンのアニメーション

1967年に放送されたスパイダーマンのアニメのオープニングを再現したものです。アニメーションにはCSS3を、オーディオにHTML5を使用しています。

Pure CSS3 Spiderman Cartoon →

 

 

5.CSS3で時計

CSS3の3Dトランスフォームとトランジションを利用して作られた時計です。時間設定とホイールの回転にJavaScriptが使用されていますが、ホイールそのものやアニメーションはCSSのみでできています。JavaScriptありとなしの2つのバージョンのデモが用意されています。

CSS3 Clock →

 

 

6.CSS3のみでページめくりのエフェクト

CSS3のグラディエント、トランジション、2Dトランスフォーム、クリッピングを駆使することでページをめくるアニメーションが作成できます。

Pure CSS3 Page Flip Effect →

 

 

7.CSS3のみで立方体

 

 

8.CSSのみでソーシャルメディアアイコン

CSS3の新機能を活用すると何ができるかを教えてくれる実用的な例です。CSS3で新たに登場したプロパティの[border-radius][text-shadow][box-shadow][gradient]が使われています。

 

 

9.CSSで作成されたタイプフェイス“Curtis”

CSS3のみで作成された新しいフォントです。[background-color][border-width][border-radius]を上手に組み合わせたり、絶対配置や相対配置をフル活用したりして、フォントの形をすべてブラウザで作っています。

 

 

 

10.CSS3アニメーションやトランジションを活用したオンラインゲーム“Anigma”

試験的に開発されたオンラインゲームです。アニメーションやトランジションにおけるCSS3の機能性が表れています。

Anigma Home →

 

 

11.CSS 3Dで絵画を再現

 

“Las Meninas”という絵画に疑似3D/パララックスエフェクトをかけています。CSSのみでできます。

CSS 3D Meninas →

 

 

※本記事は、10 Mind-Blowing Experimental CSS3 Techniques & Demosを翻訳・再構成したものです。

 

 

関連記事

 

 








【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ