Archive for the ‘ HTML5/CSS3 ’ Category

CSS3+JSで太陽系を表現・・・『CSS 3D Solar System』

Pocket

立体的にアニメーションするのすごいな。

CSS 3D Solar System  CodePen

↑ がんばってつくったなぁw。

CSS 3D Solar System  CodePen 1

↑ ぐるんぐるん回ります。

実際にいじってみたい方は是非どうぞ。小学校の教材なんかでもいいですね。

» CSS 3D Solar System – CodePen

激ムズいことで有名なFlappy BirdがHTML5で登場・・・

Pocket

スコアが2桁行けば上等!という激ムズゲームで話題になりましたね・・・。確かにムズイw。

Flappy Bird HTML5 Game  flappybird

↑ てんでだめでした。

ルールは簡単で、クリックして鳥を飛ばし、土管の間を通していくだけです。是非挑戦してみてください。

» Flappy Bird HTML5 Game #flappybird

CSS3の3Dアニメーションで何ができるかがよく分かるスライド

Pocket

これ、一読しておくべきではないですかね。とってもわかりやすいです。

Unfolding the Box Model Exploring CSS 3D Transforms

↑ 矢印キーで操作します。

Unfolding the Box Model Exploring CSS 3D Transforms 1

↑ いろいろわかりやすいです。

Unfolding the Box Model Exploring CSS 3D Transforms 2

↑ これもdivで表現。

CSS3まわりのイメージをつかむのにいいですね。

» Unfolding the Box Model: Exploring CSS 3D Transforms

HTML5 Canvasでいろいろな線を描くテクニック集

Pocket

これはメモしておかねば・・・。Canvasでいろいろな線を描くためのテクニック集ですね。参考になります。

Perfection kills  Exploring canvas drawing techniques

↑ シンプルな線から始まって・・・。

Perfection kills  Exploring canvas drawing techniques 1

↑ ちょっとぼかしたり・・・。

Perfection kills  Exploring canvas drawing techniques 2

↑ イガイガしてみたり・・・。

Perfection kills  Exploring canvas drawing techniques 3

↑ こんなのも。

他にもいろいろありますし、自分でも試すことができますよ。お絵かきソフトなどを作るときに参考にしてみてくださいな。

» Perfection kills » Exploring canvas drawing techniques

Bootstrap3でメガメニューを実現する『Yamm Megamenu』

Pocket

これ、ちょっといいかも・・・。コンテンツが増えてきたときに使えるメガメニューをBootstrap3で実現するプラグインですね。

Yamm 3 Megamenu for Bootstrap3

↑ こういうのですな。

Yamm 3 Megamenu for Bootstrap3 1

↑ サムネイルメニューも入れられます。

Yamm 3 Megamenu for Bootstrap3 2

↑ ちゃんとグリッドシステムになっています。

Bootstrapを見ながら自作するのも大変ですからね・・・。こういうプラグインを賢く使わせていただきたいところです。

» Yamm!3 Megamenu for Bootstrap3

WebGLで海面のシミュレーション

Pocket

最近、WebGLに興味があるのでご紹介。とはいってもシンプルな海面のシミュレーションですが。

Ocean Wave Simulation

↑ Chromeで見るのがおすすめかな。

風向きやらも調整できますね。こういう3Dアニメーションもブラウザで実現できる時代かと思うと感慨深い。そろそろThree.jsとか勉強してみよう。

» Ocean Wave Simulation

JavaScriptはなんと0行!のHTML5ゲーム・・・

Pocket

なんと変態的な・・・(褒め言葉)。JavaScriptなしでCSSだけで実現しているHTML5ゲームです。

Zero lines JS game  CodePen

↑ 当たり判定厳しいけどちゃんと遊べます。

CSSプログラマ、なんて言葉がそろそろ出てきそうですよね・・・。

» Zero lines JS game – CodePen

CSS3でストライプ付きの影を実現する

Pocket

これ、なんかいいですね。応用が効きそうなのでメモ的にエントリーしておきます。

CSS Dashed Shadow  CodePen 1

↑ CSS3、やっぱりすごいなー。

:afterとかの使い所をやはりいつかまとめねば。

» CSS Dashed Shadow – CodePen

数字をスクロールさせるCSS

Pocket

カウンターなんかにいいのではなかろうか。

CSS Number Scroll

↑ こういうやつですね。

ちなみにCSS単体で出来るわけではなく、CSS3のアニメーションを使いつつ、数値の書き換えはJavaScriptで行っていますね。勉強にもいいのではないでしょうか。詳細は以下からどうぞ。

» CSS Number Scroll

CSS3でシンプソンズ、が力作すぎる

Pocket

いわれないとわからんですね。これはすごい。

The Simpsons in CSS

↑ Margeが特に。

The Simpsons in CSS 1

↑ Developer Toolsで見ると確かにCSS。

かなり変態的ですが笑、興味のある方はどうぞ。

» The Simpsons in CSS