Steps in CSS3

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;
}

Pure CSS3 Ribbon

Image

Have you ever wanted your site to sport a “ribbon” in the upper right corner ?

You can easily do it using CSS3. Start with a simple DIV element that will define the ribbon content.


<div>CSS3 Ribbon</div>

Then let’s start applying some styles through CSS. First of all, let’s detach the element from the document flow and let’s put it in the top right corner.

position:fixed;
right: 0px;
top: 0px;

Then we should rotate it by 45 degrees clockwise, as every banner actually is. Let’s use transform and transform-origin along with all the needed browser translations of this not yet unanimously supported attributes.

-moz-transform-origin: 50% 50%;
-moz-transform: translate(90px,30px) rotate(45deg);
-webkit-transform-origin: 50% 50%;
-webkit-transform: translate(90px,30px) rotate(45deg);
-o-transform-origin: 50% 50%;
-o-transform: translate(90px,30px) rotate(45deg);
transform-origin: 50% 50%;
transform: translate(90px,30px) rotate(45deg);

Then we add some style to the banner itself.

color: white;
background: #119911;
border: 10px white double;
padding: 10px;

This is the live demo.

Hope you enjoy it.

Performance Automated Test as Comparison Test

Lately I was thinking how to teach to use JUnit to execute some performance test. I gave a try to both p-unit and JPerf. Apart the fact they do not seem to be actively maintained any more, they suffered, in my point of view, from a dependency on the system clock. This sounded very strange to me, because measuring performances with the system clock gives results that are hardly generalized to other machines.

So, what could be a solution ? Just use two codes that perform the same task. One is the reference, while the other is the one performances are measured related to the reference.

If you’re interested I would point you to the very detailed Francesco’s post about the matter.

 

Studio DaniDemi e Tinvention insieme nella formazione

Studio DaniDemi e Tinvention uniscono le rispettive competenze formative per proporre ai clienti corsi di formazione su tecnologie Java e metodologia TDD basata su stack Java.

Per i nostri clienti c’è quindi la possibilità di usufruire di corsi di formazione che formino sviluppatori che possano velocemente inserirsi in team che adottano metodologie agili.