Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: High

CSS gradients let you display smooth transitions between two or more specified colors.

• CSS defines two types of gradients:
  1. Linear Gradients (goes down/up/left/right/diagonally)
  2. Radial Gradients (defined by their center)

CSS Linear Gradients

• To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax

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

- Linear Gradient - Top to Bottom (this is default) - Linear Gradient - Left to Right

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

- Linear Gradient - Diagonal

     background: linear-gradient(to bottom right, color-stop1, color-stop2, ...);

- Using Angles

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

- Using Multiple Color Stops

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

- Using Transparency

     background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

- Repeating a linear-gradient

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

CSS Radial Gradients

• A radial gradient is defined by its center.
• To create a radial gradient you must also define at least two color stops.

Syntax

     background: radial-gradient(shape size at position, start-color, ..., last-color);

• By default, shape is ellipse, size is farthest-corner, and position is center.

- Radial Gradient - Evenly Spaced Color Stops (this is default)

        background: radial-gradient(red, yellow, green);

Radial Gradient - Differently Spaced Color Stops

        background: radial-gradient(red 5%, yellow 15%, green 60%);