Estelle Weyl

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

Plaid

Metal Grid

Classic

Disco Ball

Star of David

Retro 1967

Seat Cushion

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: palegoldenrod;
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%);

Prefixed Linear Gradient Syntax

/* Old Syntax */
background-image:
     gradient(-prefix-linear, 0 0, 0 100%, indianred, palegoldenrod);

/* prefixed syntax // all the same */
background-image:
     -prefix-linear-gradient(indianred, palegoldenrod);

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

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

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

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

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)

Three Versions of Linear Gradient Syntax

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

/* Supported prefixed syntax // all the same */
background-image:
  linear-gradient(top, indianred 0%, palegoldenrod 100%);

/* W3C Standards Syntax
  (-moz- in FF10, no prefix in FF16 / Opera 12.1) */ 
background-image:
  linear-gradient(to bottom,
    indianred 0%, palegoldenrod 100%);
/* SLIDE Works everywhere except old mobile */
Try it out

Basic Syntax: Linear Gradient


background: linear-gradient(indianred, palegoldenrod);
     
<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
Try it out

W3C Linear Gradient Angles


background: linear-gradient(indianred, palegoldenrod);
Try it

Angles ≠ Keyterms


background: linear-gradient(indianred, palegoldenrod);
Try it

Angles ≠ Keyterms

to top right
45deg

Edit the backgrounds

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

Color Stops

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

Hard Color Stops

.rainbow {
  background-image:
    linear-gradient(to bottom,
      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,
       palegoldenrod 40%,
       #BDD9D5 60%
    );
}

Stripes with background-size

background-color: palegoldenrod;
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: palegoldenrod;

background-image:
    linear-gradient(
    	rgba(255, 255, 255, 0.2) 50%,
    	rgba(255, 255, 255, 0) 50%),
    linear-gradient(to right,
    	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: palegoldenrod
    background-size: 100px 100px;
}

Tips on Gradient

Radial Gradients

Radial Gradients

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

Radial Gradients

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

Radial Gradients

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

Shape

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

Size

.thisSlide {
  background-image:
    radial-gradient(farthest-corner at 40px 50px, palegoldenrod 298px,
  #BDD9D5 300px);
}
  • 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

CSS Deep Dive

  • CSS Workshop -> Transforms