画像なし!スクリプトなし!CSSだけでつくられた秀逸なコードサンプル【ローディング、タイマー、ボタン、アンダーライン、動画】【NIJILOGセレクション】


最近のクリエイター情勢をみていると「CSSだけでどれだけリッチなUIがつくれるか競争」みたいなものを感じますが、それだけCSS3が深いということでしょう。
正直JQueryでやっていたかなりの部分をCSSが肩代わりできそうなので、ブラウザ側の対応次第では一気に情勢が変わるかもしれません。

ということで、NIJILOGが「これは秀逸!」とおもったコード5選です。

CSSだけでつくったローディングイメージ

JS Bin

読み込み中に表示するローディングイメージをCSSだけでつくってみましたという作品。
8種類すべてがキレイで美しいですね。
サンプルは見やすくするために div 要素を足してあります。
http://projects.lukehaas.me/css-loaders/

CSSだけでつくったカウントダウンタイマー

JS Bin

タイマー系のウィジェットはスクリプトのsetTimeoutあたりを使って作るのが普通でしたが、ついにCSS3だけで実装されるようになりました。
実装のキーポイントは animation-play-state ですね。
http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript

ポワワンとした動きが気持ちいボタンイメージ

See the Pen Gelatin over button effect with Sass by Francois Lesenne (@macreart) on CodePen.

普通のボタンかとおもいきや、カーソルをもっていくとボーダーが現れてポワワンとなるオモシロいボタン。
animation の keyframes をつかうとこんなこともできるんですね。

カーソルをあわせると動くアンダーライン

See the Pen A Better underline by Matt Gross (@mattgrosswork) on CodePen.

アンダーラインを background で表現した小技的なサンプル。
派手さはありませんが使い勝手がよさそうなコードですね。

背景に動画をつかうサンプル

See the Pen Basic Fullscreen Video Background by Matt Gross (@mattgrosswork) on CodePen.

最近のイケてるサイトに共通するのが動画を上手につかっているというポイントですが、これでブロックの背景に動画を再生させることができます。
キーは background-size: cover ですね。