[ad_1]
Today we’ll discuss the “CSS checkbox hack technique”, a neat way to simulate JavaScript’s click event on CSS elements. Along the way, we’ll explore the best tutorials that use this technique and are available on Envato Tuts+.
7 CSS “Checkbox Hack” Tutorials
Now that we know what the “checkbox hack” is all about, let’s see it in action through different exercises that are available on Tuts+!
1. Pure CSS Slideshow
Did you know that you can build a CSS-only slideshow?
The demo below covers the steps needed for building a fully functional CSS slideshow. It comes with a lot of the common slideshow features like arrow navigation, dot navigation, thumbnail navigation, and keyboard navigation.
2. Theme Switcher
In this exercise, we’re building a theme switcher. There’s a color palette from which we can select the desired color scheme.
3. Toggle Switch Component
Toggle switches are a popular design trend that we all have seen at some point. Their primary use is for adjusting settings (e.g. phone settings). They have two states (on/off), one of which is predefined like radio buttons.
This exercise shows how to develop a switch component for a to-do checklist.
4. Off-Canvas Form
Off-canvas/hidden content is another common design pattern that is mostly used in mobile layouts due to the limited space. Multilevel menus, forms, or other types of information are moved outside of the visible part of the website by default and appear when the user clicks on an associated element (link, button, etc.).
This tutorial teaches you how to build an off-canvas feedback form.
5. Accordion Component
In this exercise, we’re creating a responsive accordion. On mobile layouts, it has a vertical layout, whereas on desktop screens a horizontal one.
6. Filtering Component
This is one of my favorite exercises. Here we’re covering a way to build a filtering component. Lots of useful test cases in the real world based on it!
7. CF7: Custom Checkboxes and Radio Buttons
In this exercise, we’re learning how to create custom checkboxes and radio buttons for the WordPress Contact Form 7 (CF7) plugin. CSS for checkboxes can be messy, and the challenge here is that we don’t use our markup (we’ve to adapt to the markup produced by the plugin) but we do it quite gracefully.
Conclusion
Hopefully, this list has given you enough inspiration to understand the power of the “CSS checkbox hack technique”. Enjoy the demos, read the associated tutorials, and last but not least, be sure to follow Envato Tuts+ on CodePen for more creative pens!
[ad_2]
