Gradients

Why Gradients

Gradients already seen in this presentation

Background for Shadow
Border Image explanation
Multiple Backgrounds
Background Properties

Other Gradients

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 ➹