Zagh
No Javascript needed
Simply Accomplished simply with the power of HTML and CSS
Introduction
A lot of cool designs can be created with just HTML and CSS.
For the following examples I use labels, radio and checkbox inputs in combination with the css selectors :checked, + and ~.
Labels
These are associated with one input, either by containing that input or by using the attribute for to target the id of a certain input.
Once clicked the label will transmit the click to the associated input.
Several labels can be associated with a single input by using the for attribute.
Radio and Checkbox
These inputs are extremely helpful since they have 2 states that depend on user interaction, either :clicked or :not(:clicked) which can be targeted by CSS.
Selectors :checked, + and ~
After targeting the state of the radio and checkbox inputs with the :checked selector we can combine that with the + selector which gives us the element placed immediately after the input and ~ which gives us all elements placed after the input. With that we style said elements according to each state of the input.
Why
You may want to create a super light website that doesn't rely on javascript, or the audience you target doesn't like running javascript, or you may even want to make a website for TOR. And finally, why not?
Popup
Inline popup
Free popup
The inline popup should be used whenever possible as to minimize the use of ids so that the code doesn't get too confusing.
Image Inputs
When you click one of the previous inputs it checks the appropriate radio button or checkbox so you can post it directly to the backend. You can also use this technique to create any type of stylized radio buttons and checkboxes.
Tabs
This is the first tab
This is the second one
And this the last
Slider
No it doesn't actually swipe. What were you expecting, I'm a programmer not a magician.
Maybe one day when they introduce swiping into CSS5, although by then webdev will be dead.
I decided to call it a slider instead of a gallery because it has slides where you can put anything you want, not just images.
Mixing it Up
Popup with tabs
Slider with picture popup