Estelle Weyl · Standardista.com · @estellevw ·Press key to advance. http://estelle.github.com/cssintro/

CSS:
Design Tools to
Style Your Web Content

estelle.github.com/cssintro/

Me

Estelle Weyl

www.standardista.com

@estellevw

@standardista

HTML5 and CSS3 for the Real WorldHTML5: The Definitive GuideMObile HTML5Web Performance Daybook

CSS3 Features Displaying now?

  • CSS3 Selectors
  • linear gradients
  • opacity
  • RGBA colors
  • border-radius
  • transforms
  • transitions
  • animations
  • text-shadow
  • fonts

Opacity is from CSS2

Cascading Style Sheets (CSS)

Stylesheet language used to describe the presentation of a document written in HTML

HTML

<div id="flakes">
   <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
   <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
   <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
   <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
<div class="snowman"></div>

Separation of Concerns

Content

HTML

Presentation

CSS

Behavior

JavaScript

CSS tells the browser how HTML content is to be presented to the user

Why Use External Stylesheets:

  • Allows reusability
  • Eases maintainability
  • Changes are sitewide
  • Changes are instantaneous
  • Interchangeable presentation layer
Open in separate window
Open in separate window

Linking to CSS

<link rel="stylesheet" media="screen" href="/219/219.css">
Open in separate window
Open in separate window
Open in separate window

selectorA {
   property1: value1;
   property2: value2;
}

selectorB {
   property1: value3;
   property2: value4;
}

selector:pseudo-class::pseudo-element {
    -vendor-property: value;
}

selector[attribute],
selector ~ relation {
    property: -vendor-value;
    -vendor-property: -vendor-value;
    -vendor-property: weirdsyntax;
}

@at-rule {
    property: value;
 }

@at-rule {
    selector {
      property: value;
    }
    selector2 {
      property: value;
    }
 }

selectorA {
   property1: value1;
   property2: value2;
}

selectorB {
   property1: value3;
   property2: value4;
}

p {
   margin: 40px;
   color: magenta;
}

input[type="search"] {
   border-radius: 5px;
   background-image: url(image/search.jpg);
}

Lots 'o Selectors

  • *
  • E
  • .class
  • #id
  • E F
  • E > F
  • E + F
  • E[attribute]
  • E[attribute=value]
  • E[attribute~=value]
  • E[attribute|=value]
  • :first-child
  • :lang()
  • :before
  • ::before
  • ::selection
  • :after
  • ::after
  • :first-letter
  • ::first-letter
  • :first-line
  • ::first-line
  • E[attribute^=value]
  • E[attribute$=value]
  • E[attribute*=value]
  • E ~ F
  • :root
  • :last-child
  • :only-child
  • :nth-child()
  • :nth-last-child()
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-of-type()
  • :nth-last-of-type()
  • :empty
  • :not()
  • :target
  • :enabled
  • :disabled
  • :checked
  • :indeterminate
  • :default
  • :valid
  • :invalid
  • :in-range
  • :out-of-range
  • :required
  • :optional
  • :read-only
  • :read-write

Structural Selectors

li:first-child,
li:last-child {
  font-weight: bold;
}
li:nth-child(even) {
  background-color: #CCC;
}
li:nth-child(3) {
  color: #CCC;
}
li:first-of-type,
li:last-of-type{
  text-decoration:line-through;
}
li:nth-of-type(odd) {
  background-color: #FFF;
}
li:nth-of-type(4n) {
  color: #E2007A;
}
li:nth-of-type(3n-1) {
  text-align: right;
}

  1. Row 1
  2. Row 2
  3. Row 3
  4. Row 4
  5. Row 5
  6. Row 6
  7. Row 7
  8. Row 8
  9. Row 9
  10. Row 10

A simple Linear Gradient

