ITエンジニア/デザイナ向けにオープンソースを毎日紹介

フォームで選択した際に何のフィードバックもないと不安になってしまいます。文字を入力していれば分かりやすいのですが、マウスでクリックした時に適切なフィードバックは必要でしょう。

今回はラジオボタンにおける選択時のアニメーションを提供するRadiobox.cssを紹介します。

Radiobox.cssの使い方

前半の6つです。派手なものもありますが、多くは小さく揺れる程度です。

後半。有機的にちょっと震えるのが小気味良いです。

Radiobox.cssは一つのアイディアですが、スマートフォンで使われているマテリアルデザインに似たものがあります。ユーザが自分の意図した動作になっているかどうか確認しやすくなるでしょう。

Radiobox.cssはスタイルシート製のオープンソース・ソフトウェア(MIT License)です。

Animated CSS3 radio inputs with - Radiobox.css

720kb/radiobox.css: Tiny set of pure CSS animations for your radio inputs. https://720kb.github.io/radiobox.css/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2