Question

Does anybody know how are developed thunderbird mail tabs (version 15)? Look great and I’m not really able to do the same in my app.
Check this screen shoot: http://s7.postimage.org/ocvxg9ooq/thunder.jpg

Answer 1

Yes, I’ve done something like this before – check it out http://dabblet.com/gist/3166401 (great looking in IE9 as well)

And I’ve done now a quick version with multiple tabs: http://dabblet.com/gist/3608293/ (CSS only)

HTML:

<div id='tabs' class='tabs'>
    <input type='radio' name='tab' id='tab1' checked>
    <label for='tab1'><h5>Inbox</h5></label>
    <section id='inbox'>
        <h6>You have <a href='#'>1 new message</a></h6>
        <a href='#'>See all messages</a>
    </section>
    <input type='radio' name='tab' id='tab2'>
    <label for='tab2'><h5>Add-ons Manager</h5></label>
    <section id='addons'>
        <h6>Add-ons list</h6>
        <ul>
            <li>bammm bammm
        </ul>
    </section>
    <input type='radio' name='tab' id='tab3'>
    <label for='tab3'><h5>Calendar</h5></label>
    <section id='addons'>
        <h6>Scheduled</h6>
        <ul>
            <li>Tuesday, September the 4th...
        </ul>
    </section>
    <input type='radio' name='tab' id='tab4'>
    <label for='tab4'><h5>Chat</h5></label>
    <section id='addons'>
        <h6>Something here as well</h6>
        <div>something more</div>
    </section>
</div>

CSS:

html { font: 90% Helvetica, sans-serif; }
.tabs {
    overflow: hidden;
    position: relative;
    height: 26.5em;
    margin: 7em 0 0;
}
.tabs input[type=radio] { display: none; }
.tabs label, .tabs section { position: absolute; }
.tabs label {
    z-index: 2;
    top: 0; left: 1.5em;
    width: 9em;
    height: 2em;
    background: plum;
    background: linear-gradient(lightcyan, plum);
    text-align: center;
    cursor: pointer;
}
.tabs h5 {
    position: relative;
    margin: 0;
    height: 2em;
    font: 1em/2 Helvetica, sans-serif;
    text-shadow: 0 1px 0 lemonchiffon;
}
.tabs label:nth-of-type(2) { left: 12em; }
.tabs label:nth-of-type(3) { left: 22.5em; }
.tabs label:nth-of-type(4) { left: 33em; }
.tabs label:before, .tabs label:after {
    position: absolute;
    top: 0; bottom: 0;
    width: 1em;
    background: plum;
    background: linear-gradient(lightcyan, plum);
    content: '';
}
.tabs label:before {
    left: -.65em;
    border-radius: .4em 0 0 0;
    transform: skewX(-15deg);
}
.tabs label:after {
    right: -.65em;
    border-radius: 0 .4em 0 0;
    transform: skewX(15deg);
}
.tabs h5:before, .tabs h5:after {
    position: absolute;
    bottom: -1px;
    height: .65em;
    width: .65em;
    content: '';
}
.tabs h5:before {
    left: -1.4em;
    transform: skewX(-15deg);
    background: radial-gradient(top left, 
                transparent 70.71%, plum 70.71%);
}
.tabs h5:after {
    right: -1.4em;
    transform: skewX(15deg);
    background: radial-gradient(top right, 
                transparent 70.71%, plum 70.71%);
}
.tabs section {
    display: none;
    z-index: 6;
    padding: 1em;
    border-top: solid 1px whitesmoke;
    margin-top: -1px;
    top: 2em; right: 0; bottom: 0; left: 0;
    background: linear-gradient(whitesmoke, gainsboro)
}
.tabs input[type=radio]:checked + label,
.tabs input[type=radio]:checked + label:before, 
.tabs input[type=radio]:checked + label:after {
    z-index: 5;
    background: whitesmoke;
    background: linear-gradient(gainsboro, whitesmoke);
}

.tabs input[type=radio]:checked + label:before, 
.tabs input[type=radio]:checked + label:after {
    background-position: 0 -1px;
}
.tabs input[type=radio]:checked + label h5:before {
    background: radial-gradient(top left, 
                transparent 70.71%, whitesmoke 70.71%);
} 
.tabs input[type=radio]:checked + label h5:after {
    background: radial-gradient(top right, 
                transparent 70.71%, whitesmoke 70.71%);
}
.tabs input[type=radio]:checked + label + section { display: block; }