This Tutorial is for CSS3, Please click on right arrow icon for next page and left arrow icon for previous page

CSS 3 Includes

  1. Introduction
  2. Selectors
  3. Box Model
  4. Backgrounds
  5. Border
  6. Gradient
  7. Drop Shadows
  8. 2D Transformations
  9. 3D Transformations
  10. Transition
  11. Animations

1. Introduction

There's no difference. Just like HTML and HTML 5. CSS 3 is simply the latest 'version' of CSS which has more advanced features than earlier 'releases'.

2.Selectors

What is Selector

Selectors are one of the most important aspects of CSS as they are used to select elements on a web page so that they can be styled. You can define selectors in various ways.

  • Universal Selector
  • Element Type Selector
  • Id Selectors
  • Class Selectors
  • Descendant Selectors
  • Child Selectors
  • Grouping Selectors

Universal Selector


* {
        margin: 0;
        padding: 0;
    }
    
					

Element Type Selector


p {
    color: blue;
}
					

Id Selector


  
  

This is a warning!

Class Selector


  
  

This is a warning!

Descendant Selector



This is a heading

Child Selector



This is a heading

Grouping Selector



This is a heading of level 1

This is a heading of level 2

This is a heading of level 3

3.The Box Model

What is The Box Model?

The CSS box model is essentially a box that wraps around HTML elements, and it consists of

  • margins
  • borders
  • padding
  • the actual content

What is The Box Model?

4. background

The CSS3 provides several new properties to manipulate the background of an element like background clipping, multiple backgrounds, and the option to adjust the background size.

CSS3 gives you ability to add multiple backgrounds to a single element. The backgrounds are layered on the top of one another. The number of layers is determined by the number of comma-separated values in the background-image or background shorthand property.

Multiple Backgroud

5. Border

The CSS3 provides two new properties for styling the borders of an element in a more elegant way — the border-image property for adding the images to borders, and the border-radius property for making the rounded corners without using any images.

Border-image Example

Border using image
Border (Round, Stretched)

6. Gradient

Linear Gradients

  • Linear Gradient - Top to Bottom
  • Linear Gradient - Left to Right
  • Linear Gradient - Diagonal
  • Setting Direction of Linear Gradients Using Angles
  • Creating Linear Gradients Using Multiple Color Stops
  • Setting the Location Color Stops
  • Repeating the Linear Gradients

6.1 Linear Gradient - Top to Bottom



					
Linear Gradient - Top to Bottom

6.2 Linear Gradient - Left to Right



					
Linear Gradient - Left to Right

6.3 Linear Gradient - Diagonal



					
Linear Gradient - Diagonal

6.4 Setting Direction of Linear Gradients Using Angles



					
Setting Direction of Linear Gradients Using Angles

6.5 Creating Linear Gradients Using Multiple Color Stops



					
Creating Linear Gradients Using Multiple Color Stops

6.6 Setting the Location Color Stops



					
Setting the Location Color Stops

6.6 Setting the Location Color Stops



					
Setting the Location Color Stops

6.7 Repeating the Linear Gradients



					
Repeating the Linear Gradientss

Radial Gradients

  • Creating CSS3 Radial Gradients
  • Setting the Shape of Radial Gradients
  • Setting the Size of Radial Gradients
  • Repeating the Radial Gradients
  • CSS3 Transparency and Gradients

6.8 Creating CSS3 Radial Gradients



					
Creating CSS3 Radial Gradients

6.9 Setting the Shape of Radial Gradients



					
Setting the Shape of Radial Gradients

6.10 Setting the Size of Radial Gradients



					
Setting the Size of Radial Gradients

6.11 Repeating the Radial Gradients



					
Repeating the Radial Gradients

6.12 CSS3 Transparency and Gradients



					
CSS3 Transparency and Gradients

7.Drop Shadows

box-shadow Property

The box-shadow property can be used to add shadow to the element's boxes. You can even apply more than one shadow effects using a comma-separated list of shadows. The basic syntax of creating a box shadow can be given with:

box-shadow: offset-x offset-y blur-radius color;

Single Color Shadow
Multiple Color Shadow
Text Shadow

8.2D Transform

2D Transform Function

8.1 The translate() Function



Tortoise
The translate() Function

8.2 The rotate() Function



    
Star Fish
The rotate() Function

8.3 The scale() Function



    
Octopus
The scale() Function

8.3 The skew() Function



    
Snail
The skew() Function

8.3 The matrix() Function

The matrix() function can perform all of the 2D transformations such as translate, rotate, scale, and skew at once. It takes six parameters in the form of a matrix which can be written as matrix(a, b, c, d, e, f). The following section will show you how each of the 2D transformation functions can be represented using the matrix().

8.3 The matrix() Function

  • translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty); — where tx and ty are the horizontal and vertical translation values.
  • rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); — where a is the value in deg. You can swap the sin(a) and -sin(a) values to reverse the rotation. The maximum rotation you could perform is 360 degrees.
  • scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0); — where sx and sy are the horizontal and vertical scaling values.
  • skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0); — where ax and ay are the horizontal and vertical values in deg.

The matrix() Function Exapmle

Simple Matrix Function
Matrix Functio

9. 3D Transform

3D Transform Function

9.1 The translate3d() Function



    

Before Translation:

Diamond Card

After Translation:

Diamond Card
The translate3d() Function

9.2 The rotate3d() Function



    

Before Rotation:

Club Card

After Rotation:

Club Card
The rotate3d() Function

9.3 The scale3d() Function



    

Before Scaling:

Club Card

After Scaling:

Club Card
The scale3d() Function

9.4 The matrix3d() Function



    

Before Transform:

Heart Card

After Transform:

Heart Card
The matrix3d() Function
The matrix3d() Function 2

10. Transitions

CSS3 Transitions Property

Normally when the value of a CSS property changes, the rendered result is instantly updated. A common example is changing the background color of a button on mouse hover. In a normal scenario the background color of the button is changes immediately from the old property value to the new property value when you place the cursor over the button.

Performing Multiple Transitions



	

Performing Multiple Transitions
Transition Shorthand Property

11. Animations

3D Transform Function

Creating CSS3 Animations

The CSS3 animations take it a step further with keyframe-based animations that allow you to specify the changes in CSS properties over time as a set of keyframes, like flash animations. Creating CSS animations is a two step process, as shown in the example below:

  • The first step of building a CSS animation is to defining individual keyframes and naming an animation with a keyframes declaration.
  • The second step is referencing the keyframes by name using the animation-name property as well as adding animation-duration and other optional animation properties to control the animation's behavior.

However, it is not necessary to define the keyframes rules before referencing or applying it. The following example will show you how to animate a

box horizontally from one position to another using the CSS3 animation feature.

creating css3 animation

Defining Keyframes

Keyframes are used to specify the values for the animating properties at various stages of the animation. Keyframes are specified using a specialized CSS at-rule — @keyframes. The keyframe selector for a keyframe style rule starts with a percentage (%) or the keywords from (same as 0%) or to (same as 100%). The selector is used to specify where a keyframe is constructed along the duration of the animation.

Percentages represent a percentage of the animation duration, 0% represents the starting point of the animation, 100% represents the end point, 50% represents the midpoint and so on. That means, a 50% keyframe in a 2s animation would be 1s into an animation.

Defining Keyframes

Animation Shorthand Property

There are many properties to consider when creating the animations. However, it is also possible to specify all the animations properties in one single property to shorten the code.

The animation property is a shorthand property for setting all the individual animation properties at once in the listed order. For example:

shrot-hand property

THE END