CSS3: use of new border properties
As discussed in the previous post about CSS3 (http://skjorrface.blogspot.it/2013/05/css3-what-is-it-and-whats-new.html), there are a lot of new features
that will let webmasters avoid the use of external programs such as Adobe Suite programs etc. One of these features is new css3 border properties: border-radius, box-shadow and border-image. Old border properties such as border-color are still available. Let's thus see some practical examples:
border-radius: this property lets you automatically choose the border "arching", you can, for example, specify it in pixel: border-radius: 10px; With that CSS3 instruction you will just "round" corners by 10 pixels. Obviously you can choose to round each of the four borders differently by typing this way: border-radius: 10px, 10px, 10px, 8px; Order from first to last attribute is top left, top right, bottom right, bottom left;
box-shadow: instead of putting heavy backgrounds on each wanted div or paragraph to have shadow effects, you can now just use this: box-shadow: 10px, 10px, 10px, 10px, #00000; first four attributes are horizontal and vertical length (of the shadow), third attribute describes how "blurred" your shadow must be and fouth one how much spread you want your shadow to be. #00000 is obviously the color we want the shadow to be. We can add "inset" like this box-shadow: inset, 10px, 10px, 10px, 8px, #00000; if we want to inset the shadow;
border-image: this is the easiest one to use but the most (in my humble opinion), powerful and useful: it allows you to choose a custom image as border: border-image: source, slice, width, outset, repeat. That was the syntax, a practical example is: border-image: url(customborder.jpg), 20, 25, repeat; You practically see what slice and outset and repeat parameters are for.
Browser support with these three properties is by now almost complete, but if you don't want to run risks with older or non CSS3 supporting browsers you might want to use -o- prefix before border-image like this: -o-border-image (-o stands for Opera), you might also want to use -webkit- prefix with border-radius and box-shadow (Safari uses Webkit). I didn't include "visual examples" to let readers test their own code, or, if they like to see results first, to use this really useful resource: http://css3generator.com/. There are a lot of tricks you can create with these three new properties, we'll see some in next posts, stay tuned!
