Course Outline

  1. Selectors
  2. Specificity
  3. Generated Content
  4. Media Queries
  5. Debugging
  6. Colors & Transparency
  7. Fonts / Typography
  8. Backgrounds & Borders
  9. Gradients
  10. Transforms
  11. Transitions & Animation
  12. Other Features

Part 9: Gradients

Why Gradients

Gradients already seen in this presentation

Background for Shadow
Border Image explanation
Multiple Backgrounds
Background Properties

Plaid

Metal Grid

Classic

Disco Ball

Star of David

Retro 1967

Seat Cushion

circles & Stripes

Brady Brunch

Gradients

  • Anywhere an image can be used (theoretically)
    • background-image, list-style-type, border-image, content, cursor
  • 4 Gradient Types
    • linear-gradient();
    • radial-gradient();
    • repeating-linear-gradient()
    • repeating-radial-gradient()

Linear Gradient Syntax

Really old Webkit

gradient(linear, startX startY, endX endY, color-stop, color-stop);

Current

linear-gradient(<angle>|<term>, <colorstop>, <colorstop>)

Future

linear-gradient(<angle>| to <term>, <colorstop>, <colorstop>)

Basic Linear Gradient Syntax

/* Previous Syntax */  
background-image: 
     gradient(linear, 0 0, 0 100%, brown, khaki);

/* Current prefixed syntax // all the same */  
background-image: 
     linear-gradient(brown, khaki); 

background-image: 
     linear-gradient(top, brown, khaki); 

background-image: 
     linear-gradient(270deg, brown, khaki); 

background-image: 
     linear-gradient(top, brown 0%, khaki 100%);

background-image:  
     linear-gradient(270deg, brown 0%, khaki 100%);        
  
/* future syntax (-moz- in FF10) */  
background-image: 
    -moz-linear-gradient(to bottom, brown, khaki);

Basic Syntax: Linear Gradient


background: linear-gradient(brown, khaki);
         
     
<angle>
  top
  bottom
  left
  right
  top left
  top right
  bottom left
  bottom right
top
(270deg)
bottom
(90deg)
left
(0deg/360deg)
right
(180deg)
top left
top right
bottom left
bottom right

Linear Gradient Angles


background: linear-gradient(brown, khaki);
Try it

Angles ≠ Keyterms


background: linear-gradient(brown, khaki);
Try it

Angles ≠ Keyterms

bottom left
45deg

Edit the backgrounds

In the next slides,
edit the code to
make really ugly rainbows

Adding Colors

  background-image: 
    linear-gradient(top, 
      red, 
      orange, 
      yellow, 
      green, 
      blue, 
      purple
    );

Color Stops

  background-image:
    linear-gradient(top,
      red 0%,
      orange 20%, 
      yellow 40%, 
      green 60%, 
      blue 80%, 
      purple 100%
    );

Hard Color Stops

.rainbow {
  background-image:
    linear-gradient(top,
      red 20%,
      orange 20%,
      orange 40%, 
      yellow 40%, 
      yellow 60%, 
      green 60%, 
      green 80%, 
      blue 80%
    ); 	
}

Stripes

.rainbow {
  background-image:
    repeating-linear-gradient(145deg,
      red 0,
      red 20px,
      orange 20px,
      orange 40px, 
      yellow 40px, 
      yellow 60px, 
      green 60px, 
      green 80px, 
      blue 80px,
      blue 100px,
      purple 100px,
      purple 120px
    ); 	
}

End Points

.centeredGradient {
  background-image:
    linear-gradient(90deg,
       #C7573A 40%,
       #BDD9D5 60%
    ); 	
}

Stripes with background-size

background-color: #C7573A;
background-image: 
   linear-gradient(135deg,
    rgba(255, 255, 255, 0.2) 25%, 
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0) 50%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(255, 255, 255, 0.2) 75%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0) 100%
);
background-size: 100px 100px;
background-repeat: repeat;

Different effects

background-color: #C7573A;

background-image: 
    linear-gradient(
    	rgba(255, 255, 255, 0.2) 50%, 
    	rgba(255, 255, 255, 0) 50%),
    linear-gradient(left,
    	rgba(255, 255, 255, 0.2) 50%, 
    	rgba(255, 255, 255, 0) 50%);
background-size: 100px 100px, 100px 100px;

Old Webkit

.iPhone, .android, .safari5andOlder {     
  background-image: 
    -webkit-gradient(linear, 0 0, 100% 0, 
        color-stop(0.5, rgba(255, 255, 255, 0.25)), 
        color-stop(0.5, rgba(255, 255, 255, 0)), 
        color-stop(1, rgba(255, 255, 255, 0)));
    background-color: #C7573A
    background-size: 100px 100px;
}

Tips on Gradient

  • Chrome 3*
    Chrome 10
  • Safari 4*
    Safari 5.1
  • Firefox 3.6
    Firefox 10**
  • Opera 11.1
     
  • Internet Explorer 10

Prefixed -webkit-, -moz-, -ms-, -o-

* legacy syntax, ** future syntax

Radial Gradients

Radial Gradients

.thisSlide {
  background-image: 
    radial-gradient( 
      #C7573A, 
      #BDD9D5);
}

Radial Gradients

.thisSlide {
  background-image: 
    radial-gradient(25% 35%, 
      #C7573A, 
      #BDD9D5);
}

Radial Gradients

.thisSlide {
  background-image: 
    radial-gradient(25% 35%, 
      #C7573A 20%, 
      #BDD9D5 20%);
}

Shape

.thisSlide {
  background-image: 
    radial-gradient(75% 75%, circle, 
      #C7573A 20%, 
      #BDD9D5 20%);
}
  • circle
  • ellipse

Size

.thisSlide {
  background-image: 
    radial-gradient(75% 75%, 
     farthest-corner,
      #C7573A, 
      #BDD9D5);
}
  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner
  • contain (same as closest-side)
  • cover (same as farthest-corner)

with Background size

.thisSlide {
  background-image: 
    radial-gradient(
     circle, 
      #BDD9D5 50%,
      #C7573A 50%);
  background-size: 100px 100px, 100px 100px;
  background-repeat: repeat;
  background-color: red;
}

Transforms

Next ➹