Pure CSS Tabs

– Pure CSS.
No JavaScript Required!
– You can right-click each example, and view its source-code (“see frame-source”)

also available on GitHub: https://gist.github.com/eladkarako/ab7a98b67a42010eca087c26d3ead76b


Development, From The Start!

The most simplified version:

You can change the “first active tab”, by choosing a different checked input element.

Same simple example, with use of id and label for a wider selection area (you can select by clicking the label too not just the radio-button area)


Now.. following an example in my previous article HTML5 Ninja – Custom CheckBox we can make the input-radio “go away” entirely, keeping the label element which is quite design’able.

               label{background: -webkit-linear-gradient(top, white, gray);}
input:checked +label{background: -webkit-linear-gradient(top, gray, white);}

The “upside gradient” trick, makes it a little more “tab’ish” look-n-feel!

Notice that extra-space between the “tabs”, similar to two spans, label-elements are “inline” elements, meaning any whitespace will manifest as a real-separator,

instead of doing any sophisticated alteration, just put the input/label elements close-together :]

with a little rounding of the edges for the first and last label-elements (without being specific..)

label:first-of-type {
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
}
label:last-of-type {
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}
label{
  padding:0 10px 0 10px;
}

you can make the whole thing look quite nice,

How this thing works?
it relays on the CSS ~ operator to place the actual “content-container” after all “tabs-toolbar”,
and it uses the CSS + operator to pair label with its input-button, which makes it easier to change its design.

Overall this is quite easy and much more efficient design then JavaScript related frameworks, since it can work on the oldest IE versions (IE5.5), and live quite happily without JavaScript running,
It also looks great on mobile on due to it is relaying on the solid HTML4-standards of input/type-radio,
it will support native touch events, which again, also means you can omit the JavaScript from the UI design at all, which really is the BEST PRACTICE :]

Another improvements, is removing some of the id-elements (in favor of CSS’ nth-of-type)
it also means adding new tabs is relatively easy-task,
– add input/label pair at the end of the “list” of already existing input/label pairs.
– add div at the end of the current “list of divs”,
– add CSS rule to “pair” the functionality of checked input, with showing container:

input:nth-of-type(4):checked ~ div:nth-of-type(4){display:block;}

You might notice that clicking with slightly dragging the mouse will result with a little smudge of a selection background:

This is easily avoidable, by disabling the selection of the input/label using user-select:none;.


ah, amm.. and how about a little border between each “tab”?

nice!


Enjoy :]

Leave a Reply