No Javascript needed
Simply Accomplished simply with the power of HTML and CSS


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 ~.


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.


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?


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.


This is the first tab

This is the second one

And this the last

The only problem with this approach is that you need to reserve some fixed space for the tabs in the form of padding since the tabs are positioned absolutely.


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