CSS3 Magic

7559f6cff1f5efc2d210965febd4d71c?s=47 Bermon Painter
March 10, 2012
Programming
6
700

CSS3 Magic

A quick rundown of some of the new features in CSS3. Notes here: https://gist.github.com/2011288

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

March 10, 2012
Tweet

More Decks by Bermon Painter

See All by Bermon Painter
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
0
10
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
0
71
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
0
72
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
2
110
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
0
160
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
0
94
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
2
260
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
0
150
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
3
1.5k

Other Decks in Programming

See All in Programming
3f7d9611fc919c98512b779cde637dfc?s=48 johnlinvc
2
570
D1804d3c315cbb850aaa88d2fbadc3cf?s=48 keitheis
0
160
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
180
3931098ae486b6df619050c63e24f6cc?s=48 osyo
0
220
2c9e59cb4bc0651504210cee88fc8b8a?s=48 zukakosan
0
460
83722380372c00bd75ac920f2089f6aa?s=48 zacky1972
0
200
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
0
240
6dc67d02d6b322ee317cece9b045317d?s=48 kalupas226
0
170
15217910de00471b472fecae440c6daf?s=48 ditn
2
440
53850955f15249a1a9dc49df6113e400?s=48 line_developers
5
1.5k
7b606c5039f083d13e2d2320ce6ddcfa?s=48 dqneo
2
420
75486cbfd37125f121cf4a6c5614601c?s=48 hideokamoto
1
120

Featured

See All Featured
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
125
20k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
331
29k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
101
4.9k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
15k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
26
1.8k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
86
3.9k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
346
20k
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
7
390
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
107
11k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
773
190k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
4
450
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
199
19k

Transcript

  1. CSS3 MAgic Saturday, March 10, 12

  2. GRaceful degradation Saturday, March 10, 12

  3. Progressive enhancement Saturday, March 10, 12

  4. 1. Content Saturday, March 10, 12

  5. 2. Presentation Saturday, March 10, 12

  6. 3. INTERACTIONS Saturday, March 10, 12

  7. New Selectors Saturday, March 10, 12

  8. Sibling Selector h1 ~ p Saturday, March 10, 12

  9. Attribute Selector img[src^=icon] Saturday, March 10, 12

  10. Attribute Selector img[src$=png] Saturday, March 10, 12

  11. Attribute Selector img[src*=document] Saturday, March 10, 12

  12. Psuedo Classes div:empty Saturday, March 10, 12

  13. Psuedo Classes :enabled, :disabled, :checked Saturday, March 10, 12

  14. Psuedo Classes p:first-of-type Saturday, March 10, 12

  15. Psuedo Classes li:last-child Saturday, March 10, 12

  16. Psuedo Classes strong *:not(span) Saturday, March 10, 12

  17. Psuedo Classes :nth-child(3n) Saturday, March 10, 12

  18. Psuedo Classes p:nth-of-type(3n) Saturday, March 10, 12

  19. Psuedo Classes p:nth-last-child() Saturday, March 10, 12

  20. Psuedo Classes p:nth-last-of-type() Saturday, March 10, 12

  21. Psuedo Classes p:only-child Saturday, March 10, 12

  22. Psuedo Classes p:only-of-type Saturday, March 10, 12

  23. Psuedo Classes ::selection Saturday, March 10, 12

  24. Psuedo Classes :target Saturday, March 10, 12

  25. New CSS3 Declarations Saturday, March 10, 12

  26. Declarations background-clip Saturday, March 10, 12

  27. Declarations background-size Saturday, March 10, 12

  28. Declarations background-image (multiples) Saturday, March 10, 12

  29. Declarations border-radius Saturday, March 10, 12

  30. Declarations box-shadow Saturday, March 10, 12

  31. Declarations columns & grids Saturday, March 10, 12

  32. Declarations opacity Saturday, March 10, 12

  33. Declarations resize Saturday, March 10, 12

  34. Declarations text-overflow Saturday, March 10, 12

  35. Declarations text-shadow Saturday, March 10, 12

  36. EXAMPLES https://gist.github.com/2011288 Saturday, March 10, 12