CSS3 Introduction
CSS3 is the latest standard for CSS.
CSS3 is completely backwards-compatible with earlier versions of CSS.
This section teaches you about the new features in CSS3!
CSS3 Modules
CSS3 has been split into "modules". It contains the "old CSS specification" (which has been split into smaller pieces). In addition, new modules are added.
Some of the most important CSS3 modules are:
- Selectors
- Box Model
- Backgrounds and Borders
- Image Values and Replaced Content
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple Column Layout
- User Interface
CSS3 Rounded Corners
With the CSS3
border-radius property, you can give any element "rounded corners".Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
Property
| |||||
|---|---|---|---|---|---|
border-radius
|
5.0
4.0 -webkit-
|
9.0
|
4.0
3.0 -moz-
|
5.0
3.1 -webkit-
|
10.5
|
CSS3 border-radius Property
With CSS3, you can give any element "rounded corners", by using the
border-radius property.
Here are three examples:
1. Rounded corners for an element with a specified background color:
Example
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px; }
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px; }
CSS3 border-radius - Specify Each Corner
If you specify only one value for the
border-radius property, this radius will be applied to all 4 corners.
However, you can specify each corner separately if you wish. Here are the rules:
- Four values: first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner
- Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right
- Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner
- One value: all four corners are rounded equally
Here are three examples:
1. Four values - border-radius: 15px 50px 30px 5px:
2. Three values - border-radius: 15px 50px 30px:
3. Two values - border-radius: 15px 50px:
Here is the code:
Example
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
You could also create elliptical corners:
Example
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px; }
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;}
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;}
CSS3 Border Images
With the CSS3
border-image property, you can set an image to be used as the border around an element.Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
CSS3 border-image Property
The CSS3
border-image property allows you to specify an image to be used instead of the normal border around an element.
The property has three parts:
- The image to use as the border
- Where to slice the image
- Define whether the middle sections should be repeated or stretched
We will use the following image (called "border.png"):
he
border-image property takes the image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify.
Note: For
border-image to work, the element also needs the border property set!
Here, the middle sections of the image are repeated to create the border:
CSS3 Backgrounds
CSS3 contains a few new background properties, which allow greater control of the background element.
In this chapter you will learn how to add multiple background images to one element.
You will also learn about the following new CSS3 properties:
background-sizebackground-originbackground-clip
CSS3 Colors
CSS supports color names, hexadecimal and RGB colors.
In addition, CSS3 also introduces:
- RGBA colors
- HSL colors
- HSLA colors
- opacity
CSS3 Gradients
CSS3 gradients let you display smooth transitions between two or more specified colors.
Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.
CSS3 defines two types of gradients:
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
