What's New in CSS3

CSS3 is a third generation of the CSS specification recommendations from the W3C

Here comes new selectors, pseudo elements and classes, properties and values specifically created to answer the needs and solve the problem of modern web design and development

Template Layout
Backgrounds and Borders
Ruby
Basic UI
Basic Box Model
Grid Positioning
Speech
Marquee
Style Attribute Syntax

Cascading and Inheritance
Color
Fonts
Text
Generated Content for paged Media
Generated and Replaced Content
Values and Units

CSS3 Modularties

Web Fonts
Line Layout
Flexible Box Layout
Image Values
2D Transformations
3D Transformations
Selectors

Behavioral Extension to CSS
Namespaces
Transitions
Animations
View Module
Media Queries
Paged Media

CSS3 Modularties

Colors in CSS3

Regular RGB - rgb(x, x, x): rgb(255, 0, 0)

RGB with alpha-opacity - rgba(x, x, x, y): rgba(255, 0, 0, 0.2)

RGBA Color

Alpha opacity:

0.0 = 0% = No Opacity

1.0 = 100% = Full Opacity

Colors in CSS3 - HSL

HSL Stands for Hue, Saturation and Luminosity (Lightness)

1. Regular HSL - hsl (x%, x%, x%) - hsl (0, 100%, 50%)

2. HSL with alpha-opacity -

hsla (x%, x%, x%, y)

hsla (0, 100%, 50%, 0.5)

HSL Color Wheel

Red - 0 Degree

Yellow - 60 Degree

Green - 120 Degree

Cyan - 180 Degree

Blue - 240 Degree

Magneta - 300 Degree

CSS3 Browser Compatibility

No Older Version

of

Internet Explorer

Time to move on to

Firefox & Chrome

CSS3 Properties

CSS3 Borders

Numbers followed by -webkit, -moz, or -o- specify the first version that work with a prefix

CSS3 Borders

CSS3 Backgrounds

CSS3 Multiple Backgrounds

Allows you to add multiple background images for an element
Different background elements are separated by comma
Let us see an example

CSS3 Background Properties

background : A shorthand property for setting all the background properties in one direction
background-clip : Specifies the painting area of the background images
background-images : Specifies one or more background images for an element
background-origin: Specifies the positioning area of the background images
background-size: Specifies the size of the background images

CSS3 Gradients

Linear Gradients
Radial Gradients

CSS3 Linear Gradient

Syntax:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Example

Result