Animated Content Tabs with CSS3

In this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.


CSS3 Content Tabs

View demo Download source

Content tabs are a very common and familiar element in web design, and often their turn out to be pretty useful. So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.

Note that the CSS3 properties will only work in browsers that support them.

The Markup

We will be using input elements to connect to the division with the class content. The content division includes all of the “tab pages”. For each input element we’ll have a label element. All labels will be styled like tabs.

<section class="tabs">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
	<label for="tab-1" class="tab-label-1">About us</label>
	
	<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
	<label for="tab-2" class="tab-label-2">How we work</label>
	
	<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
	<label for="tab-3" class="tab-label-3">References</label>
	
	<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
	<label for="tab-4" class="tab-label-4">Contact us</label>
            
	<div class="clear-shadow"></div>
				
	<div class="content">
		<div class="content-1">
            <p>Some content</p>
		</div>
		<div class="content-2">
            <p>Some content</p>
		</div>
		<div class="content-3">
            <p>Some content</p>
		</div>
		<div class="content-4">
            <p>Some content</p>
		</div>
	</div>
</section>

Every input element has a value, and we can always make an input selected by default by adding the checked attribute.

The CSS

The first thing we need to do is to define some dimension and hide the inputs by setting their opacity to 0:

tabs {
    position: relative;
	margin: 40px auto;
	width: 750px;
}

.tabs input {
	position: absolute;
	z-index: 1000;
	width: 120px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
	cursor: pointer;
}
.tabs input#tab-2{
	left: 120px;
}
.tabs input#tab-3{
	left: 240px;
}
.tabs input#tab-4{
	left: 360px;
}

The inputs will be covering the labels. It will seem, as if we click on the label, but actually we are clicking on the input. This is a trick that will also work in mobile browsers (in some mobile browsers, simply clicking the label will not focus the associated input).

Next, we will make the labels look like tabs by defining some neat style for them. Note that each of the labels has a different z-index. A box-shadow will add depth and realism to the tabs.

.tabs label {
	background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	font-size: 15px;
	line-height: 40px;
	height: 40px;
	position: relative;
	padding: 0 20px;
    float: left;
	display: block;
	width: 80px;
	color: #385c5b;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.tabs input:hover + label {
	background: #5ba4a4;
}

.tabs label:first-of-type {
    z-index: 4;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.tab-label-2 {
    z-index: 3;
}

.tab-label-3 {
    z-index: 2;
}

.tab-label-4 {
    z-index: 1;
}

Since we don’t want the bottom part of the box-shadow to show, we will cover it by using a :after pseudo-element with no content:

.tabs label:after {
    content: '';
	background: #fff;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	display: block;
}

When we click on a tab (label), it will be different in style and color from the others. The important thing is to make sure that the “checked” label will be on top of all of the other layers in the tabs. So, we will give it the highest z-index:

.tabs input:checked + label {
    background: #fff;
	z-index: 6;
}

As mentioned before, the content division will contain all of the tab pages, and we will set its z-index to 5, just to be under the selected label. In this way, the box-shadow of content area will cover all of the other labels.

Inside the content area, there are four divisions and each of them has their own content. By default (when their respective label is not selected/clicked) we want them to be hidden. So, we set the opacity to zero and the z-index to 1. We cannot use the display: none property because it’s not supported in transitions.

.content {
    background: #fff;
	position: relative;
    width: 100%;
	height: 370px;
	z-index: 5;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}

.content div {
    position: absolute;
	top: 0;
	left: 0;
	padding: 10px 40px;
	z-index: 1;
    opacity: 0;
    transition: all linear 0.1s;
}

.content div h2,
.content div h3{
	color: #398080;
}
.content div p {
	font-size: 14px;
	line-height: 22px;
	font-style: italic;
	text-align: left;
	margin: 0;
	color: #777;
	padding-left: 15px;
	font-family: Cambria, Georgia, serif;
	border-left: 8px solid rgba(63,148,148, 0.1);
}

When we want a content to appear (label clicked) we set the opacity to 1 and raise the z-index because we want this content division to be on top of all the others:

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    opacity: 1;
    transition: all ease-out 0.2s 0.1s;
}

In this tutorial we just went through the basic example that will fade in/out the contents. You can find more styles and effects in the demos.

This tutorial is part of the CSS3 series on Codrops. Check out the other experiments:

View demo Download source

Previous:
Next:

Tagged with:

Rey is a digital product designer based in Beijing, China. Contact & collaboration will be welcome.

View all contributions by

Website: http://fiohistory.com/

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 79

