最近のCODEPENから – 3/6/2015

CODEPENからいくつか気になったものをいくつかピックアップしてみました。

いつもは入れないのに下に画像を挟んでいるのは、CODEPENをamp-iframeで埋めこむときにファストビューからのiframeがviewportの75%、もしくは600px以上離れていないといけない仕様への対策です。

モーダルウィンドウを起動するボタンはinput要素にしてあります。これと:check擬似クラスを組み合わせることでJSを使うことなくモーダルウィンドウを実装しています。なるほど。

Animated Twitter Follow Button

twiiterのアニメーションです。かわいかったので(‘-‘)

Skype Inspired spinner

keyframeを使ったシンプルなアニメーションです。

Heart<3

CSS3アニメーションの勉強になります。

I LOVE YOU HONEY

さらっと使えるようになりたいです。

CSS-only Coffee App Concept

これもJSを使わずにinput要素と:focus擬似クラスで実装しています。ここまでやるとスゴイ。