Killer CSS3 Web design tips for complete beginners

"Want some awesome Web design tips to help make your blog or website beautiful, without having to learn CSS3?"

CSS3 is super easy to use (even if you are a beginner who's completely allergic to Web design and development).

It's also really good for SEO (Search Engine Optimization), speed and performance.

You can read more about how and why CSS3 is a must for modern blogs and websites at How CSS3 can improve SEO and maximize conversions.

We're going to look at some really easy, but effective, Web design techniques that leading designers are using on their client's sites. If you can copy and paste, then be prepared to have a beautiful site, designed like a pro.

Top Web design tips using CSS3

For the purposes of this article, I am going to build up a single example using several different design techniques that utilize CSS3 in some form or other.

Now, like I promised, you don't need to know anything about Web design or CSS3 in order to create the same designs on your blog.

All you need to do is bookmark the following two excellent online CSS3 generators:

All the design techniques used in this article can easily be accomplished using these two tools.

In order to apply CSS to HTML elements it is probably wise to have some CSS files included in your page, and use class or ID attributes on your HTML.

There is a great basic introduction on how to apply CSS to your webpages at w3schools. Or, you can ask me questions directly in our forums.

Beautiful callout boxes

A standard box, with a border and background might look something like this:

Hello! I am a standard callout box.

Pretty plain, right? Using the box shadow attribute from our CSS3 generator, we can get an effect like this:

Hello! I am a standard callout box.

But, to give the box a nice beveled edge, and a kind of glow, we can reduce the box shadow to only 1px in size, and convert the dark border into a light one. Check it out:

Hello! I am a standard callout box.

We can now apply a gradient to the background color to give it a bit of "depth". I've gone with a very subtle color gradient, but you will find it super easy to chop and change colors and gradients to suit your own design and taste:

Hello! I am a standard callout box.

Ok, so that's a pretty cool looking box, but the text still looks a bit ordinary.

Tastefully designed text with CSS3

Naturally, CSS can control the font size, color, and family, but it is also really easy to add a shadow effect using CSS3.

Go back to the CSS3 Generator and select the Text Shadow option. I used it to add a very slightly offset, lightly colored shadow to create this look and feel:

Hello! I am a standard callout box.

The white shading gives the text a bit of a "pop", and makes it stand out from the background - perfect for... you guessed it, a call out box.

Ok, so this example is pretty conservative but it would be just as easy to create something like this:

Hello! I am a standard callout box.

Remember to ensure that the text is always clearly visible and easy to read. There's nothing more frustrating, from the perspective of a client, visitor or customer, than not being able to see the information you are after.

But, there's one more super cool Web design feature that CSS3 excels at, and we may as well look at it here.

Creating animations with CSS3 transitions

Gone are the days where Web designers needed huge clunky JavaScript libraries to create relatively minor on-page animations.

Most, if not all display related effects can be achieved with the much lighter, faster, and more secure CSS3.

Let's say that this callout box was in fact going to be a menu. And, you want the menu items to acknowledge the user when the cursor hovers over the item. To do that, we need CSS3 transitions.

A transition is basically the morphing of one CSS class or id, into another when the hover event is fired.

What's nice about transitions is that they are super smooth. Hover your mouse over the menu items in the call out box below to see what I mean:

Cool, huh?

For completeness sake, here's the complete CSS and HTML that I used for this final demo:

<style type="text/css">
.demo6{
width: 580px;
height: 40px;
border: 1px solid #C1DFFF;
padding: 10px;

-webkit-box-shadow: 0px 0px 0px 1px #326499;
box-shadow: 0px 0px 0px 1px #326499;

background: #3b679e; /* Old browsers */
background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

.demo6 .menu-item h3{
text-shadow: 1px 1px 1px #E3ECF4;
filter: dropshadow(color=#E3ECF4, offx=1, offy=1);

color: #1F3754;
font-family: "PT Sans","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.demo6 .menu-item{
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-ms-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;

float: left;
padding: 0 25px 10px 10px;
margin-top: -15px;
}

.demo6 .menu-item:hover{
margin-top:-20px;

-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-20deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-20deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-20deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-20deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-20deg) skewY(0deg);
}

</style>

<div class="demo6"><div class="menu-item"><h3>Menu item 1</h3></div><div class="menu-item"><h3>Menu item 2</h3></div><div class="menu-item"><h3>Menu item 3</h3></div>

Bear in mind that your CSS should go into a CSS file so, unless you are going to copy and paste this directly into a webpage, you'll need to remove the opening and closing style tags.

You might have to play around with the margins and padding to get everything just right on your own site (because I have other CSS that affects how my header content is laid out).

Hopefully this has shown you how easy it is to implement really effective Web design using simple CSS design tools and no JavaScript.

Slimming down your blog or website will help improve performance and the user experience, which should ultimately lead to higher page rankings and more traffic from Google search.

If you are just starting a new blog or website, then I recommend you check out some of the leading website builders that allow you to work with CSS directly.

What CSS3 techniques do you use to improve the look and feel of your site's design? Share your CSS3 related design tips in the comments.

Old HTML tables can be upgraded into a responsive design with CSS3 and media queries

Mobile first, responsive Web design is something that can't be ignored because devices likes tablets and smartphones are quickly becoming the dominant browsing device of choice for the burgeoning millennial market.

If you are one of those unlucky people to have built your site more than a few years ago, on a platform that used the old table based Web design paradigm, then you have two choices: