{Web Space Tutorials}

good tutorials, made easy

Basic CSS3

Introduction

Welcome to the first CSS3 tutorial. Here you will learn the basics of the new and improved CSS3. CSS3 is an extension of CSS2, so it is required that you already have a good understanding of CSS to understand this tutorial.

Today we will be going over four of the most useful new features of CSS3, text-shadow, box-shadow, border-radius, and rgba color. By the end of this tutorial you should understand how these tags work as well as have a basic understanding of the new tools in CSS3.

Prerequisites

For this tutorial it is recommended that you have:


Contents

  1. The basics of CSS3
  2. text-shadow
  3. box-shadow
  4. border-radius
  5. rgba color
  6. Try It Yourself
  7. Quiz

The Basics of CSS3

The basics of CSS3 are the same as in CSS2. If you have a strong understanding of CSS2, you should have no trouble diving into CSS3. Please note that CSS3 is new, so much of the new CSS3 styles will not work in old browsers. For compatibility you should always test your CSS3 styles in old browsers, and make backup code accordingly.


text-shadow.

The first CSS class we will be working with is the text-shadow class. Just as it sounds the text-shadow class will add drop shadows to your text. Obviously you wouldn't use this on body content but text-shadow can be very useful for headers and other short phrases.

The syntax for text-shadow used to vary depending on browsers and needed extra code to work, but as CSS3 became more defined the extra code is no longer needed. Now the code is pretty simple. Here is a sample.



text-shadow: 2px 2px 2px #000;

The numbers simply define how far away from the words, how thick, how blurry, and what color the shadow should be. If all you need is a simple drop shadow, with CSS3 you should always use text-shadow instead of an image. Search engines use the text on your page to place your page better in searches, text helps much more than an image would.


box-shadow

box-shadow, as the name implies, is a new CSS3 class that allows drop shadows to be placed on any block content. Meaning that now you can place a drop shadow on an image without the need of Photoshop. Also you can give a div a background color, and place a shadow on that, effectively giving you a nice looking background.

The syntax is identical to that of text-shadow, simply with box-shadow instead.

box-shadow: 2px 2px 2px #000; 

The numbers simply define how far away from the words, how thick, how blurry, and what color the shadow should be.


border-radius

The border-radius class is one of the most useful classes that has been added to CSS3. With the border-radius class you can now round those ugly pointed corners right in your code.

The syntax is similar to the other two classes, but slightly different.



border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;

As shown that code will put rounded corners on any div. The first set of numbers define the horizontal radius for all four corners, while the second set of numbers define the vertical radius for all four corners.
This is only if you want all the corners to be different curves, if you want all corners to be the same, the second set of numbers after the '/' is not needed. In fact if all the corners are exactly the same only one value is needed.


rgba

The last class we are going to learn about is not really a class at all. This is actually a property meaning it goes after a class. Use rgba instead of a rgb or a hex code to define color. Now some of you may be thinking, "What use is this? rgb or hex has always worked just fine." For the most part that is true, but the real trick behind rgba lies in the 'a'. The a in rgba stands for alpha, now you can easily define the opacity of your colors.



background: rgba(255, 0, 0, 0.5);

As you can see the syntax is nearly identical to that of the rgb property with one addition at the end, the alpha. The alpha works differently in that the value only ranges from 0 to 1, 0 being not transparent at all, and 1 being fully transparent.