Pure CSS3 Logo

There are a lot of cool features in CSS3 and in this example I am going to show you how you can create a decent header with a logo using only H1 and CSS. There are four features we are going to use:

• Rounded Corners
• Box Shadow
• Text Shadow
• Gradients

Unfortunately IE does not support any of these yet, but it looks very nice in FireFox and other good browsers supporting CSS3. Take a look at this example (right click to view the source code)

As you can see we have only used the h1 with two span tags. The first thing we can look at is the rounded corners (a really great feature).

-moz-border-radius: 8px;
-webkit-border-radius: 8px;

(Moz is for mozilla (FireFox) while webkit is for Chrome and Safari)

We have set the radius to 8px for our header, this gives us some nice rounded corners. Then we need to create a drop shadow, this is done with box shadow like this:

box-shadow: #333 10px 10px 10px;
-moz-box-shadow: #333 10px 10px 10px;
-webkit-box-shadow: #333 10px 10px 10px;

As you can see there are four different values here. The first is the color and the three others are the size and position of our shadow. Change the different values to see how it affects the shadow.

That’s the CSS3 stuff we need for our main header. Now we are going to create the logo inside the header. We do this by adding two span tags which wrap around “css3″ and “logo”

On the css id we only need rouned corners on the left top and left bottom like this:

-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;

To create the gradient background we need to add this:

background:-moz-linear-gradient(-90deg, #fde98d, #f9cd0a) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#fde98d), to(#f9cd0a));

The first color is the top while the second is the bottom. Change the colors to see the effect. As you can see you can change the gradient style as well (-90deg and linear. try change the values to see the effect).

The final thing we need to add is the text shadow:

text-shadow: 0 1px 0 #fbf0c3;

This works pretty much like the box shadow and you can try to change the values to see how it works.

To create the logo span just use the same code with different values. That’s all.