Pure CSS3 Star Wars Lightsaber CheckboxesはCSS3製のオープンソース・ソフトウェア（MIT License）です。

デザインフレームワークなどではチェックボックスやラジオボタンもカスタマイズしているものがあります。今回はそのチェックボックスだけ特徴あるものにしたソフトウェアを紹介します。その名もPure CSS3 Star Wars Lightsaber Checkboxes、チェックボックスをスターウォーズ化するソフトウェアです。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-04 11.41.54.1370343828.png)
このライトセーバー部分がチェックボックスです。キャラクターによってライトセーバーの色が違います。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-04 11.42.01.1370343833.png)
クリックするとウニョーンと伸びます。

[](http://images.moongift.jp/2013/06/Screenshot 2013-06-04 11.42.08.1370343837.png)
出したり引っ込めたり。意外と面白いです。

できることはチェックボックスのチェックあり、なしに合わせてライトセーバーが伸びたり縮んだりする程度です。なので一発ネタでしかないのですが…面白さと言えば、JavaScriptは使わずにピュアなスタイルシートのみで行っているという点でしょうか。

MOONGIFTはこう見る

去年くらいからこうやってJavaScriptを使わずにスタイルシートだけでいかにイベントのようなことをやってのけるかというソフトウェアが出てきています。技術的困難にチャレンジし、やってしまうのはとても面白い試みです。

CSSでイベントを実行する場合は、チェックボックスやラジオボタンのcheckedを使うのが基本になるようです。それによってタイミングずらしつつオブジェクトを動かせば、JavaScriptをオフにしてもできるアニメーションが仕上がるでしょう。

Pure CSS3 Star Wars Lightsaber Checkboxes

scotch-io/Pure-CSS3-Star-Wars-Lightsaber-Checkboxes · GitHub