• box-shadow: (inset) left top blur spread color;
  text-shadow: left top blur spread color;
  

• Transparent Shadows

  .trans { box-shadow: -10px 10px rgba(0,0,0,0.3);
           text-shadow: 0 21px 1px rgba(0,0,0,0.3);}

• Solid Shadows

  .solid { box-shadow: -10px 10px #999;
           text-shadow: 0 21px 1px #999;}

Text Shadow

.textshadow {
    text-shadow: 
    0 1px #cccccc, 	
    0 2px #c9c9c9, 
    0 3px #bbbbbb, 
    0 4px #b9b9b9, 
    0 5px #aaaaaa, 
    0 6px  1px  rgba(0, 0, 0, 0.1), 
    0 0    5px  rgba(0, 0, 0, 0.1), 
    0 1px  3px  rgba(0, 0, 0, 0.3), 
    0 3px  5px  rgba(0, 0, 0, 0.2), 
    0 5px  10px rgba(0, 0, 0, 0.25), 
    0 10px 10px rgba(0, 0, 0, 0.2), 
    0 20px 20px rgba(0, 0, 0, 0.15);
}

• Chrome
• Safari
• Firefox 3.5
• Opera 9.5
• IE 10?

Syntax

text-shadow:  0 2px 5px hsla(0, 0%, 0%, 0.2);
text-shadow: [horiz] [vert] [blur] [color];

• Example from Paul Irish's MotherEffingTextShadow
• John Allsop's text-shadow tool

@font-face {
    font-family: 'ChalkdusterRegular';
    src: url('chalkduster-webfont.eot');
    src: url('chalkduster-webfont.eot?#iefix') format('embedded-opentype'),
         url('chalkduster-webfont.woff') format('woff'),
         url('chalkduster-webfont.ttf') format('truetype'),
         url('chalkduster-webfont.svg#ChalkdusterRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: 'ChalkdusterRegular';
}

• FontSquirrel @font-face generator

@font-face {
  font-family: yourFontName;
  src: url(fontfile) [, url(fontfile)]*;
  [font-weight: bold|normal];
  [font-style: italic|normal];
  [charset: characterSet;]
}

• Google fonts

<link rel='stylesheet' 
  media='screen and (min-width: 320px) and (max-width: 480px)' 
  href='css/smartphone.css' />

@media screen {
  a {
    transition: background-color 200ms linear 50ms;
  }
}

@media print {
  a:after {
    content: "(" attr(href) ");
  }
}
  

• Chrome
• Safari 3.5
• Firefox 3.5
• Opera 9.5
• IE 9

1. all
2. aural
3. handheld
4. braille
5. embossed
6. print
7. projection
8. screen
9. tty
10. tv

<link media="screen" ...

<style> @import "myCSS.css"; ...

@import url(myCSS.css) screen; IE8+

@media screen {}

<?xml-stylesheet media="screen" ...

• (min/max)-width: viewport width
• (min/max)-height: viewport height
• (min/max)-device-width: screen width
• (min/max)-device-height: screen height
• orientation: portrait(h>w) | landscape(w>h)
• (min/max)-aspect-ratio: width/height
• (min/max)-device-aspect-ratio: device-width/height

media="only print and (color)"

media="only screen and (orientation: portrait)"

media="not screen and (color)"

media="print, screen and (min-width: 480px)"

@media screen and (-webkit-min-device-pixel-ratio: 2) {
 .iphone4 { /* high DPI */}
}
@screen and (transform-3d) {
  .transforms {}
}

Also works with (animation) and (transition)

body {
	-<prefix>-transition: all 1.5s linear;	
}
@media only screen and (orientation: portrait) {
	body{
	  background: indianred;
	}
}
@media only screen and (max-width: 480px) {
	body{
	  background: palegoldenrod;
	}
}

shrink this window to see the presentation change colors

column-count: 1;      
column-width: 10em;   
column-rule: 1px solid #bbb;
column-gap: 2em;      

• Chrome
• Safari 3.1
• Firefox 2
• Opera 11
• IE 10
• -webkit- and -moz-required

box-sizing: content-box | border-box

div {
width: 200px; 
height:100px; 
padding: 20px;
margin:20px;
border-width: 5px;
}

border-box replicates the old IE box model

Used to position horizontal and vertical stacks.

.box {
  display: box;
  box-orient:       horizontal       vertical     ;
}
.box .one, .box .two {
  box-flex: 1;
}
.box .three {
  box-flex: 3;
}

• Chrome
• Safari 3.1
• Firefox 2
• Opera 12
• IE 10
• -webkit-, -moz-, -ms- required

.box {
  display: box;
  box-pack: center
    start 
    end ;
  box-align: centerstartendstretch;
}

display: box ;

box-orient:  horizontal | vertical | inherit;
      
box-pack: start | end | center | justify;

box-align: start | end | center | baseline | stretch;

box-flex: integer | 0;

box-flex-group

box-ordinal-group

box-direction: normal | reverse | inherit;

box-lines:

• Quick tutorial
• IE 10 Support

display: flexbox | inline-flexbox;

flex-direction: lr | rl | tb | bt | inline | 
    inline-reverse | block | block-reverse

flex-order: integer | 1;
      
flex-pack: start | end | center | justify;

flex-align: auto | baseline;

• Chrome 14
• Safari 5.1
• Firefox 7
• Opera 12
• IE 10
• so far no support

W3C specs

The spec syntax changed drastically. Chrome is currently changing over. Other browsers have it on their plans.

Using grid system to lay out content, dividing available space into columns and rows

grid-columns:
grid-rows:
grid-column:
grid-row:
grid-cell:
grid-cell-stacking:
grid-template:
grid-column-span:
grid-row-span:
grid-column-sizing:
grid-row-sizing:
grig-flow:
grid-column-align:
grid-row-align:
grid-layer:

display: grid | inline-grid 

Avoid ‘background’ because it resets everything!

background-color: transparent;
background-image: none;
background-position: 0 0;
background-size: auto;
background-repeat: repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: scroll;

Can now set 4-value position!

background-position: bottom 20px right 20px; 

Example

• Chrome 14
• Safari 5.1
• Firefox 7
• Opera 11
• IE 10

background-size: auto | contain | cover | <length>

• Use for creating gradients backgrounds
• Needed for hiDPI images
• ‘contain’ grows/shrinks to fully fit
• ‘cover’ grows to min size that covers 100% of height & width

• Chrome
• Safari
• Firefox 4
• Opera 11
• IE 9
• add -moz- for FF 3.6 and earlier

background-clip: border-box | padding-box | content-box

• Chrome
• Safari
• Firefox 4
• Opera
• IE 9
• add -moz- for FF 3.6 and earlier

background-origin: border-box | padding-box | content-box

• Chrome
• Safari 5.1
• Firefox 4
• Opera
• IE 9
• add -moz- for FF 3.6, -webkit- for Safari 5

• Border properties & browser support

background: 
 img position / size repeat attachment origin clip, 
 img position / size repeat attachment box{1,2} bgcolor;    

background: 
 url(topImg.jpg) 0 0 / 30px 30px repeat scroll border-box content-box, 
 url(botImg.jpg) 15px 15px / 30px 30px fixed border-box #609;

If one ‘box’ value is present then it sets both 'background-origin' and 'background-clip' to that value. If two values are present, then the first sets 'background-origin' and the second 'background-clip'

border-image: source || slice / width / outset  || repeat;

• Chrome
• Safari 3.1
• Firefox 3.5
• Opera 10.5
• IE 10?

border-image-source: none | url() | <image>

border-image-slice: <number> | XX% {1,4} && fill

border-image-width: <length> | XX% | <number> | 1 | auto {1,4}

border-image-outset: <length> | <number> {1,4}	

border-image-repeat: stretch | repeat | round {1,2}		
	

S = 
W = 
stretchrepeatround 

border-image: url(gradient.png) 34 / 34px stretch;

word-wrap:  normal | break-word

• Chrome 1
• Safari 1
• Firefox 3.5
• Opera 10.5
• IE 5.5

• Chrome
• Safari
• Firefox 4
• Opera 11
• IE 9

.colA {
  width:50%;
  margin-right: 1em;
}
.colB {
  width: -moz-calc(50% - 1em);
}

• +, -, *, /, mod, min, and max operators.
• Vendor prefixed in Firefox
• Not yet ready for production
• Intro to calc()

html { 
    font-size: 62.5%; 
} 
p { 
    font-size: 13px; 
    font-size: 1.3rem; 
} 
small { 
    font-size: 11px; 
    font-size: 1.1rem; 
}

• Chrome 6
• Safari 5
• Firefox 3.6
• Opera 12?
• IE 9

• Article on rem
• Article on units of measurement