At this time we’ll talk about the “CSS checkbox hack method”, a neat method to simulate JavaScript’s click on occasion on CSS components. Alongside the way in which, we’ll discover the perfect tutorials that use this method and can be found on Envato Tuts+.
7 CSS “Checkbox Hack” Tutorials
Now that we all know what the “checkbox hack” is all about, let’s have a look at it in motion by means of completely different workouts which are obtainable on Tuts+!
1. Pure CSS Slideshow
Do you know you can construct a CSS-only slideshow?
The demo under covers the steps wanted for constructing a totally practical CSS slideshow. It comes with a variety of the widespread slideshow options like arrow navigation, dot navigation, thumbnail navigation, and keyboard navigation.
2. Theme Switcher
On this train, we’re constructing a theme switcher. There’s a coloration palette from which we are able to choose the specified coloration scheme.
3. Toggle Swap Element
Toggle switches are a preferred design pattern that all of us have seen in some unspecified time in the future. Their main use is for adjusting settings (e.g. telephone settings). They’ve two states (on/off), certainly one of which is predefined like radio buttons.
This train exhibits the way to develop a change part for a to-do guidelines.
4. Off-Canvas Kind
Off-canvas/hidden content material is one other widespread design sample that’s principally utilized in cellular layouts because of the restricted area. Multilevel menus, types, or different sorts of data are moved exterior of the seen a part of the web site by default and seem when the person clicks on an related aspect (hyperlink, button, and so on.).
This tutorial teaches you the way to construct an off-canvas suggestions kind.
5. Accordion Element
On this train, we’re making a responsive accordion. On cellular layouts, it has a vertical format, whereas on desktop screens a horizontal one.
6. Filtering Element
That is certainly one of my favourite workouts. Right here we’re protecting a method to construct a filtering part. A lot of helpful check instances in the true world primarily based on it!
7. CF7: Customized Checkboxes and Radio Buttons
On this train, we’re studying the way to create customized checkboxes and radio buttons for the WordPress Contact Kind 7 (CF7) plugin. CSS for checkboxes may be messy, and the problem right here is that we don’t use our markup (we’ve to adapt to the markup produced by the plugin) however we do it fairly gracefully.
Conclusion
Hopefully, this record has given you sufficient inspiration to know the facility of the “CSS checkbox hack method”. Benefit from the demos, learn the related tutorials, and final however not least, make sure you comply with Envato Tuts+ on CodePen for extra inventive pens!
