読了: 約 2 分

カヤックのデザイナーブログで紹介されていて興味があったので
調べてみました。

どう考えても無茶な「CSSプログラミング」が話題に

これの1つ目に紹介されていたものです。
Chromeで遊ぶのが推奨されてます!

CSS3 OF THE DEAD – jsdo.it – share JavaScript, HTML5 and CSS

これfokedしてCSS見てみたら、animationに名前付けて、transform:translateX(0px) translateY(0px);とかで
動かしているんですね。

{
    -webkit-animation-name:enemy19;
    -webkit-animation-duration:10s;
    -webkit-animation-delay:2s;
}


制作者による解説までも載せているなんて、
なんて素晴らしいのでしょうか。目からショッパイものが出てきました。
checkedの状態を見て、見た目を変更しているんですね。
-webkit-appearance:button;でinput[type=”radio”]の場合background-imageが効かないという
問題を解決しているのも凄いですね。

CSS3 OF THE DEAD解説

CSS3で使えるセレクタやプロパティが増えて
表現できる幅がグッと増えましたね。ワクワクしてきました。

HTML5花火大会をみんなで作ろう!HTML5花火大会をみんなで作ろう!

これも面白いですね。audioタグ使ってしっかり創り込んだモノを初めて見たので
感動しました。

簡単に書き方を

<audio id="bgm" autobuffer autoplay loop preload>
<source src="/static/assets/sound/01/sound.ogg" />
<source src="/static/assets/sound/01/sound.mp3" />
</audio>
<p id="muteController" class="on" onClick="tglmute();
">BGM: <span class="on">on</span> / <span class="off">off</span></p>

最後にon/offで切り替えのボタンを作って、JavaScriptで切り替えてますね。

そして改めてjsdo.itは、開発者が簡単に共有して、
そこからもっと面白い物が生み出せたら良いよね!というコンセプトと
デザインもシンプルかつ使い易くて素晴らしいなと思いました。
jsdo.it

この記事も随時追記していきます。