Comments are closed.
  1. 1

    Very cool! I just love these tabbed concepts I am seeing. Remember Google still views all of this content as one page, so don’t cram your whole site on this, but its such a cool way of breaking up pages that otherwise would be wordy. So if used right this can be a really great SEO tool, and it vastly improves the user experience!

  2. 5

    Hi Ring

    Interesting tutorial, there are many jquery tab tutorials around but I haven’t seen many with the transition effects shown here. My personal favourite is demo number two, I think the sliding effect is quite unique. Number 3 is also nice, however I think the sliding effect used in number four is a bit too much.

    Cathy

  3. 8

    @John – These are just experiments to show what we can do with CSS3, but if you want to use them in production sites then you will have to create fallback solutions for crappy IE. I believe that’s the way we have to work right now and still have to for a long, long time. All thanks to the ridiculous IE new release cycle of Microsoft. If we have to wait for the time that we can stop supporting IE8 or even IE9 (which has also poor CSS3 support) so that we ‘can’ start using CSS3, then we’re probably 10 years further. I’m not going to wait for that… Are you?

  4. 9

    Nice tutorial and clever technique. But this is wrong use of radio. I prefer uses links (with #) as tabs.

  5. 10

    Hi,
    i’ve tried to use this table but i can’t use html code inside the tabs. Why?
    I try to do a contact tab with input inside but the tab don’t show anything.

  6. 12

    sorry but it don’t works.
    However, I try to include a very very simple div in the tab,too, (for another function that i need) but
    if i wrote
    doesn’t appeare nothing

    • 13

      I’m having the same issue. I believe the div is being hidden behind the tab, but setting a z-index doesn’t seem to change anything. =/

    • 14

      I don’t know exactly what you mean, but the code has no problem. Make sure that you understand the sibling combinator. If you don’t like the z-index, you can use visibility. Just use you mind!

    • 15

      me too. when I try to make another div within content-1 div, nothing inside the div i made appears. i’ll try visibility.

    • 16

      basically what Alex means is that content within another div cannot be added to each tab’s content area or ‘content-1’ divs because it doesn’t show which what i’m trying to figure out too.

      there is conflicting code that does not allow the showing of other divs inserted into the ‘content-x’ divs. could it have something to do with being hidden due to z-indexing? i’m not too experienced with css3 so my mind is fried now lol

  7. 17

    Hi Ring,
    really awesome tutorial, I wold like to know, if possible, how I can make the same tabs with a variable height.
    Thanks so much! =)

    • 18

      Hi Andrea, take this demo for example, you can add the background and the padding to each of tab pages, not the class content, and give the content of tab pages some transitions if you need it.

  8. 19

    having same problem–can’t put divs into content-1 div because it won’t show :(. not too familiar with css3. any help would be appreciated.

    • 20

      Hi, the code just for the demo, you should act according to circumstances! I’ve used the descendant combinator for the divisions, you can use the child combinator or add the unordered list.
      There is an end to a problem like this. Just use you mind!

  9. 21

    hi Ring,
    the problem is that if i insert in a tab a very long text\code it don’t show everything.How can i make a tab with dynamic height?

    • 22

      I have told you already, set the height of the class content and tab pages to auto, and give each of tabs a background. Take note of the overflow. It’s done.

  10. 24

    great tutorial. Any way to adjust the heights of each content box? Thanks

    • 25

      You have on the final of the style.css several kind of heights:

      .ac-container input:checked ~ article.ac-1{
      height: 455px;
      }
      .ac-container input:checked ~ article.ac-2{
      height: 370px;
      }

      Change them…

    • 26

      Sorry, in this case:

      .ac-container input:checked ~ article.ac-medium{
      height: 455px;
      }
      .ac-container input:checked ~ article.ac-large{
      height: 370px;
      }

      ….

  11. 27

    It’s beautiful! thanks! but please, how can I make it compatible with IE6-IE7&IE8? some tutorial? I need to make this tabs compatible with IE urgent :(

  12. 28

    Wow! All your works are just so amazing! THANK YOU! You’ve helped me so much!

  13. 29

    Hey,

    very awesum stuff!
    I implement it in one website already. Now i want to pimp up my WordPresstheme with you Tabs!

    Under each article i want to activate these tabs. In the tabs you will finde the Comments or the Gallery.
    But if I set the Tabs two times on one .html File. I wont work corectly. Pleas try out!

    Do you have a solution to fix it?

    Please contact me and i’ll sent a code example.

    Best regards,
    Roberto

  14. 30

    Great, thank you but how do you put html content within the tabs, as soon as i put divs inside, the content disapears?

    • 31

      Hi, if you use an tag or a tag it works :) Use them instead of divs to display your content :)

    • 32

      Opps! used the around my words so they dissappeared :P
      What I met to write is that if you use an article tag or a section tag instead of divs your content wont dissappear :)

Comments are closed.