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
