Discover HTML5 and CSS3 (JavaScript come too) - Part 6

Last chapter of this collection of posts about HTML5 and CSS3. In this one, I will continue talking about more CSS3 and the different new features we can use in our web desings.

One very interesting new feature in CSS3 is "rounding corners". Until now, when the desingers wanted to create rounding corners they use to work with different images to simulate this effect. With CSS3 and the property border-radius, you just need to declare the raidus for the corners, ex:

#content {
 margin-left: 20px;
 float: left;
 background-color: #ffffff;
 border-radius: 10px;
}

Unfortunately, some browsers don't support this feature and you need to declare the feature with other parameters (by adding a prefix like -moz or -webkit depends on the browser). Here you have a table with some features supported and not:

• border-radius: IE, Firefox (-moz-), Chrome (-webkit-), Safari (-webkit-), Opera
• box-shadow: IE, Firefox (-moz-), Chrome (-webkit-), Safari (-webkit-), Opera
• text-shadow: IE (NO), Firefox, Chrome, Safari, Opera
• opacity: IE, Firefox, Chrome, Safari, Opera
• gradient: IE (NO), Firefox (-moz-), Chrome (-webkit-), Safari (-webkit-), Opera (NO)
• multiple background-image: IE, Firefox, Chrome, Safari, Opera

This means that if you want Firefox shows the border-radius property, actually, what you need to do is use the property -moz-border-radius-; same happens with -webkit-border-radius- for the other two browsers. These are the different prefixes used by the browsers: 

• Internet Explorer -ms-
• Firefox -moz-
• Chrome -chorme- and -webkit-
• Safari -webkit-
• Opera -o-

Example:

#content {
 margin-left: 20px;
 float: left;
 width: 600px;
 padding: 20px 30px 20px 30px;
 background-color: #ffffff;
 -moz-border-radius: 10px;
 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -webkit-border-bottom-right-radius: 10px;
 border-radius: 10px;
}

It is important write always the "standard" property in last position, this way, when browsers are applying the properties, is the standar one the last to be applied.

On the other hand, the properties text-shadow and box-shadow allows you to draw shadows in the text and the delimited box of a text respectively. I will show you with some examples on the links.

h1 {
 text-shadow: #000000 0px 0px 5px;
}

The different parameters for the shadow are, first the colour, second horizontal offset from the text (right if positive), vertical offset and blur value. The box-shadow property, works quite similar but you will need to use particulary prefixes to be compatible with other browsers.

Regarding the selection of colours in your designs, CSS3 allows you to choose between three options, the classical hexadecimal code, rgb and hsl, Ex:

#block1 {
 background-color: #f0c425;
}

#block2 {
 background-color: rgb(240, 296, 37);
}

#block3 {
 background-color: hsl(47, 87%, 54%);
}

Probably the first two options you already know, one is a six alphanumercial characters and every two digits represent the red, green and blue colours. The second one is directly the red, green and blue. Finally the third one is for hue (0-360), saturation and ligthness similar to other standards like HSV or HSI. This option is more usefull if you are looking for some special color because with hue you can select the base colour and the other two parameters brings you the option to play with the base to find out wich fits better with your design.

Besides, you have another parameter to define the opacity just for the operators: rgb and hsl. It is a value between 0.0 and 1.0 you can declare directly as here below:

#content {
 background-color: rgba(255, 255, 255, 0.7);
}

or

.test {
 opacity: 0.5;
}

Gradients is a new feature implemented in CSS3 as a new way to add an image. This part is important, is an image not just a colour and you can use the following properties to use it: background-image, list-style-image and border-image. The bad news are that there is not a standard sintax to use gradients and Webkit and Mozilla use their own way to implement it. We can use linear or radial grandients as we made before with the canvas element. Take a look of how is written a gradient in CSS3:

#block4 {
 background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.35, rgb(103,139,41)),
 color-stop(0.68, rgb(134,167,79)),
 color-stop(0.84, rgb(161,201,98))
 );
 background-image: -moz-linear-gradient(
 center bottom,
 rgb(103,139,41) 35%,
 rgb(134,167,79) 68%,
 rgb(161,201,98) 84%
 );
}

We use the gradient to set the property background-image. There are two rules for that: one using the Webkit syntax and the Firefox one.

And this is all folks. Let's see what we get in our future posts, maybe something related with MVC ;) See you!