New Features in CSS 3.0 Tutorial: Border Radius, Background Images, and More
Dive into the latest CSS 3.0 standard with this tutorial covering features like the border-radius property for creating rounded corners, the border-image property for custom borders, and utilizing multiple background images with CSS 3.0. Enhance your web design skills and stay updated with the latest web styling techniques.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
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, 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.
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.
Colors HSLA Colors 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).
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
Gradients Radial Gradients
Shadow Effects 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: 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 CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
Text Word Wrapping The CSS3 word-wrap property allows long words to be able to be broken and wrap onto the next line. Word Breaking The CSS3 word-break property specifies line breaking rules.
Animations CSS 3.0 animations allows animation of most HTML elements without using JavaScript or Flash! What are CSS 3.0 Animations? can change as many CSS properties you want, as many times you want. An animation lets an element gradually change from one style to another. You animation. Keyframes hold what styles the element will have at certain times. To use CSS 3.0 animation, you must first specify some keyframes for the 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!
