While in my previous CSS3 tabs tutorial I tried to simulate some beveled corners for the tabs, this time I will show you how to create folder tabs using nothing more than pure CSS3.

View demo

The HTML

The markup is self explanatory. While the title attributes might seem to be extra, in this case they are needed for the jQuery stuff.

<ul id="tabs">
    <li><a href="#" title="tab1">One</a></li>
    <li><a href="#" title="tab2">Two</a></li>
    <li><a href="#" title="tab3">Three</a></li>
    <li><a href="#" title="tab4">Four</a></li>
</ul>

<div id="content">
    <div id="tab1">...</div>
    <div id="tab2">...</div>
    <div id="tab3">...</div>
    <div id="tab4">...</div>
</div>

So, here are the ingredients:

• #tabs – an unordered list that holds the tab navigation items.
• #content – a wrapper for each tab content.

The CSS

Below you’ll find the CSS lines necessary for creating these tabs. Also, the demo source contains all the prefixed CSS3 properties.

#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li{
  float: left;
  margin: 0 .5em 0 0;
}

#tabs a{
  position: relative;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  border-radius: 5px 0 0 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
  background: #fff;
}

#tabs a:focus{
  outline: 0;
}

#tabs a::after{
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em;
  bottom: 0;
  width: 1em;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transform: skew(10deg);
  border-radius: 0 5px 0 0;
}

#tabs #current a,
#tabs #current a::after{
  background: #fff;
  z-index: 3;
}

#content
{
    background: #fff;
    padding: 2em;
    height: 220px;
    position: relative;
    z-index: 2;
    border-radius: 0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

The jQuery

There is nothing to add here, it’s similar to my previous tabs article.

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function() {
	$("#content div").hide(); // Initially hide all content
	$("#tabs li:first").attr("id","current"); // Activate first tab
	$("#content div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        e.preventDefault();
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });
})();
</script>

View demo

The end (of this tutorial)

This is just another small example that shows the CSS3 awesomeness. Everything is great also for older browsers, the tabs degrade nice.

So, having said that, I hope you liked this article and thanks for reading it!

So, to keep it simple, if you have a website with lot of pages and sub-levels, in order to increase usability, you need to use breadcrumbs. Having said that, today you’ll learn how to create your own cool CSS3 breadcrumbs.

View demo

The HTML

Tha markup is simple and minimal, based on an unordered list.

<ul id="breadcrumbs-one">
    <li><a href="">Lorem ipsum</a></li>
    <li><a href="">Vivamus nisi eros</a></li>
    <li><a href="">Nulla sed lorem risus</a></li>
    <li><a href="">Nam iaculis commodo</a></li>
    <li><a href="" class="current">Current crumb</a></li>
</ul>

The CSS

First, let’s add a mini CSS reset for our unordered lists:

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

Secondly, I’d like to add that all the breadcrumbs I made for this tutorial are using CSS pseudo-elements. I bet there’s no need to specify what pseudo-elements are and how cool they are.

First example

Here I used a similar technique to the one I used for creating these CSS3 tooltips. Basically, to create a right-bordered triangle effect, the triangles created with pseudo-elements are placed one above another. The darker triangle will be shifted a bit in order to achieve the border.

#breadcrumbs-one{
  background: #eee;
  border-width: 1px;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-one li{
  float: left;
}

#breadcrumbs-one a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);
}

#breadcrumbs-one li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs-one a:hover{
  background: #fff;
}

#breadcrumbs-one a::after,
#breadcrumbs-one a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}

#breadcrumbs-one a::after{
  z-index: 2;
  border-left-color: #ddd;
}

#breadcrumbs-one a::before{
  border-left-color: #ccc;
  right: -1.1em;
  z-index: 1;
}

#breadcrumbs-one a:hover::after{
  border-left-color: #fff;
}

#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-one .current::after,
#breadcrumbs-one .current::before{
  content: normal;
}

Second example

The CSS shapes built with the pseudo-elements are placed before, respectively after.

#breadcrumbs-two{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-two li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-two a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  position: relative;
}

