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 “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
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
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!
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!
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
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Pingback: Most Useful Web Design Posts From 2008 | Cardeo Design Blog
Pingback: Link Roundup: Week 12/29 - 01/04
Pingback: 5 techniques pour se familiariser avec les CSS 3… | Fredzone
Pingback: Chipping the web: January 5th -- Chip’s Quips
Pingback: 20090106 網摘 - 部落格經濟 - 網絡暴民 Jacky’s Blog
Pingback: Nick Sumpter » Blog Archive » CSS3 - Simplifying Standards Based Coding … I Hope!
Pingback: Tyler’s Blog » The Future of Web Markup
Pingback: COFFEE CUP||咖啡杯 » 50最佳CSS文章&资源
Pingback: Zaipul.Com » 20 Blogs you can’t live without!!
Pingback: En iyi CSS Makaleleri | MuGi Graphic System
Pingback: [Web] 連結分享 « 網站製作學習誌
Pingback: Los textos de qweos.net» Blog Archive » Ponerse al día con los nuevos estándares web
Pingback: Blox.Svbasi » En İyi 50 CSS Makalesi
Pingback: 20 Useful Resources for Learning about CSS3 - Six Revisions
Pingback: Selección de 20 recursos para el aprendizaje de CSS3 | Cosas sencillas
Pingback: آقای وبلاگ » 20 مرجع برای یادگیری CSS3
Pingback: persianhelp :: پرشين هلپ » Archive » CSS3 بیست مرجع برای یادگیری
Pingback: MyInkTrail: Best of the Web, January 2009 | My Ink Blog
Pingback: 20个有用的CSS3学习站点推荐！ | 胡言乱语
Pingback: 20 Useful Resources for Learning about CSS3
Pingback: 20 Useful Resources for Learning about CSS3