5 Techniques to Acquaint You With CSS 3
CSS is a well-known, widely used language to style websites. With version three in the works, many time-saving features will be implemented. Although only the most modern browsers currently support these effects, it’s still fun to see what’s around the corner! In this tutorial I’ll show you five techniques.
1: The Basic Markup
Before we start with this tutorial, let’s create the basic markup that we will be working with throughout the tutorial.
For our xHTML, we’ll need the following div elements:
- #round, to apply rounded corner CSS3 code on.
- #indie, to apply an individually rounded corner on.
- #opacity, to show the new ways CSS3 handles with opacity.
- #shadow, to show you how to create drop shadows, without Photoshop.
- #resize, to show you a new sort of CSS, to resize elements.
For this, our xHTML will be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>An Introduction to CSS3; A Nettuts Tutorial</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body></body> </html>
In our HTML document, we’ve created some div elements, with the IDs stated above.
Let’s quickly create a base CSS file.
body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
/*rest of the code will come here, later*/
As you can see, we’ve given all div tags a width and height of 300px each. We also forced them to float to the left, leaving us with a page full of divs to play with.
2: Rounded Corners
It can be a hassle to create rounded corners. First, you must create the images. Next, you have to create more elements to have the rounded corners set as backgrounds. You know the drill.
This problem can be easily solved with CSS3, with the property called â
Recomended posts
Vote for this post!
 
 |
IF YOU LIKE THIS, VOTE FOR IT