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.
These Lightsaber checkboxes have a bunch of neat cool features and subtle little tricks. Some of them are:
- Plain and Simple. More for fun, less for UI/UX.
- Four different Lightsaber colors. Supporting green for Yoda, red for Darth Vader, blue for Obi-Wan Kenobi, and purple for Mace Windu.
- On and off switches. The handle will have a green button for on and red for off.
- These checkboxes are optimized for Webkit browsers, but work in all modern browsers. It supports IE9 and above.
- Finally, it’s governed under the MIT Open-Source License. It’s free to use, modify, or whatever. Please attribute though.