Notes for CSS for Designers

By Scott Granneman & Jans Carton

Find the presentation at http://www.granneman.com/presentations/

## Slide 5

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 6

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 7

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 8

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 9

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 11

Chinese Porcelain Vase by design56, licensed from Can Stock Photo, 2014-08-04

http://www.canstockphoto.com/chinese-porcelain-vase-10824229.html

## Slide 12

A Cardboard Box with Fill Packaging Peanuts by MaxalTamor, licensed from Can Stock Photo, 2014-08-04

http://www.canstockphoto.com/a-cardboard-box-with-fill-packaging-19324250.html

## Slide 13

Giftwrapped by Lightreign, licensed from Can Stock Photo, 2014-08-04

http://www.canstockphoto.com/giftwrapped-1395457.html

## Slide 17

Designs should not conflict with the padding

## Slide 23

Adjacent siblings

## Slide 27

http://codepen.io/websanity/pen/veJdq?editors=110

## Slide 31

http://ringvemedia.com/shanghai

## Slide 32

http://ringvemedia.com/shanghai

## Slide 33

http://ringvemedia.com/shanghai

## Slide 34

http://ringvemedia.com/shanghai

## Slide 46

https://www.chromestatus.com/feature/5785905063264256

http://www.quirksmode.org/css/images/gradients_desktop.html

## Slide 51

http://codepen.io/websanity/pen/Hdwuq

## Slide 52

http://codepen.io/websanity/pen/esEfz?editors=110

## Slide 53

http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt

## Slide 56

http://codepen.io/websanity/pen/oGpuc?editors=110

## Slide 60

http://codepen.io/websanity/pen/vwLas?editors=010

## Slide 61

http://codepen.io/websanity/pen/vwLas?editors=010

## Slide 62

http://codepen.io/websanity/pen/vwLas?editors=010

## Slide 69

http://ianlunn.github.io/Hover/

## Slide 72

http://dev.w3.org/csswg/mediaqueries4/#media-types

Browsers do not support speech

## Slide 74

http://www.webstandards.org/learn/faq/

## Slide 75

http://www.webstandards.org/learn/faq/

## Slide 76

http://www.stlzoo.org/animals/abouttheanimals/mammals/asianelephant/

## Slide 77

http://www.stlzoo.org/animals/abouttheanimals/mammals/asianelephant/

## Slide 78

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries