Jump immediately to the demo Demo.

It’s quite usual for a website providing some kind of workflow to sport a “steps bar” that gives the user a visual representation of what steps are still missing to complete the procedure.

Obviously you can do it using purely CSS3. Let’s see how.

Let’s start with a div in which we’ll put the steps inside.

<div class="steps_box"></div>

Inside it we add a new div element for each step we want to show. I used a total of three classes, “steps_step” that should be assigned to the div that contains all the steps, “index” for the span containing the step number (or whatever you want to use as a step identifier) and “content” for the text representing the description of the step.

<div class="steps_step ">
 <span class="index">1</span>
 <span class="content">Check Out</span>
</div>

Let’s complete the example. We still miss a class to set which is the currently active step. To do this let’s use another extra class “selected”. Finally we obtain something like that:

<div class="steps_box">
<div class="steps_step "><span class="index">1</span>
 <span class="content">Check Out</span></div>
<div class="steps_step selected"><span class="index">2</span>
 <span class="content">Payment</span></div>
<div class="steps_step "><span class="index">3</span>
 <span class="content">Confirmation</span></div>
</div>

Now let’s think about the CSS and let’s start styiling the “steps_box”. Nothing really exotic but the border radius parameters that will draw the box with rounded corners with different radius.

div.steps_step {
	position: relative;
	top: 10px;
	display: inline;
	margin-right: 10px;
	padding: 10px;
	color: white;
	background-color: #BBBBBB;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 4px;
}

Let’s add some shadow to the text.

div.steps_step.selected {
	background-color: #8B4513;
	text-shadow: #363535 3px 3px 5px;
}

Let’s detach the index for its normal position and let’s inflate it to make it absolutely bigger.

div.steps_step.selected span.index {
    color: #FF7F24;
    position:relative;
    font-size: 340%;
    top: 25px;
}