Part Five: 3 New Popular Properties in CSS3
With CSS3, the borders around elements can be made rounded without hacks. This is a huge help for designers and developers, who no longer have to rely on Photoshop to create rounded borders.
The new property is called: border-radius.
It applies rounded corners to an element. The radius of our rounded corners in the example below are 5px in every corner. You could specify different values for each corner or choose to only round individual corners.
.side-note {border-radius: 5px; background: #fff;}
(In our example above, we have two properties and two values in our declaration. Our selector is .side-note which refers to an element in our HTML document: <aside=”side-note”>
Of course, border-radius is a somewhat new property. So we may need to add some hacks to help old browsers understand our property. By the time you read this, the hacks may no longer be necessary.
.side-note {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
You can learn more about border-radius here: Border Radius Tutorial.
Box Shadows
Box Shadows are also available in CSS3. They are another great addition. Box Shadows used to be created using image editing programs such as Photoshop, but thanks to CSS3 we can now do this with just CSS. By default, shadows are drawn on the outside of elements.
.side-note {box-shadow: 3px 3px 7px #777;}
CSS Box Shadows take three length values and a color. The length values are a horizontal offset, a vertical offset and a blur.
We may need to add some hacks. But by the time you read this, the hacks may no longer be necessary.
.side-note {
-moz-box-shadow: 3px 3px 7px #777;
-webkit-box-shadow: 3px 3px 7px #777;
box-shadow: 3px 3px 7px #777;
}
You can learn more about box-shadow here: Box Shadow Tutorial.
Opacity
The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
.side-note {opacity: 0.5;}
You can learn more about opacity here: CSS3 Opacity Tutorial.
We’ve discussed 3 new CSS3 properties here and one old one (background: #fff;). (Background: #fff;) means that the element’s background will be white.
You can learn more about colors in this CSS3 color tutorial.
Let’s group our properties since the selector is the same for each one.
.side-note {border-radius: 5px; background: #ccc; box-shadow: 3px 3px 7px #777; opacity: 0.5;}
We’ve styled an element in our HTML5 page. It now has rounded corners, a light gray background color, a shadow behind it. It is also transparent. These are fun properties to work with. Try changing the values and see what happens.
We are now approaching the end of our tutorial. Let’s create a simple HTML5 web page and a CSS3 stylesheet to go with it.
Return to Top