Tutorial 4 Topic CSS 3 0 Li Xu

Tutorial 4 Topic: CSS 3. 0 Li Xu Email: xuli@se. cuhk. edu. hk Department of Systems Engineering and Engineering Management

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

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:

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

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:

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.

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.

Colors CSS supports color names, hexadecimal and RGB colors. In addition, CSS 3 also introduces: RGBA 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.

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.

Colors HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. 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).

Gradients CSS 3. 0 gradients let you display smooth transitions between two or more specified colors. CSS 3 defines two types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Linear Gradients

Gradients Radial Gradients

Shadow Effects The CSS 3 text-shadow property applies shadow to text. In its simplest use, you only specify the horizontal shadow (2 px) and the vertical shadow (2 px): Next, add a color to the shadow: Then, add a blur effect to the shadow:

Text CSS 3. 0 contains several new text features: text-overflow word-wrap word-break Text Overflow The CSS 3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.

Text Word Wrapping The CSS 3 word-wrap property allows long words to be able to be broken and wrap onto the next line. Word Breaking The CSS 3 word-break property specifies line breaking rules.

Animations CSS 3. 0 animations allows animation of most HTML elements without using Java. Script 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. The @keyframes Rule When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

There also some useful features available in CSS 3. 0, you may access the following link to learn it more after this tutorial. https: //www. w 3 schools. com/css 3_intro. asp