#breadcrumbs-two a:hover{
  background: #99db76;
}

#breadcrumbs-two a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ddd #ddd #ddd transparent;
  left: -1em;
}

#breadcrumbs-two a:hover::before{
  border-color: #99db76 #99db76 #99db76 transparent;
}

#breadcrumbs-two a::after{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid #ddd;
  right: -1em;
}

#breadcrumbs-two a:hover::after{
  border-left-color: #99db76;
}

#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
  content: normal;
}

Third example

Using border-radius we will round the corners for our rectangle and square shapes. The square will be rotated, in order to achieve a rounded diamond.

#breadcrumbs-three{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-three li{
  float: left;
  margin: 0 2em 0 0;
}

#breadcrumbs-three a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  background: #ddd;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  border-radius: .4em 0 0 .4em;
}

#breadcrumbs-three a:hover{
  background: #abe0ef;
}

#breadcrumbs-three a::after{
  background: #ddd;
  content: "";
  height: 2.5em;
  margin-top: -1.25em;
  position: absolute;
  right: -1em;
  top: 50%;
  width: 2.5em;
  z-index: -1;
  transform: rotate(45deg);
  border-radius: .4em;
}

#breadcrumbs-three a:hover::after{
  background: #abe0ef;
}

#breadcrumbs-three .current,
#breadcrumbs-three .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-three .current::after{
  content: normal;
}

Fourth example

Again, with the pseudo-elements you’ll add two rectangles before and after the element. Then you’ll round the outer sides for each one. The rest is nothing but poetry. :)

#breadcrumbs-four{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-four li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-four a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  position: relative;
}

#breadcrumbs-four a:hover{
  background: #efc9ab;
}

#breadcrumbs-four a::before,
#breadcrumbs-four a::after{
  content:'';
  position:absolute;
  top: 0;
  bottom: 0;
  width: 1em;
  background: #ddd;
  transform: skew(-10deg);
}

#breadcrumbs-four a::before{

  left: -.5em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs-four a:hover::before{
  background: #efc9ab;
}

#breadcrumbs-four a::after{
  right: -.5em;
  border-radius: 0 5px 5px 0;
}

#breadcrumbs-four a:hover::after{
  background: #efc9ab;
}

#breadcrumbs-four .current,
#breadcrumbs-four .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-four .current::after,
#breadcrumbs-four .current::before{
  content: normal;
}

View demo

CSS3 breadcrumbs advantages

• No images, so it’s easy to update and maintain.
• Everything is scalable, em based.
• Contains fallbacks for older browsers.

Final words

I didn’t merged the common styles for the above breadcrumbs with a purpose. I thought that if you need a certain breadcrumbs style, just copy&paste that, without other CSS inheritances issues.

Thank you for reading and I hope you liked this tutorial. Have any questions or just want to share your thoughts? Feel free to leave a comment!

View demo

Introduction

So, why pseudo-elements? The answer is very simple: there is no need to add extra markup. This fit perfectly for the heading we’re going to create here.

The HTML

<h1 class="headline1">I took lessons</h1>

As you can see above, there is no rocket science here. Just a simple HTML heading with a CSS class that will properly style it. All the other headings use a similar HTML structure, so it can’t easier than that.

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:700' rel='stylesheet' type='text/css'>

Also, for this demo, we’ll use a Google custom font.

The CSS

Further, we’ll use the body as our main wrapper:

body{
	width: 60%;
	margin: 50px auto;
	padding: 15px;
	position: relative; /*needed for heading4 rule*/
	z-index: 0; /* again, just for heading4 rule*/
	border: 7px solid #cecece;
	border: 7px solid rgba(0,0,0,.05);
	background: #fff;
	background-clip: padding-box;
	box-shadow: 0 0 2px rgba(0, 0, 0, .5);
}

h1{
	font-family: 'Droid Sans', sans-serif;
	font-size: 22px;
}

Noticed the background-clip: padding-box declaration? This will help you achieve a cool effect: transparent borders for the main wrapper. Basically, the background-clip CSS property specifies whether an element’s background, either the color or image, extends underneath its border.

