• 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.

1. W3 Total Cache. If you want to improve the speed on your site dramatically this is the plugin for you. It’s easy to install and your site will become much faster.
2. WP-ecommerce. Start your own webshop fast and easy. With WP-ecommerce you will be up and runnin’ in no time. I think this is the best free e-commerce plugins available.
3. NextGen Gallery. WordPress has a default gallery function which is quite nice, but with this plugin you can easily manage your photos and organize them with albums.
4. CformsII. Manage forms easily with this plugin. It works right out of the box but does also have some powerful functions for advanced forms. You can easily create everything from simple contact forms to large complex forms.
5. Tweetmeme. Let your users retweet your stuff.
6. All in one SEO pack. This is a popular plugin that let you optimize your site for search engines in a simple way.
7. My Page Order. I don’t understand why this is not an default option in WordPress yet. This plugin lets you re-order your pages easily with a neat drag and drop function. Very useful.
8. Google Analytics for WordPress. Simple but useful. Just paste your analytics code in the textfield.
9. WP to Twitter. Automatically publish your post to Twitter with this plugin.
10. Capability Manager. Create new user roles and manage roles easily with this plugin.

I think these plugins are great to enhance and extend the functionality in WordPress. However there are of course a lot of other great plugins as well so if you have any favourites feel free to post a comment.