Tutorial 4 Topic: CSS 3.0 - PowerPoint Presentation

Slide1

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 PropertyWith CSS 3.0,

you can give any element "rounded corners", by using the border-radius property.It is normally used like this:

Border-Radius PropertyHere 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 cornerThree values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-rightTwo values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left

cornerOne value: all four corners are rounded equally

Border-Image PropertyThe 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:

BackgroundsCSS 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.

BackgroundsMultiple 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.

ColorsCSS supports color names, hexadecimal and RGB colors. In addition, CSS3 also

introduces: RGBA colors, HSL colors, HSLA colors, opacityRGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

ColorsHSL 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.

ColorsHSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.

OpacityOpacity

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).

GradientsCSS 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

GradientsRadial Gradients

Shadow EffectsThe 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:

Then, add a blur effect to the shadow:

TextCSS 3.0 contains several new text features:

text-overflow word-wrap word-breakText Overflow

The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.

TextWord Wrapping

The CSS3 word-wrap property allows long words to be able to be broken and wrap onto the next line.

Word BreakingThe CSS3 word-break property specifies line breaking rules.

AnimationsCSS 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.

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 are also some useful features available in CSS 3.0, you may access the following link to learn it more after this tutorial.https://www.w3schools.com/css/css3_intro.asp

Thank you!

Question Time