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;

Try it out

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:

Use 'to' with keyterms
Opposite direction for angles - counter clockwise (v. clockwise)
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

vendor-prefix ‘linear-gradient’ and ‘radial-gradient’
keyword ‘transparent’ = rgba(0,0,0,0) so fades to grey
create effects with color stops at same location
create effects by adding multiple gradients, playing with position and size
learn from others: Lea Verou's Gradients, Estelle Weyl's Gradients, and Estelle's Flags
Use tools: John Allsopp's tool, Damian Galarza's tool, Colorzilla

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?

Mobile CSS3
CSS Workshop -> Transforms