A quite commonly known example is usage of the Adjacent Sibling Selector (viz.
+) to build custom radio buttons/checkboxes or tab interfaces.
See the Pen CSS Custom Checkboxes / Radio Buttons by Bramus! (@bramus) on CodePen.
With a few more CSS tricks such as the
:checked pseudo-classes, the
::before pseudo-elements, and the
attr() CSS function one can achieve some other great effects:
- Floating Label Textfields? Possible.
- Off Canvas Menu? Also Possible.
- Parallax Scrolling? Check.
- An entire game? Guess again.
Related: You Might Not Need jQuery →
Leave a comment