With CSS 3 you can easily create some awesome effects, like nice borders, opacity-effects, roundings or beautiful text effects. How you could easily use it to improve your site i want to show in this tutorial series. In the first two tutorials we start with some basics and then move on to some more sophisticated things.
Remember CSS3 is not supported in all browsers, above all on old Internet Explorer Versions (prior IE 9) most effects will not work, but for the good part most modern mobile browser nd Chrome Safari (both Webkit) and Mozilla offer full support for CSS 3. A very nice overview table about CSS Browser support, you can find at http://www.normansblog.de/demos/browser-support-checklist-css3/.
Rounded corners
Let's start with something easy - rounded corners.
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
This creates a rounded border by the size of 10px on all corners of the element. -moz and -webkit-border-radius are for older Mozilla and Webkit browser versions - the current one's support border-radius. You can also set the border-radius for each corner and even for specify how the rounding should look. For example:
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;
If either value is zero, the corner will not be round. There are like always in CSS some shorthands like border-radius: 10px 8px 6px 4px; When you set a border, like in our example: border: 1px solid #666; you can also add an border color to the rounding.
Opacity
Opacity is even easier to use then border-radius, with it you can create also some stunning effects. The strength of the transparency scales from 0 (complete transparent) to 1 (complete opaque).
In this example we use an absolute black div element overlay with 20 percent opacity over the picture and make it complete transparent on mouse hover.
.overlay_div {
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.2;
}
.overlay_div:hover {
opacity: 0;
}
To get the above example working you need an surrounding Div-Element with position: relative, which "traps" the inner, absolute div. Opacity effects all child-elements, so for example if you set an div element to opacity: 0.8 and have some text in it, it will also get transparent.
As you can see with CSS 3 you can easily create amazing effects on your website. Be tuned for Part 2, where we are going to take a look at Shadows (box-shadow, text-shadow etc.) and some more stunning effects!
