pure-css3-star-wars-ilghtsaber-checkboxes
Experiments

Pure CSS3 Star Wars Lightsaber Checkboxes

Pure CSS3 Star Wars Lightsaber Checkboxes. This is a quick fun little project built to demonstrate the power behind CSS3, and an awesome little checkbox hack (:checked ~ div). Not “too” practical for UI/UX, but overall some cool code. It features four different lightsabers: Yoda’s, Darth Vader’s, Obi-Wan’s, and Mace Windu’s.

Today I built this cool little project for fun. It showcases a bunch of CSS3 and demos a really interesting checkbox hack that basically creates click events through checkboxes without having to use any JavaScript code. It’s also just UI/UX friendly enough to be used on an actual website.

Features

These Lightsaber checkboxes have a bunch of neat cool features and subtle little tricks. Some of them are:

  1. No JavaScript is used.
  2. Plain and Simple. More for fun, less for UI/UX.
  3. Four different Lightsaber colors. Supporting green for Yoda, red for Darth Vader, blue for Obi-Wan Kenobi, and purple for Mace Windu.
  4. On and off switches. The handle will have a green button for on and red for off.
  5. These checkboxes are optimized for Webkit browsers, but work in all modern browsers. It supports IE9 and above.
  6. Finally, it’s governed under the MIT Open-Source License. It’s free to use, modify, or whatever. Please attribute though.

Stay Connected With Us
hover these for magic

Get valuable tips, articles, and resources straight to your inbox. Every Tuesday.