CSS 3 Features

5 Techniques to Acquaint You With CSS 3

on Jan 1st 2009 with 115 comments

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

Rounded Corners Image

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>


  
 

  
 

  
 

  
 

  

  resizable image
  
 


</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

Rounded Corners Image

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 “border-radius”.
We’ll first create a black div element and give it a black border.
The border is there because we need to "execute" the border-radius property.

We do this like so:

#round {	
background-color: #000;
border: 1px solid #000;
}

Once you’ve created the div, refresh the page. You should now see a black, square div with a width and height of approximately 300px. Now, let’s work on the rounded corners. This can be accomplished with only two lines of code.

#round {	
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

}

As you can see, we’ve added two nearly identical lines, with the only difference being "-moz" and "-webkit". -moz refers to Mozilla Firefox, and Safari/Google Chrome use the -webkit prefix.

Refresh your HTML document and you’ll see a rounded div – nice and smooth. Well, smooth… In Firefox and Safari, yes, but Chrome renders a slightly pixelated edge.

Back to our code, "border-radius" needs a value. This value determines the sharpness of the corner; the bigger the value, the rounder the corner – just as in Photoshop. To the best of my knowledge, there’s no maximum value for this element.

3: Individually Rounded Corners

Rounded Corners Image

Creating traditional rounded corners can drain your day. Luckily, CSS3 solves it!

This property is quite similar to our previous one. It also uses "border-radius", however we’ll slightly modify our code.

We do it like this:

#indie {	
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
 }

We’ve added "topright" and "bottomright" to our code; this refers to the top and bottom right corner of the div element. With these new properties, you can easily implement a “tab-like” feature.

The additions to be used are "topright", "bottomright", "bottomleft" and "topleft".

4: Changing Opacity, The CSS3 Way

Rounded Corners Image

Currently, you need to write several lines of CSS to adjust the opacity of elements (hacks). Once again, CSS 3 simplifies the process.

This line is easy to remember as well, it’s just "opacity: value;". Easy right?
Our code will be:

#opacity {	
background-color: #000;
opacity: 0.3;
}

5: Drop Shadow!

Rounded Corners Image

In Photoshop, it’s a trivial task to create drop shadows. However when implementing them into your web applications, you’d probably save the shadow as an image, and then use it as a background. No More! (At least for the modern browsers.) Unfortunately, only Safari and Chrome support the feature at this time.

The code requires just one line, but it’s quite long and has 4 different values!

-webkit-box-shadow: 3px 5px 10px #ccc;

For the first value, I’ve used 3px. This one determines the horizontal distance between the drop shadow and the div element. Moving along, the second value, 5px, determines the vertical distance between the shadow and the box.

Yet there is another px value, 10px. This is the radius of the shadow – which in plain English means the blur of the shadow, or how "wide" the gradient is.

Finally, the last value determines the color of the shadow. This means the shadow is not only limited to grayscale; we can also use red (#f00) as a value, which renders a bright, red shadow.

For our final code, it comes down to the following:

#shadow {	
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 10px #ccc;
}

As you can see I’ve given the div a white background, a black border and a light grey shadow.

6: Resize It!

Rounded Corners Image

With the most recent version of CSS, it’s possible to resize elements. (It currently only works in Safari.)

With this code, it’s possible to make a tiny triangle appear in the bottom right corner of an element. You may then drag it to resize. The code to follow is yet again very easy, and just requires one line and is supported by some older elements you might already know. These are "max-width", "max-height", "min-width" and "min-height".

The code is as follows:

#resize {	
background-color: #fff;
border: 1px solid #000;
resize: both;
 overflow: auto;
}

In the code I’ve used 2 additional lines to our normal CSS, "resize: both;" and "overflow: auto;". The line with overflow is needed to make the resize work, it can be any sort of "overflow" value, as long as it’s there.

The other line I’ve used is "resize: both;". This line specifies that the element can be resized in both horizontal and vertical directions.

Conclusion

Rounded Corners Image

What should you take from this article? In the next few years, your job will become easier, webpages will load faster, and you’ll be left with more time for your family! Though you can’t rely on these effects to work in all browsers just yet – there’s absolutely nothing wrong with applying a rounded corner to a div in one browser, and not the other. Consider it an upgrade!

For more information on CSS3, you can visit http://www.css3.info.

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


Daan Weijers is Daan on Codecanyon
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Daan Weijers is a young web developer who started with webdesign a little year ago. His website is still in development stages, but will soon be online.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
← Older Comments