4 different skins with CSS

This page demonstrates various ways of skinning tabs. For more background information you may want to read about graphic design and presentation as it applies to jQuery Tools.

Mostly CSS based skin

Here we have a tab setup that uses only one background image for the selected tab and a semi-transparent gradient for the background of the panes. Otherwise the whole thing is just simple CSS dimensions, borders, paddings and coloring.

Seagram Building

The Seagram Building is a skyscraper in New York City, located at 375 Park Avenue, between 52nd Street and 53rd Street in Midtown Manhattan. It was designed by the German architect Ludwig Mies van der Rohe, in collaboration with the American Philip Johnson.

It is 515 feet tall with 38 stories. Severud Associates were the structural engineering consultants. It stands as one of the finest examples of the functionalist aesthetic and a masterpiece of corporate modernism. It was designed as the headquarters for the Canadian distillers Joseph E. Seagram's & Sons, thanks to the foresight of Phyllis Lambert, the daughter of Samuel Bronfman, Seagram's CEO.

Barcelona Pavilion

The Barcelona Pavilion, designed by Ludwig Mies van der Rohe, was the German Pavilion for the 1929 International Exposition in Barcelona, Spain. This building was used for the official opening of the German section of the exhibition.

Mies was offered the commission of this building in 1928 after his successful administration of the 1927 Werkbund exhibition in Stuttgart. The German Reich entrusted Mies with the artistic management and erection of not only the Barcelona Pavilion, but for the buildings for all the German sections at the 1929 Universal Exhibition.

Neue Nationalgalerie

Neue Nationalgalerie at the Kulturforum is a museum for classical modern art in Berlin, with main focus on early the 20th century. It is part of the German National Gallery. The museum building and its sculpture garden were designed by Ludwig Mies van der Rohe and opened in 1968.

The collection features a number of unique highlights of modern 20th century art. Particularly well represented are Cubism, Expressionism, the Bauhaus and Surrealism. The collection owns masterpieces of artists like Pablo Picasso, Ernst Ludwig Kirchner, Joan Miró, Wassily Kandinsky and Barnett Newman.

standalone demo

The above tabs use a cross-fading effect which can be accomplished with the following setup:

  $("#tab_nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});

JavaScript

The individual panes need to be absolutely positioned so that the cross-fading is possible.

Tab skin without images

These tabs are skinned without any images. We are playing solely with background colors and borders. The tab title can be anything and the width is adjusted accordingly:

Tab 1
Second tab
A ultra long third tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.

Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui.

Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.

Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis nisi. Vivamus at enim. Integer semper imperdiet massa. Vestibulum nulla massa, pretium quis, porta id, vestibulum vitae, velit.

standalone demo

The setup is similar to the minimal setup. Take a look at the CSS file.

A more styled example

These tabs use the same CSS file as the previous tabs with a few extra CSS declarations:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.

Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

standalone demo

CSS overrides

Here are the CSS settings that override the external CSS file:

/* alternate colors: skin2 */
ul.skin2 a {
    background-color:#89a;
    color:#fff !important;
}
 
/* mouseover state */
ul.skin2 a:hover {
    background-color:#678;
}
 
/* active tab */
ul.skin2 a.current {
    background-color:#4F5C6A;
    border-bottom:2px solid #4F5C6A;
}
 
/* tab pane with background gradient */
div.skin2 div {
    min-height:200px;
    color:#fff;
    background:#234 url(/media/img/gradient/h300.png) repeat-x scroll 0 -50px;
 
    /* IE6 does not support PNG24 images natively */
    _background:#4F5C6A;
}

CSS

The benefit of using skins without images is that they are very flexible. You can alter the default tab look and feel with just a few extra settings, allowing you to have many different kinds of tab styling on your pages.

Tab skin with images

Here we are using a single background image for the whole setup. This can be achieved with the CSS sprite technique. By using only a single image this setup loads very quickly. CSS sprites are a very important technology in modern web design.

The Player
Plugins
Streaming
Scripting

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.

Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.

Lorem ipsum dolor sit amet

Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

Title for the third tab pane

Fourth pane is here

standalone demo

Take a look at the documented CSS file being used. You may also be interested in a scrollable version of these tabs.