background-image:
    linear-gradient(
    #3A67AB,
    #E8F6FF);
background-image:
    linear-gradient(
    to bottom,
    #3A67AB 0%,
    #E8F6FF 100%);
background-image:
    linear-gradient(180deg,
    #3A67AB 0%,
    #E8F6FF 100%);

prefix with -webkit- for old mobile webkits.

More Complex Linear Gradient

background-image:
  linear-gradient(180deg,
     rgba(255,255,255,0) 40%,
     #ffffff 40%,
     #ffffff 60%,
     rgba(255,255,255,0) 60%),
  linear-gradient(90deg,
     rgba(255,255,255,0) 40%,
     #ffffff 40%,
     #ffffff 60%,
     rgba(255,255,255,0) 60%),
  linear-gradient(45deg,
     rgba(255,255,255,0) 43%,
     #ffffff 43%,
     #ffffff 57%,
     rgba(255,255,255,0) 57%),
  linear-gradient(135deg,
     rgba(255,255,255,0) 43%,
     #ffffff 43%,
     #ffffff 57%,
     rgba(255,255,255,0) 57%);

Gradients

background: linear-gradient(
90deg,
#E468E8 0%,
#E169FF 33%,
#4FBFF7 66%,
#2C4299 100%);
             
 Angle
             
 First stop
 Second stop
background: radial-gradient(circle at 4% 12%,
#4697AB,
#F7F9FA,
#C344C7 40%);
  
  

 Left/Right
 Top/Bottom
 colorstop 

Gradient Foo

Opacity

opacity: 1;
opacity: 0.75;
opacity: 0.5;
opacity: 0.25;
opacity: 0;

AlphaTransparency

color: rgba(0, 0, 0, 1);
background-color: rgba(58, 103, 171, 1);
color: rgba(0, 0, 0, 0.75);
background-color: rgba(58, 103, 171, 0.75);
color: rgba(0, 0, 0, 0.5;
background-color: rgba(58, 103, 171, 0.5);
color: rgba(0, 0, 0, 0.25);
background-color: rgba(58, 103, 171, 0.25);
color: rgba(0, 0, 0, 0)
background-color: rgba(58, 103, 171, 0);

HSLA

color:hsla(
   328, 	 H 
blah
100%, S
44%, L
1.00 A
);
HSLA Colors

border-radius

Border on slides, code & showflakes

border-radius: 0;
border-radius: 20px;
border-radius: 50%;

border-radius

.circle {border-radius: 50%;}
.oval { border-radius: 50%;}
.different { border-radius: 10px 30px;}
.elliptical { border-radius: 10px / 30px;}

transitions

Enables the transition of properties from one state to the next over a defined length of time

  • transition-property: properties (or 'all') that transition
  • transition-duration: s or ms it takes to transition
  • transition-timing-function: bezier curve of transition
  • transition-delay: s or ms before transition starts
  • transition: shorthand for 4 transition properties

transitions

code {
   transition: color, font-size, background-color 0.5s ease-in 50ms;
}

Animation Essentials

  • @keyframes
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-delay
  • animation-fill-mode
  • animation (shorthand)

Keyframes

@keyframes falling {

    0% {
      top: -40px;
    }

    100% {
      top: 1000px;
    }

}

Granular animation control

@keyframes falling {

    0% {
      top: -40px;
    }

    10% {
      top: 400px;
    }

    90% {
      top: 560px;
    }

    100% {
      top: 1000px;
    }

}

Hardware Acceleration

@keyframes falling {

    0%{
      transform: translate3d(0, 0, 0)
            rotate(0deg)
            scale(0.9, 0.9);
    }

    100% {
       transform: translate3d(0, 1000px, 0)
             rotate(360deg)
             scale(1.1, 1.1);
    }

}

‘animation-name’

.snowflake {
   ...
   -webkit-transform-origin: left -20px;
   -webkit-animation-name: falling; 

   transform-origin: left -20px;
   animation-name: falling; 
}

‘animation-duration’

.snowflake { 
  ...
  -webkit-transform-origin: left -20px;
  -webkit-animation-name: falling;
  -webkit-animation-duration: 3s;

  transform-origin: left -20px;
  animation-name: falling;
  animation-duration: 3s;
}

‘animation-timing-function’

.snowflake { transform-origin: left -20px;
  animation-name: falling;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
}
ease
linear
ease-in
ease-out
ease-in-out
step-start /* same as steps(1, start) */
step-end /* same as steps(1, end) */
steps( X, start|end) /* X = # of steps + when change of value occurs */
cubic-bezier(x1, y1, x2, y2)

-webkit-

Open in separate window

Tools for generating CSS?

Text Editors

WYSIWYG

  • Dreamweaver
  • Aloha Editor
  • Maqetta
  • BlueGriffon

Don't use word processing applications!!

Including CSS

External Style Sheet

<link href=“stylesheet” href=“path/file.css” />

Embedded Styles

<style>
   body {}
</style>

Inline Styles

<p style=“color: black”>Lorem ipsum</p>

Preprocessors

CSS preprocessors add functionality additions like variables, nesting, and mixins (during development).

  • Sass
  • Stylus
  • LESS

Debuggers

  • Firefox ➫ Firebug
  • Opera ➫ DragonFly
  • Internet Explorer ➫ F-12
  • Safari ➫ Web Inspector
  • Chrome ➫ Developer Tools
  • Mobile ➫ Weinre
  • Blackberry ➫ Remote debugging by IP
  • Mobile Chrome ➫ Tethered debugging

CSS Writing Tool

Open in separate window

CSS Writing Tools

Open in separate window

CSS Learning Resources

Thanks

Estelle Weyl

www.standardista.com

@estellevw

@standardista

HTML5 and CSS3 for the Real WorldHTML5: The Definitive GuideMObile HTML5Web Performance Daybook