Estelle Weyl

  • @estellevw
  • @standardista
  • http://www.standardista.com
  • This deck: http://estelle.github.com/gradients/30.html
  • Deeper Dive: http://estelle.github.com/gradients/

Plaid

Classic

Disco Ball

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()

Original Webkit Gradient Syntax

Really old Webkit Syntax (i.e. Older Android, iPhone devices)

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

Color Stop

color-stop(0-1, color)

Example

background-image:
    -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(0.5, rgba(255, 255, 255, 0.25)),
        color-stop(0.5, rgba(255, 255, 255, 0.5)),
        color-stop(1, rgba(255, 255, 255, 0)));
background-color: indianred;

Prefixed, older Linear Gradient Syntax

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

Color Stop

color length

Example

background-image:
     -prefix-linear-gradient(270deg,
        indianred 0%,
        palegoldenrod 100%);

W3C Standard Linear Gradient Syntax

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

Key differences:

  1. Use 'to' with keyterms
  2. Opposite direction for angles - counter clockwise (v. clockwise)
  3. 0deg is from left (v. 0deg from bottom)

W3C Standard Linear Gradient Syntax

/* Archaic Syntax */
background-image:
     -webkit-gradient(linear, 0 0, 0 100%,
        color-stop(0.1, indianred),
        color-stop(0.9, palegoldenrod);


/* Supported prefixed syntax */
background-image:
     -prefix-linear-gradient(top,
        indianred 10%,
        palegoldenrod 90%);


/*  Standards Syntax FF16 / O 12.1 / Chrome 25 / IE 10 */ 
background-image:
    linear-gradient(to bottom,
       indianred 10%,
       palegoldenrod 90%); 

Magic Key Terms


background: linear-gradient(
     indianred, palegoldenrod);
     
<angle>
  to top
  to bottom
  to left
  to right
  to top left
  to top right
  to bottom left
  to bottom right

Prefixed Linear Gradient Syntax

background-image:
     -prefix-linear-gradient(
        indianred,
        palegoldenrod);


background-image:
     -prefix-linear-gradient(top,
        indianred,
        palegoldenrod);


background-image:
     -prefix-linear-gradient(270deg,
        indianred 0%,
        palegoldenrod 100%);

Prefixed Linear Syntax

Try it out

Standards Syntax

Try it out

Hard Stops & End Points

Try it out

With background size

Try it out

Repeating Linear Gradients

Try it out

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

We're not covering radial gradients. They're REALLY bad for performance reasons. But, the slides are here if you want to learn about them later.

Continue: Mobile CSS3: Main Deck

Continue: Mobile CSS3: Animation

Radial Gradients

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

Radial Gradients

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

Radial Gradients

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

Shape

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

Size

.thisSlide {
  background-image:
    radial-gradient(75% 75%,
     farthest-corner,
      palegoldenrod,
      #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%,
      palegoldenrod 50%);
  background-size: 100px 100px;
  background-repeat: repeat;
  background-color: red;
}

Estelle Weyl

  • @estellevw
  • @standardista
  • http://www.standardista.com

Up Next?