Pure CSS3 Star Wars Lightsaber CheckboxesはCSS3製のオープンソース・ソフトウェア（MIT License）です。
デザインフレームワークなどではチェックボックスやラジオボタンもカスタマイズしているものがあります。今回はそのチェックボックスだけ特徴あるものにしたソフトウェアを紹介します。その名もPure CSS3 Star Wars Lightsaber Checkboxes、チェックボックスをスターウォーズ化するソフトウェアです。
このライトセーバー部分がチェックボックスです。キャラクターによってライトセーバーの色が違います。
クリックするとウニョーンと伸びます。
出したり引っ込めたり。意外と面白いです。
できることはチェックボックスのチェックあり、なしに合わせてライトセーバーが伸びたり縮んだりする程度です。なので一発ネタでしかないのですが…面白さと言えば、JavaScriptは使わずにピュアなスタイルシートのみで行っているという点でしょうか。
MOONGIFTはこう見る
去年くらいからこうやってJavaScriptを使わずにスタイルシートだけでいかにイベントのようなことをやってのけるかというソフトウェアが出てきています。技術的困難にチャレンジし、やってしまうのはとても面白い試みです。
CSSでイベントを実行する場合は、チェックボックスやラジオボタンのcheckedを使うのが基本になるようです。それによってタイミングずらしつつオブジェクトを動かせば、JavaScriptをオフにしてもできるアニメーションが仕上がるでしょう。
Pure CSS3 Star Wars Lightsaber Checkboxes
scotch-io/Pure-CSS3-Star-Wars-Lightsaber-Checkboxes · GitHub
MOONGIFTの関連記事
