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

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

サイトのキャプチャ

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

top of page

©2017 coliss