1. Tutorial 4 Topic: CSS 3.0 Li Xu
Department of Systems Engineering and Engineering Management

2. What is CSS 3.0?
As previously mentioned, CSS stands for Cascading Style Sheets, which describes how HTML elements are to be displayed.
CSS 3.0 is the latest standard for CSS, and also completely backwards-compatible with earlier versions of CSS.
In this tutorial, we will discuss some new features in CSS 3.0

3. Border-Radius Property
With CSS 3.0, you can give any element "rounded corners", by using the border-radius property.
It is normally used like this:

4. Border-Radius Property
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
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.

5. Border-Image Property
The CSS 3.0 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
Original Image:

6. Backgrounds
CSS 3.0 allows you to add multiple background images for an element, through the background-image property.
The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

7. Backgrounds
Multiple background images can be specified using either the individual background properties (as above) or the background shorthand property.
The background-size property accepts multiple values for background size (using a comma-separated list), when working with multiple backgrounds.

8. Colors
CSS supports color names, hexadecimal and RGB colors. In addition, CSS3 also introduces: RGBA colors, HSL colors, HSLA colors, opacity
RGBA Colors
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

9. Colors HSL Colors HSL stands for Hue, Saturation and Lightness.
Hue is a degree on the color wheel (from 0 to 360):
0 (or 360) is red
120 is green
240 is blue
Saturation is a percentage value: 100% is the full color.
Lightness is also a percentage; 0% is dark (black) and 100% is white.

10. Colors HSLA Colors Opacity
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.
Opacity
Opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent). And the opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

11. Gradients Linear Gradients
CSS 3.0 gradients let you display smooth transitions between two or more specified colors.
CSS3 defines two types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Linear Gradients
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.
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

12. Gradients Radial Gradients A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.

13. Shadow Effects Next, add a color to the shadow:
The CSS3 text-shadow property applies shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):
Next, add a color to the shadow:
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Then, add a blur effect to the shadow:

14. Text Text Overflow CSS 3.0 contains several new text features:
word-wrap
word-break
Text Overflow
The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.

15. Text Word Wrapping Word Breaking
The CSS3 word-wrap property allows long words to be able to be broken and wrap onto the next line.
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Word Breaking
The CSS3 word-break property specifies line breaking rules.

16. Animations What are CSS 3.0 Animations?
CSS 3.0 animations allows animation of most HTML elements without using JavaScript or Flash!
What are CSS 3.0 Animations?
An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want.
To use CSS 3.0 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Rule
When you specify CSS styles inside rule, the animation will gradually change from the current style to the new style at certain times.

17. There are also some useful features available in CSS 3
There are also some useful features available in CSS 3.0, you may access the following link to learn it more after this tutorial.
Thank you!

18. Question Time