[CSS]アイデアが面白い！チェックボックスで作るStar Warsのライトセーバー

CSSでチェックボックスを使ったテクニックはいろいろ紹介してきましたが、いつもとはちょっと違ったUIエレメントを紹介します。
「Star Wars」のタイトルからして、もうワクワクしますねｗ

Pure CSS3 Star Wars Lightsaber Checkboxes
Pure CSS3 Lightsaber Checkboxes -GitHub

チェックボックスで作ったライトセーバーは、こんな感じ。
CSSアニメーションでかっこよく刀身が伸びます。

デモのアニメーション

デモページは下記です。
ベストビューはWebkit系のChromeで、IE9+もサポートしています。

デモページ

Pure CSS3 Lightsaber Checkboxesの特徴

• JavaScriptは無し！
• グリーンのライトセーバー（ヨーダ）
• レッドのライトセーバー（ダース・ベイダー）
• ブルーのライトセーバー（オビ=ワン）
• パープルのライトセーバー（メイスウィンドウ）
• MITライセンスのオープンソース

実装

実装もご紹介。

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

<link rel="stylesheet" href="/path/to/lightsabers.css">

Step 2: HTML

トリガーはチェックボックスで、チェックの有無で刀身を伸び縮みさせます。

<div class="lightsaber">
    <label for="yoda-example"></label>
    <input type="checkbox" id="yoda-example" checked="checked">
    <div class="switch"></div>
    <div class="plasma yoda"></div>
</div>

カラーを変更する時は、L.5の「plasma yoda」の「yoda」を変更します。

グリーン

yoda

レッド

vader

ブルー

obi-wan

パープル

windu