Lesson 2 CSS3 Properties
In this lesson we will learn some more advanced css3 properties and then we will try and see if you remember all that you have learned.
What you should know allready is- Have a basic understanding of CSS.
- Understand how HTML works.
- Understand how CSS and HTML work together and connect with each other.
Objective
This lesson will consist of Border Radius, Box Shadow ,Text Shadow ,RGBa
Border Radius
- border-radius: 10px;
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
This is shorthand for the border-radius it can be used to define all four corners all at once. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.
The first set of (1-4) values define the horizontal radii for all four corners. An optional second set of values, preceded by a ‘/’, define the vertical radii for all four corners. If only one set of values are supplied, these are used to determine both the vertical and horizontal equally.
If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii respectively. If bottom-left is omitted it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is supplied it is used to set all four radii equally.
Browser Support :- Opera 10.5+
- Firefox 1.0+ (with -moz prefix)
- Firefox 4.0 (standard CSS3 property)
- Safari 3.0+ (with -webkit prefix)
- Safari 5.0+ (standard CSS3 property)
- Google Chrome 3.0+ (with -webkit prefix)
- Google Chrome 5.0+ (standard CSS3 property)
- IE 9+
- border-radius: 10px;
- border-top-right-radius: 20px;
- * makes all sides 10px and then makes top right 20px
- Can Specify Sides Separately:
- -webkit-border-top-left-radius: 10px;
- -webkit-border-top-right-radius: 20px;
- -webkit-border-bottom-right-radius: 10px;
- -webkit-border-bottom-left-radius: 30px;
- -moz-border-radius-topleft: 10px;
- -moz-border-radius-topright: 20px;
- -moz-border-radius-bottomright: 10px;
- -moz-border-radius-bottomleft: 30px;
- border-top-left-radius: 10px;
- border-top-right-radius: 20px;
- border-bottom-right-radius: 10px;
- border-bottom-left-radius: 30px;
This is what the
border-radius:5px 10px 5px 10px / 10px 5px 10px 5px
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;