Browser support for background-clip: Safari 5+, Chrome 7+, Firefox 3.6+, Opera 10+, IE 9+

Headline 1

Below is a simple and good looking effect made using CSS border property:

.headline1 {
	border-bottom: 1px dashed #aaa;
	border-left: 7px solid #aaa;
	border-left: 7px solid rgba(0,0,0,.2);
	margin: 0 -15px 15px -22px;
	padding: 5px 15px;
}

Headline 2

This style is made using a CSS triangle shape, you’ve seen this before here:

.headline2 {
	border-bottom: 1px solid #aaa;
	margin: 15px 0;
	padding: 5px 0;
	position: relative;
}

.headline2:before,
.headline2:after{
	content: '';
	border-right: 20px solid #fff;
	border-top: 15px solid #aaa;
	bottom: -15px;
	position: absolute;
	left: 25px;
}

.headline2:after{
	border-top-color: #fff;
	border-right-color: transparent;
	bottom: -13px;
	left: 26px;
}

Headline 3

The below HTML heading style is created using the ribbon effect:

.headline3{
  position: relative;
  margin-left: -22px; /* 15px padding + 7px border ribbon shadow*/
  margin-right: -22px;
  padding: 15px;
  background: #e5e5e5;
  background: -moz-linear-gradient(#f5f5f5, #e5e5e5);
  background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
  background: -webkit-linear-gradient(#f5f5f5, #e5e5e5);
  background: -o-linear-gradient(#f5f5f5, #e5e5e5);
  background: -ms-linear-gradient(#f5f5f5, #e5e5e5);
  background: linear-gradient(#f5f5f5, #e5e5e5);
  -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  text-shadow: 0 1px 0 #fff;
}

.headline3:before, .headline3:after{
  position: absolute;
  left: 0;
  bottom: -6px;
  content:'';
  border-top: 6px solid #555;
  border-left: 6px solid transparent;
}

.headline3:before{
  border-top: 6px solid #555;
  border-right: 6px solid transparent;
  border-left: none;
  left: auto;
  right: 0;
  bottom: -6px;
}

Headline 4

Using box-shadow, you can create some slick effects:

.headline4{
	position: relative;
	border-color: #eee;
	border-style: solid;
	border-width: 5px 5px 5px 0;
	background: #fff;
	margin: 0 0 15px -15px;
	padding: 5px 15px;
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
	box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.headline4:after
{
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 15px;
	right: 15px;
	width: 70%;
	height: 10px;
	background: rgba(0, 0, 0, .7);
	-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
	-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
	box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
}

View demo

Conclusion

I hope you liked my headings examples, and if you have some other cool ones to add, feel free to share your thoughts with us. Thanks you for reading!

View demo

I know, there are so many CSS3 menu tutorials in the wild (including here on RTD) but I hope you will love this one also.

CSS3 menu tutorials

Below is a list with other CSS3 menu articles you may have read here:

• Sexy CSS3 menu
• CSS3 animated dropdown menu
• Cool CSS3 navigation menu
• Vertical dropdown menu with CSS3 and jQuery

The idea

The idea for this CSS3 navigation menu came to me while watching this button on UI Parade. Usually, when I see design stuff on the internet, I try to image how can I make it using CSS3. I think this a professional habit.

The HTML

Check the markup below, simple and effective:

<nav>
	<ul>
		<li><a href="">Home</a></li>
		<li><a href="">Categories</a></li>
		<li><a href="">About</a></li>
		<li><a href="">Portfolio</a></li>
		<li><a href="">Contact</a></li>
	</ul>
</nav>

Also, do not forget to include the following snippet when using HTML5 specific tags like nav:

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The CSS

The following lines do not contain the vendor-specific properties like -moz- or -webkit-. From now on, I think this is how I’ll present the CSS in my articles. Just keep in mind that you can always find the full code in the demo page source.

Step 1

To be short: reset the margin and padding for the unordered list, also center align the inline-block list elements:

nav{
	width: 960px;
	margin: 80px auto;
	text-align: center;
}

nav ul{
	margin: 0;
	padding: 0;
}

Step 2

For the menu elements, instead using float I chose the inline-block alternative. If you want to find out more about inline-block pros and cons, I’d recommend Robert Nyman’s article: CSS display: inline-block: why it rocks, and why it sucks.

nav li{
	margin: 0 10px; /* Add some horizontal spacing */
	display: inline-block;
	*display: inline;  /* IE7 and below */
	zoom: 1;
}

Step 3

Using cool CSS3 properties like gradients and shadows we’re going to style the anchor elements:

nav a{
	display: inline-block;
	position: relative;
	padding: 8px 15px;
	border: 2px solid #fff;
	text-decoration: none;
	color: #999;
	font: bold 14px 'Lucida sans', Arial, Helvetica;
	background-color: #eaeaea;
	background-image: linear-gradient(top, #eaeaea, #fff);
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
				0 0 1px 0 rgba(0, 0, 0, .2),
				0 2px 2px rgba(0, 0, 0, .3),
				0 10px 10px -5px rgba(0, 0, 0, .2);
}

nav a:hover{
	background-color: #eee;
	background-image: linear-gradient(top, #eee, #fff);
}	

nav a:active{
        top: 1px; /* Simulate the push button effect */
	background: #f5f5f5;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
				0 0 1px 0px rgba(0, 0, 0, .2),
				0 1px 2px rgba(0, 0, 0, .3);
}

Step 4

The below is the most interesting part, in my opinion. Without, adding any extra markup and using a pseudo-element you will be able to create a cool effect:

nav a::before{
	content: '';
	position: absolute;
	top: -10px;
	right: -10px;
	bottom: -10px;
	left: -10px;
	z-index: -1;
	background-color: #e3e3e3;
	background-image: linear-gradient(top, #e3e3e3, #f7f7f7);
	border-radius: 2px;
	box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;
}

nav a:active::before{
	top: -11px; /* Hey you, don't move! */
}

View demo

That’s it!

I hope you enjoyed this article and I’m looking forward to hear your thoughts about it. Thanks for reading!

Just some other awesome CSS3 buttons

CSS3 dropdown menu

Slick login form with HTML5 & CSS3

Cool notification messages with CSS3 & jQuery

CSS3 animated dropdown menu

How to create slick effects with CSS3 box-shadow

Practical CSS3 tables with rounded corners

Sexy CSS3 menu

How to create a cool CSS3 search box

Cross-browser CSS gradient buttons

Thank you all!

In the end, I would also like to thank everyone who has supported me over the year. Especially, I would like to thank those who have sent encouragements by email, those who have tweeted my articles, those who have commented on my articles, those who are liking RTD on facebook, those who have subscribed to my RSS feed, and to anyone who has read my articles.

It is you who encourage me to go further and I will continue to write and publish articles for 2012.

View demo

also, you can download the .psd concept

The HTML

The markup is minimal and quite self explanatory. Please, don’t blame me for divitis. :)

<div class="header">
	<div class="wrapper">
		<div class="christmas-tree tree1"></div>
		<div class="christmas-tree tree2"></div>
		<div class="christmas-tree tree3"></div>
		<div class="snowman"></div>
		<div class="christmas-tree tree4"></div>
		<div class="christmas-tree tree5"></div>
		<div class="christmas-tree tree6"></div>
	</div>
</div>

Image resources

Below, you can find the images you will use in order to create the header:

The CSS

As you read at the beginning of this article, the @keyframes rule does all the magic. Also, to keep the following code as clean as possible, I will not add the prefixed versions too (-moz-, -webkit-, -ms-).

You can find the full CSS3 code when viewing page source for the demo.

To achieve the snow effect, you will need to animate the background-position property for the first .header background. As a quick note, for the browsers that do not support multiple backgrounds, the snow will not be visible for this example.

.header{
	margin: 0 0 30px;
	background: url(header-bg.png);
	background: url(snow-bg.png) repeat-y center, url(header-bg.png);
	animation: animate-snow 9s linear infinite;
}

@keyframes animate-snow
{
	0% { background-position: center 0, 0 0;}
	100% { background-position: center 885px, 0 0;}
}

The .wrapper element basically holds all our Christmas trees together with the snowman. Please note the position: relative declaration:

.wrapper{
	width: 960px;
	height: 315px;
	margin: auto;
	overflow: hidden;
	position: relative;
	background: url(wrapper-bg.png) no-repeat bottom;
}

For the Christmas trees, the animation-duration value was randomly changed in order to create a cool effect:

@keyframes animate-drop {
	0% {opacity:0;transform: translate(0, -315px);}
	100% {opacity:1;transform: translate(0, 0);}
}	

.christmas-tree,
.snowman {
	position: absolute;
	animation: animate-drop 1s linear;
}

.christmas-tree {
	width: 112px;
	height: 137px;
	background: url(christmas-tree.png);
}

.snowman {
	width: 115px;
	height: 103px;
	top: 195px;
	left: 415px;
	background: url(snowman.png);
	animation-duration: .6s;
}	

.tree1 {
	top: 165px;
	left: 35px;
	animation-duration: .6s;
}

.tree2 {
	left: 185px;
	top: 175px;
	animation-duration: .9s;
}

.tree3 {
	left: 340px;
	top: 125px;
	animation-duration: .7s;
}

.tree4 {
	left: 555px;
	top: 155px;
	animation-duration: .8s;
}

.tree5 {
	left: 710px;
	top: 170px;
	animation-duration: .7s;
}

.tree6 {
	left: 855px;
	top: 125px;
	animation-duration: .6s;
}

View demo

also, you can download the .psd concept

Browser support

Here’s the support at this time: Firefox 5+, IE 10+, Chrome 6+, Safari 5+. For non-supported browsers, you don’t have to worry, everything will be just fine as long as you provide decent fallbacks.

Why to use animations?

Simple answer: to draw the user’s attention. Get inspired by another example, here is one of my previous articles, where I also used CSS3 keyframes: Cool notification messages with CSS3 & jQuery.

Happy Holidays!

We’re getting close to New Year’s and, with this article, I want to wish you all the best and Happy Holidays. Thank you all for reading my articles!

In this article you’ll find out some interesting stuff about the new CSS4 selectors.

As an introduction, you should know that these CSS4 selectors specifications are quite new and no browser actually supports any of the below features yet. Further, I hope this will change.

So let’s see below some great new CSS4 stuff:

The “parent” selector

Before, there was no option to select the parent of an element in CSS (not even CSS3). With CSS4, the most important news in the current W3C draft is the support for the parent selector.

$ul li:hover{
    background: #fff;
}

Using the above, when hovering an list element, the whole unordered list will be somehow highlighted by adding a white background to it.

Another example I’m thinking about now is when using HTML forms: for example we could highlight a HTML fieldset when one of its inputs is focused:

Fieldset highlighted when an inner input is focused

$fieldset input:focus{
    background: #f3eab1;
}

Matches-Any Pseudo-class

The :matches() CSS4 selector is the standardized version of Mozilla’s :-moz-any() pseudo class. This new proposal can simplify the process of writing complex CSS.

Here’s a quick example:

:matches(section, article, aside) h1 {
    font-size: 2em;
}

as an abbreviation for:

section h1, article h1, aside h1 {
    font-size: 2em;
}

Other CSS4 pseudo-class selectors

The :indeterminate pseudo-class applies to UI elements whose value is in an indeterminate state. For example, radio and checkbox elements can be toggled between checked and unchecked states, but are sometimes in an indeterminate state, neither checked nor unchecked. Similarly a progress meter can be in an indeterminate state when the percent completion is unknown.

The :nth-match(an+b of selector-list) pseudo-class notation represents an element that has a parent and has an+b-1 siblings that match the given selector-list before it in the document tree, for any zero or positive integer value of n.

Conclusion

We never get bored when it comes about new web technologies. I remember somebody said something like: We (developers) are living in exciting times. True.

Also, I’d strongly recommend you to read more about CSS4 selectors here:

• W3C Working Draft 29 September 2011
• What’s slated for CSS4 Selectors?

So, in this article you’ll learn how to build an awesome CSS3 pricing table, with no images and minimal HTML markup.

View demo

If you’re in a hurry, just check the final result.

The HTML

Here’s a markup excerpt with the Enterprise section:

<div id="pricing-table" class="clear">
    <div class="plan">
        <h3>Enterprise<span>$59</span></h3>
        <a class="signup" href="">Sign up</a>
        <ul>
            <li><b>10GB</b> Disk Space</li>
            <li><b>100GB</b> Monthly Bandwidth</li>
            <li><b>20</b> Email Accounts</li>
	    <li><b>Unlimited</b> subdomains</li>
        </ul>
    </div>
    ...
</div>

The CSS

Keep your CSS as simple as possible:

#pricing-table {
	margin: 100px auto;
	text-align: center;
	width: 892px; /* total computed width = 222 x 3 + 226 */
}

#pricing-table .plan {
	font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
	text-shadow: 0 1px rgba(255,255,255,.8);
	background: #fff;
	border: 1px solid #ddd;
	color: #333;
	padding: 20px;
	width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */
	float: left;
	position: relative;
}

#pricing-table #most-popular {
	z-index: 2;
	top: -13px;
	border-width: 3px;
	padding: 30px 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
}

#pricing-table .plan:nth-child(1) {
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}

#pricing-table .plan:nth-child(4) {
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;
}

/* --------------- */	

#pricing-table h3 {
	font-size: 20px;
	font-weight: normal;
	padding: 20px;
	margin: -20px -20px 50px -20px;
	background-color: #eee;
	background-image: -moz-linear-gradient(#fff,#eee);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	background-image: -webkit-linear-gradient(#fff, #eee);
	background-image: -o-linear-gradient(#fff, #eee);
	background-image: -ms-linear-gradient(#fff, #eee);
	background-image: linear-gradient(#fff, #eee);
}

#pricing-table #most-popular h3 {
	background-color: #ddd;
	background-image: -moz-linear-gradient(#eee,#ddd);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
	background-image: -webkit-linear-gradient(#eee, #ddd);
	background-image: -o-linear-gradient(#eee, #ddd);
	background-image: -ms-linear-gradient(#eee, #ddd);
	background-image: linear-gradient(#eee, #ddd);
	margin-top: -30px;
	padding-top: 30px;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

#pricing-table .plan:nth-child(1) h3 {
	-moz-border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	border-radius: 5px 0 0 0;
}

#pricing-table .plan:nth-child(4) h3 {
	-moz-border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;
}	

#pricing-table h3 span {
	display: block;
	font: bold 25px/100px Georgia, Serif;
	color: #777;
	background: #fff;
	border: 5px solid #fff;
	height: 100px;
	width: 100px;
	margin: 10px auto -65px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}

/* --------------- */

#pricing-table ul {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
}

#pricing-table li {
	border-top: 1px solid #ddd;
	padding: 10px 0;
}

/* --------------- */

#pricing-table .signup {
	position: relative;
	padding: 8px 20px;
	margin: 20px 0 0 0;
	color: #fff;
	font: bold 14px Arial, Helvetica;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	background-color: #72ce3f;
	background-image: -moz-linear-gradient(#72ce3f, #62bc30);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));
	background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
	background-image: -o-linear-gradient(#72ce3f, #62bc30);
	background-image: -ms-linear-gradient(#72ce3f, #62bc30);
	background-image: linear-gradient(#72ce3f, #62bc30);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	text-shadow: 0 1px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}

#pricing-table .signup:hover {
	background-color: #62bc30;
	background-image: -moz-linear-gradient(#62bc30, #72ce3f);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));
	background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
	background-image: -o-linear-gradient(#62bc30, #72ce3f);
	background-image: -ms-linear-gradient(#62bc30, #72ce3f);
	background-image: linear-gradient(#62bc30, #72ce3f);
}

#pricing-table .signup:active, #pricing-table .signup:focus {
	background: #62bc30;
	top: 2px;
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
	box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
}

/* --------------- */

.clear:before, .clear:after {
  content:"";
  display:table
}

.clear:after {
  clear:both
}

.clear {
  zoom:1
}

So, why should I use this pricing table design?

While its structure isn’t actually based on tables, here are some pros:

• Minimal HTML code.
• No images at all and CSS3 ready, so this is easy to maintain/update.
• Graceful degradation for older browsers.

Internet Explorer 8 – preview

View demo

Conclusion

For this CSS3 pricing table, I tried to follow some best practices as:

• Highlighting a recommended plan.
• Making the price stand out.
• Placing the plans in a descending order.

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

So, today you’ll learn how to create awesome CSS3 & jQuery tooltips.

View demo

You may already read my previous CSS3 tooltips tutorial, but this time we’ll use some jQuery and HTML5 data-* attributes for our tooltips.

The major advantages of these tooltips are:

• the simplicity to use (as you’ll see below)
• they are animated using CSS3

The HTML

As you can see below, thanks to the new HTML5 custom data attributes, our tooltip structure looks as clean as possible:

<b data-tooltip="Fantasy Action Adventure">Batman: Arkham City</b>

The CSS

Here are the styles used in order to create this 3D looking tooltip:

.tooltip {
	position: relative;
	display: inline-block;
	cursor: help;
	white-space: nowrap;
	border-bottom: 1px dotted #777;
}

.tooltip-content {
	opacity: 0;
	visibility: hidden;
	font: 12px Arial, Helvetica;
	text-align: center;
	border-color: #aaa #555 #555 #aaa;
	border-style: solid;
	border-width: 1px;
	width: 150px;
	padding: 15px;
	position: absolute;
	bottom: 40px;
	left: 50%;
	margin-left: -76px;

	background-color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
	background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
	background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
	-moz-box-shadow: 1px 1px 0 #555,
				2px 2px 0 #555,
				3px 3px 1px rgba(0, 0, 0, .3),
				0   1px 0   rgba(255,255,255, .5) inset;
	-webkit-box-shadow: 1px 1px 0 #555,
				2px 2px 0 #555,
				3px 3px 1px rgba(0, 0, 0, .3),
				0   1px 0   rgba(255,255,255, .5) inset;
	box-shadow: 1px 1px 0 #555,
				2px 2px 0 #555,
				3px 3px 1px rgba(0, 0, 0, .3),
				0   1px 0   rgba(255,255,255, .5) inset;
	-webkit-transition: bottom .2s ease, opacity .2s ease;
	-moz-transition: bottom .2s ease, opacity .2s ease;
	-ms-transition: bottom .2s ease, opacity .2s ease;
	-o-transition: bottom .2s ease, opacity .2s ease;
	transition: bottom .2s ease, opacity .2s ease;
	}

.tooltip-content:after,
.tooltip-content:before {
	border-right: 16px solid transparent;
	border-top: 15px solid #fff;
	bottom: -15px;
	content: "";
	position: absolute;
	left: 50%;
	margin-left: -10px;
}

.tooltip-content:before {
	border-right-width: 25px;
	border-top-color: #555;
	border-top-width: 15px;
	bottom: -15px;
}

.tooltip:hover .tooltip-content{
	opacity: 1;
	visibility: visible;
	bottom: 30px;
}

The jQuery

Basically, the jQuery code does all the “dirty” job for you. Using the HTML5 data-tooltip attribute value, it appends a new HTML node: <span class="tooltip-content"> which will be animated using CSS3.

$(document).ready(function(){
	$('[data-tooltip]').addClass('tooltip');
	$('.tooltip').each(function() {
		$(this).append('<span class="tooltip-content">' + $(this).attr('data-tooltip') + '</span>');
	});

	if ($.browser.msie && $.browser.version.substr(0,1)<7)
	{
	  $('.tooltip').mouseover(function(){
			$(this).children('.tooltip-content').css('visibility','visible');
		  }).mouseout(function(){
			$(this).children('.tooltip-content').css('visibility','hidden');
		  })
	}
});

IE6 gets some extra treatment, as you can see above.

Browser support

As usual, this demo also works across all major browsers:

View demo

That's all

I hope that you enjoyed this tutorial and if you have any comments or questions feel free to add them below. Thanks for reading!

Having said that, in this article you’ll learn how to create stylish and animated progress bars using CSS3.

View demo

The HTML

The markup could not be simpler than that:

<div class="progress-bar blue stripes">
    <span style="width: 40%"></span>
</div>

• .progress-bar – defines the general styles for our progress bar.
• .blue – in this case, the blue CSS class add a blue style for the progress bar.
• .stripes – animation type for the current progress bar.
• span – this will help you filling the progress bar. An inline set width will help you specifying the “fill” state.

The CSS

General styles for the CSS3 progress bar and filled area:

.progress-bar {
	background-color: #1a1a1a;
	height: 25px;
	padding: 5px;
	width: 350px;
	margin: 50px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
	-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
	box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}

.progress-bar span {
	display: inline-block;
	height: 25px;
	width: 200px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-transition: width .4s ease-in-out;
        -moz-transition: width .4s ease-in-out;
        -ms-transition: width .4s ease-in-out;
        -o-transition: width .4s ease-in-out;
        transition: width .4s ease-in-out;
}

Let’s add some color/gradients:

.blue span {
	background-color: #34c2e3;
}

.orange span {
	  background-color: #fecf23;
	  background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
	  background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
	  background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
	  background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
	  background-image: -o-linear-gradient(top, #fecf23, #fd9215);
	  background-image: linear-gradient(top, #fecf23, #fd9215);
}	

.green span {
	  background-color: #a5df41;
	  background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
	  background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
	  background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
	  background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
	  background-image: -o-linear-gradient(top, #a5df41, #4ca916);
	  background-image: linear-gradient(top, #a5df41, #4ca916);
}

Stripes

You may have seen this CSS3 technique before, I just adapted it a little for this example:

.stripes span {
	-webkit-background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	background-size: 30px 30px;
	background-image: -webkit-gradient(linear, left top, right bottom,
						color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
						color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
						color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
						to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);            

	-webkit-animation: animate-stripes 3s linear infinite;
	-moz-animation: animate-stripes 3s linear infinite;
}

@-webkit-keyframes animate-stripes {
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

@-moz-keyframes animate-stripes {
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

Shine

Not sure if this is the best name I could find for this CSS3 animation, but here we go:

.shine span {
	position: relative;
}

.shine span::after {
	content: '';
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;			

	-webkit-animation: animate-shine 2s ease-out infinite;
	-moz-animation: animate-shine 2s ease-out infinite;
}

@-webkit-keyframes animate-shine {
	0% {opacity: 0; width: 0;}
	50% {opacity: .5;}
	100% {opacity: 0; width: 95%;}
}

@-moz-keyframes animate-shine {
	0% {opacity: 0; width: 0;}
	50% {opacity: .5;}
	100% {opacity: 0; width: 95%;}
}

This CSS3 progress bar example uses an CSS3 ::after pseudo-element which animates. Currently, animating generated content with CSS3 is available only on latest Firefox browsers. I hope that soon it will be a wider support for that.

Glow

CSS3 keyframes animation based on box-shadow property:

.glow span {
	-moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
	-webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
	box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;

	-webkit-animation: animate-glow 1s ease-out infinite;
	-moz-animation: animate-glow 1s ease-out infinite;
}

@-webkit-keyframes animate-glow {
 0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
 100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 }

@-moz-keyframes animate-glow {
 0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
 100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 }

View demo

Hey, what about older browsers?

The progress bars look pretty well thanks to graceful degradation.

That’s all!

For further web development, to achieve the result you wish for, you just need to play with JavaScript or jQuery to change the span‘s width value for these progress bars.

I hope you liked this tutorial, please feel free to share your thoughts. Thanks for reading!

Update

I just added some jQuery to the demo page. So, now you can also play with progress bars values. Hope you like it!