CSS3 for Responsive Web Design (full day workshop)

CSS3 for Responsive Web Design (full day workshop)

This workshop’s not all talk as you’ll work with practical, everyday examples of responsive Web designs and see them working across a range of devices from mobile phones to desktops and everything in between. You’ll walk away with a full set of resources and example files too.

In just one day, Andy will teach you how to:

- Use table display properties to rearrange content
- Create cross-browser layouts using Flexible Box Layout (Flexbox)
- Improve typography with Multi-column Layout
- Make the most of tiny bitmaps with border images
- Use transformations and transitions

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

June 25, 2013
Tweet

Transcript

  1. None
  2. CSS3 for responsive web design with ANDREW CLARKE CSS3 FOR

    RESPONSIVE WEB DESIGN W I T H Y O U R H O S T , A N D R E W C L A R K E
  3. CSS3 for responsive web design with ANDREW CLARKE

  4. CSS3 for responsive web design with ANDREW CLARKE

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. CSS3 for responsive web design with ANDREW CLARKE T H

    A N K S T O @ C H R I S D A V I D M I L LS
  13. CSS3 for responsive web design with ANDREW CLARKE /* CHRIS'S

    BULLSHITTY FIX FOR 2009 FLEXBOX SHITNESS */ /* END OF CHRIS'S BULLSHITTY FIX FOR 2009 FLEXBOX SHITNESS */ N O T E S F R O M C H R I S
  14. CSS3 for responsive web design with ANDREW CLARKE T O

    D A Y ’ S S C H E D U L E 1 2 3 4 Getting started Introductions, CSS3 multi-column layout and rem units Experimental CSS Regions and exclusions CSS3 for elements CSS3 transitions, transforms, boxes and borders Flexible boxes Flexible layouts, visual content reordering, column height matching
  15. None
  16. None
  17. None
  18. CSS3 for responsive web design with ANDREW CLARKE O U

    R E XA M PL E S
  19. CSS3 for responsive web design with ANDREW CLARKE APES IN

    SPACE
  20. CSS3 for responsive web design with ANDREW CLARKE T W

    O T O O LS R E S P O N S I V E W E B D E S I G N Ghostlab Hammer for Mac
  21. CSS3 for responsive web design with ANDREW CLARKE O N

    E ( O R T W O ) B R O W S E R S R E S P O N S I V E W E B D E S I G N Chrome Canary Opera Next
  22. CSS3 for responsive web design with ANDREW CLARKE Navigate to

    chrome://flags Find “Enable experimental WebKit features” Restart Chrome G E T C H R O M E R E A D Y R E S P O N S I V E W E B D E S I G N
  23. CSS3 for responsive web design with ANDREW CLARKE A flexible

    grid Flexible images and media CSS3 media queries T H R E E I N G R E D I E N T S R E S P O N S I V E W E B D E S I G N
  24. CSS3 for responsive web design with ANDREW CLARKE A flexible

    grid Flexible images and media CSS3 media queries A lot more than that T H R E E I N G R E D I E N T S R E S P O N S I V E W E B D E S I G N
  25. CSS3 for responsive web design with ANDREW CLARKE P R

    O B L E M S W I T H C S S LA Y O U T Complicated maths Vertical centering Float drops Float clearing Same height columns Shrink-to-fit containers Source order dependence
  26. CSS3 for responsive web design with ANDREW CLARKE

  27. None
  28. None
  29. CSS3 for responsive web design with ANDREW CLARKE C S

    S 2 M E D I A TY P E S all braille embossed handheld print projection screen speech tv http://w3.org/TR/CSS2/media.html#media-types
  30. CSS3 for responsive web design with ANDREW CLARKE @media screen

    { }/*media*/ @media print { }/*media*/ @media screen, print { }/*media*/ @ M E D I A R U L E S Y N T A X C S S 2 M E D I A T Y P E S
  31. CSS3 for responsive web design with ANDREW CLARKE C S

    S 3 M E D I A P R O P E R T I E S aspect-ratio color device-aspect-ratio device-height device-pixel-ratio device-width grid height monochrome orientation resolution width http://w3.org/TR/css3-mediaqueries/
  32. CSS3 for responsive web design with ANDREW CLARKE @ M

    E D I A C O M B I N AT O R S C S S 3 M E D I A T Y P E S @media screen and (min-width : 48em) { }/*media*/ @media only screen and (orientation : portrait) { }/*media*/ @media not screen and (color) { }/*media*/
  33. None
  34. None
  35. None
  36. CSS3 for responsive web design with ANDREW CLARKE A D

    A P T I V E D E S I G N S @media screen and (min-width : 320px) and (max-width : 479px) { }/*media*/ @media screen and (min-width : 480px) and (max-width : 767px) { }/*media*/ D O N ’ T D O T H I S
  37. CSS3 for responsive web design with ANDREW CLARKE S M

    A L L S C R E E N F I R ST .box { margin-bottom : 1.45em; padding : .725em 12px; } @media only screen and (min-width : 48em) { .box { display : flex; flex-direction : row;} }/*48em*/
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. CSS3 for responsive web design with ANDREW CLARKE C O

    N T E N T B R E A K P O I N T S <header class="madness"> <div> <span class="madness__m">M</span> <span class="madness__a">a</span> <span class="madness__d">d</span> <span class="madness__n">n</span> <span class="madness__e">e</span> <span class="madness__s">s</span> <span class="madness__s2">s</span> </div> </header>
  46. CSS3 for responsive web design with ANDREW CLARKE C O

    N T E N T B R E A K P O I N T S @media only screen and (min-width : 444px) {…} @media only screen and (min-width : 560px) {…} @media only screen and (min-width : 585px) {…} @media only screen and (min-width : 747px) {…} @media only screen and (min-width : 856px) {…} @media only screen and (min-width : 1000px) {…} @media only screen and (min-width : 1382px) {…}
  47. None
  48. None
  49. None
  50. None
  51. CSS3 for responsive web design with ANDY CLARKE D I

    S P LA Y T A B L E
  52. None
  53. CSS3 for responsive web design with ANDREW CLARKE N A

    V I G AT I O N F I R ST <div class="navigation"> … </div><!-- navigation --> <div class="content"> <h1>Escape From The Planet Of The Apes</h1> … </div><!-- content --> D I S P L A Y T A B L E
  54. CSS3 for responsive web design with ANDREW CLARKE C O

    N T E N T F I R ST D I S P L A Y T A B L E <div class="content"> <h1>Escape From The Planet Of The Apes</h1> … </div><!-- content --> <nav class="navigation"> … </nav><!-- navigation -->
  55. None
  56. CSS3 for responsive web design with ANDREW CLARKE display :

    table Defines element as a block-level table display : table-caption Treats element as a caption for the table (caption-side : top | bottom | inherit) display : table-row An element represents a row of cells display : table-cell An element represents a table cell T A B L E P R O P E R T I E S D I S P L A Y T A B L E
  57. CSS3 for responsive web design with ANDREW CLARKE display :

    table-header-group A row group always displayed before all other rows and row groups and after any top captions display : table-footer-group A row group always displayed after all other rows and row groups and after any bottom captions display : table-row-group One or more rows of cells T A B L E P R O P E R T I E S D I S P L A Y T A B L E
  58. CSS3 for responsive web design with ANDREW CLARKE table-row An

    ‘anonymous’ box created by applying display:table-row to an element display : table An ‘anonymous’ box created by applying display:tableto an element
  59. CSS3 for responsive web design with ANDREW CLARKE C O

    N T E N T F I R ST D I S P L A Y T A B L E <header role="banner">…</header> <div class="content-group"> <div class="content">…</div> <nav class="navigation">…</nav> </div><!-- content-group --> <footer role="contentinfo">…</footer>
  60. None
  61. CSS3 for responsive web design with ANDREW CLARKE @media only

    screen and (min-width : 48em) { .content { display : table-footer-group; } .navigation { display : table-header-group; } }/*48em*/ C O N T E N T F I R ST D I S P L A Y T A B L E
  62. None
  63. CSS3 for responsive web design with ANDREW CLARKE S K

    I P T O N A V I G AT I O N D I S P L A Y T A B L E <a href="#navigation">Navigation</a> <header role="banner">…</header> <div class="content-group"> <div class="content">…</div> <nav class="navigation" id="navigation">…</nav> </div><!-- content-group --> <footer role="contentinfo">…</footer>
  64. None
  65. CSS3 for responsive web design with ANDREW CLARKE a[href="#navigation"] {

    display : block; } @media only screen and (min-width : 48em) { a[href="#navigation"] { display : none; } }/*48em*/ S K I P T O N A V I G AT I O N D I S P L A Y T A B L E
  66. None
  67. CSS3 for responsive web design with ANDREW CLARKE C R

    E AT I N G C O L U M N S D I S P L A Y T A B L E <header role="banner">…</header> <nav class="navigation">…</nav> <div class="content-group"> <div class="content">…</div> <div class="sidebar">…</div> </div><!-- content-group --> <footer role="contentinfo">…</footer>
  68. CSS3 for responsive web design with ANDREW CLARKE @media only

    screen and (min-width : 62em) { .content, .sidebar { display : table-cell; } .content { width : 65%; } .sidebar { width : 35%; } }/*62em*/ C R E AT I N G C O L U M N S D I S P L A Y T A B L E
  69. None
  70. None
  71. CSS3 for responsive web design with ANDREW CLARKE @media only

    screen and (min-width : 48em) { .box { float : left; width : 33%; } }/*48em*/ F L O AT I N G C O L U M N S D I S P L A Y T A B L E
  72. None
  73. CSS3 for responsive web design with ANDREW CLARKE @media only

    screen and (min-width : 48em) { .box { display : table-cell; width : 33%; } }/*48em*/ C R E AT I N G C O L U M N S D I S P L A Y T A B L E
  74. None
  75. CSS3 for responsive web design with ANDY CLARKE M U

    LT I C O L U M N LA Y O U T
  76. CSS3 for responsive web design with ANDREW CLARKE Improves readability

    Manages the measure Reduces purely presentational markup C S S C O L U M N A D V A N T A G E S M U L T I C O L U M N L A Y O U T
  77. None
  78. None
  79. CSS3 for responsive web design with ANDREW CLARKE P R

    E S E N T AT I O N A L H T M L M U L T I C O L U M N L A Y O U T <div class="content"> <h1>Escape From The Planet Of The Apes</h1> <div class="columns"> <div class="column">…</div> <div class="column">…</div> </div><!-- columns --> </div><!-- content -->
  80. CSS3 for responsive web design with ANDREW CLARKE Column count

    Column width C O L U M N P R O P E R T I E S M U L T I C O L U M N L A Y O U T Column gap Column rule
  81. CSS3 for responsive web design with ANDREW CLARKE M E

    A N I N G F U L M A R K U P M U L T I C O L U M N L A Y O U T <div class="content"> <h1>Escape From The Planet Of The Apes</h1> <div class="columns"> <figure>…</figure> <p>…</p> … </div><!-- columns --> </div><!-- content -->
  82. CSS3 for responsive web design with ANDREW CLARKE C O

    L U M N W I D T H M U L T I C O L U M N L A Y O U T @media only screen and (min-width : 48em) { .columns { column-width : 24em; } }/*48em*/
  83. CSS3 for responsive web design with ANDREW CLARKE C O

    L U M N C O U N T M U L T I C O L U M N L A Y O U T @media only screen and (min-width : 48em) { .columns { column-count : 2; } }/*48em*/
  84. None
  85. CSS3 for responsive web design with ANDREW CLARKE C O

    L U M N G A P M U L T I C O L U M N L A Y O U T @media only screen and (min-width : 48em) { .columns { column-count : 2; column-gap : 48px; } }/*48em*/
  86. CSS3 for responsive web design with ANDREW CLARKE C O

    L U M N R U L E M U L T I C O L U M N L A Y O U T @media only screen and (min-width : 48em) { .columns { column-count : 2; column-gap : 48px; column-rule-width : 3px; column-rule-style : double; column-rule-color : #e3e2e0; } }/*48em*/
  87. None
  88. None
  89. None
  90. CSS3 for responsive web design with ANDREW CLARKE S PA

    N N I N G C O L U M N S M U L T I C O L U M N L A Y O U T <div class="content"> <h1>Escape From The Planet Of The Apes</h1> <div class="columns"> <p>…</p> </div><!-- columns --> <figure>…</figure> … </div><!-- content -->
  91. None
  92. None
  93. CSS3 for responsive web design with ANDREW CLARKE C O

    L U M N I Z E D E L E M E N T S M U L T I C O L U M N L A Y O U T @media only screen and (min-width : 37.5em) { .sidebar ul { column-count : 2; column-gap : 48px; } }/*37.5em*/ @media only screen and (min-width : 48em) { .sidebar ul { column-count : 1; }/*48em*/
  94. None
  95. None
  96. None
  97. CSS3 for responsive web design with ANDREW CLARKE A D

    D I T I O N A L P R O P E R T I E S M U L T I C O L U M N L A Y O U T <div class="content columns"> <h1 class="span">Escape From The Planet Of The Apes</h1> <p>…</p> <figure class="span" >…</figure> <p>…</p> <h2 class="span">Ape-o-nauts?</h2> … </div><!-- columns -->
  98. CSS3 for responsive web design with ANDREW CLARKE C O

    L U M N S P A N M U L T I C O L U M N L A Y O U T @media only screen and (min-width : 62em) { .columns .span { column-span : all } }/*62em*/
  99. None
  100. None
  101. CSS3 for responsive web design with ANDREW CLARKE C O

    N T R O L C O L U M N B R E A K S M U L T I C O L U M N L A Y O U T .columns h2 { break-before : column; break-after : avoid-column; }
  102. CSS3 for responsive web design with ANDY CLARKE I N

    T R O D U C I N G R E M U N I T S
  103. CSS3 for responsive web design with ANDREW CLARKE body {

    font-size : 62.5%; } h1 { font-size : 2.4em; /* 24px */ } p { font-size : 1.6em; /* 16px */ } ul { font-size : 1.6em; /* 16px */ } ul p { font-size : 1.6em; /* ? */ } T H E P R O B L E M W I T H E M S I N T R O D U C I N G R E M U N I T S
  104. CSS3 for responsive web design with ANDREW CLARKE I N

    T R O D U C I N G R E M U N I T S h1 { font-size : 32px; font-size : 3.2rem; } @mixin font-size($font-size : 16){ font-size : #{$font-size}px; font-size : #{$font-size / 10}rem; } @include font-size(32);
  105. CSS3 for responsive web design

  106. CSS3 for responsive web design

  107. CSS3 for responsive web design with ANDY CLARKE I N

    T R O D U C I N G V W U N I T S
  108. CSS3 for responsive web design with ANDREW CLARKE I N

    T R O D U C I N G V W U N I T S h1 { font-size : 32px; font-size : 3.2rem; font-size : 5.4vw; }
  109. CSS3 for responsive web design with ANDREW CLARKE vw Equal

    to 1% of the width of the viewport vh Equal to 1% of the height of the viewport vmin Equal to either vw or vh, whichever is smaller vmax Opposite behaviour to vmin I N T R O D U C I N G V W U N I T S
  110. CSS3 for responsive web design with ANDREW CLARKE I N

    T R O D U C I N G V W U N I T S <h1> <span>Apes</span> <span>In</span> <span>Space</span> </h1>
  111. <span>Apes</span> <span>Space</span> <span>In</span>

  112. CSS3 for responsive web design with ANDREW CLARKE h1 span

    { position : absolute; bottom : -10px; display : block; height : 300px; width : 300px; } I N T R O D U C I N G V W U N I T S
  113. CSS3 for responsive web design with ANDREW CLARKE h1 span:nth-of-type(1)

    { left : 50%; background-image : url(banner-1.png) ; } h1 span:nth-of-type(2) { left : 5%; background-image : url(banner-2.png) ; } h1 span:nth-of-type(3) { right : 5%; background-image : url(banner-3.png) ; } I N T R O D U C I N G V W U N I T S
  114. CSS3 for responsive web design with ANDREW CLARKE G E

    N E R AT E D C O N T E N T h1:before { content : "Apes In Space"; position : absolute; width : 100%; font-size : 8vw; letter-spacing : 1vw; text-align : center; } I N T R O D U C I N G V W U N I T S
  115. None
  116. None
  117. None
  118. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N F O N T S I Z E h1:before { content : "Apes In Space"; position : absolute; width : 100%; font-size : 8vw; letter-spacing : 1vw; text-align : center; transition : font-size 0.15s 0 linear; } I N T R O D U C I N G V W U N I T S
  119. CSS3 for responsive web design with ANDREW CLARKE C U

    R R E N T B R O W S E R S U P P O R T I N T R O D U C I N G V W U N I T S
  120. CSS3 for responsive web design with ANDY CLARKE F L

    E X I B L E B O X LA Y O U T
  121. CSS3 for responsive web design with ANDREW CLARKE More flexible

    layouts Visual content reordering (source independent layout) Column height matching F L E X I B L E A D V A N T A G E S F L E X I B L E B O X L A Y O U T
  122. CSS3 for responsive web design with ANDREW CLARKE F L

    E X I B L E M A R K U P F L E X I B L E B O X L A Y O U T <div class="container"> <header role="banner">…</header> <nav class="navigation">…</nav> <div class="content">…</div> <div class="sidebar sidebar--primary">…</div> <div class="sidebar sidebar--secondary">…</div> <footer class="contentinfo">…</footer> </div><!-- container -->
  123. CSS3 for responsive web design with ANDREW CLARKE D I

    S P LA Y F L E X F L E X I B L E B O X L A Y O U T .container { display : flex; // display :inline-flex; }
  124. CSS3 for responsive web design with ANDREW CLARKE R O

    W S A N D C O L U M N S F L E X I B L E B O X L A Y O U T .container { display : flex; flex-direction : row; flex-wrap : nowrap; /* flex-flow : row nowrap; */ } // row, column, row-reverse, column-reverse
  125. CSS3 for responsive web design with ANDREW CLARKE main axis

    cross axis H O R I Z O N T A L LA Y O U T M A I N & C R O S S A X I S R O W
  126. CSS3 for responsive web design with ANDREW CLARKE cross axis

    main axis C O L U M N
  127. CSS3 for responsive web design with ANDREW CLARKE <div class="content">

    <div class="box box1"> …</div> <div class="box box2"> …</div> <div class="box box3"> …</div> </div> J U ST I F Y C O N T E N T F L E X I B L E B O X L A Y O U T
  128. CSS3 for responsive web design with ANDREW CLARKE .content {

    display : flex; flex-flow : row nowrap; } J U ST I F Y C O N T E N T F L E X I B L E B O X L A Y O U T
  129. None
  130. CSS3 for responsive web design with ANDREW CLARKE J U

    ST I F Y C O N T E N T F L E X I B L E B O X L A Y O U T .container { justify-content : center; }
  131. None
  132. CSS3 for responsive web design with ANDREW CLARKE J U

    ST I F Y C O N T E N T F L E X I B L E B O X L A Y O U T .container { justify-content : flex-start; }
  133. None
  134. CSS3 for responsive web design with ANDREW CLARKE J U

    ST I F Y C O N T E N T F L E X I B L E B O X L A Y O U T .container { justify-content : flex-end; }
  135. None
  136. CSS3 for responsive web design with ANDREW CLARKE J U

    ST I F Y C O N T E N T F L E X I B L E B O X L A Y O U T .container { justify-content : space-between; }
  137. None
  138. CSS3 for responsive web design with ANDREW CLARKE J U

    ST I F Y C O N T E N T F L E X I B L E B O X L A Y O U T .container { justify-content : space-around; }
  139. None
  140. justify-content : center; justify-content : flex-start; justify-content : flex-end; justify-content

    : space-between; justify-content : space-around;
  141. CSS3 for responsive web design with ANDREW CLARKE .container {

    align-items : flex-start; } A L I G N I T E M S F L E X I B L E B O X L A Y O U T
  142. None
  143. CSS3 for responsive web design with ANDREW CLARKE .container {

    align-items : flex-end; } A L I G N I T E M S F L E X I B L E B O X L A Y O U T
  144. None
  145. CSS3 for responsive web design with ANDREW CLARKE .container {

    align-items : center; } A L I G N I T E M S F L E X I B L E B O X L A Y O U T
  146. None
  147. CSS3 for responsive web design with ANDREW CLARKE .container {

    align-items : stretch; } /* stretch is the default value */ A L I G N I T E M S F L E X I B L E B O X L A Y O U T
  148. None
  149. CSS3 for responsive web design with ANDREW CLARKE R E

    O R D E R V I S U A L C O N T E N T F L E X I B L E B O X L A Y O U T Truly responsive layouts Visual content reordering Source independent layout
  150. CSS3 for responsive web design with ANDREW CLARKE F L

    E X I B L E M A R K U P F L E X I B L E B O X L A Y O U T <div class="container"> <header role="banner">…</header> <nav class="navigation">…</nav> <div class="content">…</div> <div class="sidebar sidebar--primary">…</div> <div class="sidebar sidebar--secondary">…</div> <footer class="contentinfo">…</footer> </div><!-- container -->
  151. CSS3 for responsive web design with ANDREW CLARKE O R

    D E R G R O U P S F L E X I B L E B O X L A Y O U T [role="banner"] { order : 1; } .navigation { order : 2; } .content { order : 3; } .sidebar--primary { order : 4; } .sidebar--secondary { order : 5; } [role="contentinfo"] { order : 6; }
  152. 1 2 3 4 5 6

  153. CSS3 for responsive web design with ANDREW CLARKE O R

    D E R G R O U P S F L E X I B L E B O X L A Y O U T [role="banner"] { order : 2; } .navigation { order : 1; } .content { order : 4; } .sidebar--primary { order : 5; } .sidebar--secondary { order : 3; } [role="contentinfo"] { order : 6; }
  154. None
  155. CSS3 for responsive web design with ANDREW CLARKE O R

    D E R B O X E S F L E X I B L E B O X L A Y O U T .box1 { order : 1; } .box2 { order : 2; } .box3 { order : 3; }
  156. None
  157. CSS3 for responsive web design with ANDREW CLARKE O R

    D E R B O X E S F L E X I B L E B O X L A Y O U T .box1 { order : 3; } .box2 { order : 1; } .box3 { order : 2; } /* 0 is the default value. Order can be omitted */
  158. None
  159. CSS3 for responsive web design with ANDREW CLARKE T H

    E F L E X P R O P E R TY F L E X I B L E B O X L A Y O U T Set proportions of available space occupied by child elements No units required (%, em or px)
  160. CSS3 for responsive web design with ANDREW CLARKE .box1 {

    flex : 1; } .box2 { flex : 1; } .box3 { flex : 1; } T H E F L E X P R O P E R TY F L E X I B L E B O X L A Y O U T
  161. None
  162. CSS3 for responsive web design with ANDREW CLARKE .box1 {

    flex : 1; } .box2 { flex : 2; /*2x space available*/} .box3 { flex : 1; } T H E F L E X P R O P E R TY F L E X I B L E B O X L A Y O U T
  163. None
  164. CSS3 for responsive web design with ANDREW CLARKE .box1 {

    flex : 1; } .box2 { flex : 3; /*3x space available*/} .box3 { flex : 1; } T H E F L E X P R O P E R TY F L E X I B L E B O X L A Y O U T
  165. None
  166. CSS3 for responsive web design with ANDREW CLARKE T H

    E F L E X B A S I S P R O P E R TY F L E X I B L E B O X L A Y O U T .container { width : 800px; } .box1 { flex : 1 200px; /*33px added*/} .box2 { flex : 1 300px; /*33px added*/} .box3 { flex : 1 200px; /*33px added*/}
  167. CSS3 for responsive web design with ANDREW CLARKE T H

    E F L E X B A S I S P R O P E R TY F L E X I B L E B O X L A Y O U T .container { width : 800px; } .box1 { flex : 1 200px; /*25px added*/} .box2 { flex : 2 300px; /*50px added*/} .box3 { flex : 1 200px; /*25px added*/}
  168. None
  169. CSS3 for responsive web design with ANDREW CLARKE T H

    E F L E X P R O P E R TY F L E X I B L E B O X L A Y O U T <div class="container"> <header role="banner">…</header> <nav class="navigation">…</nav> <div class="content">…</div> <div class="sidebar sidebar--primary">…</div> <div class="sidebar sidebar--secondary">…</div> <footer class="contentinfo">…</footer> </div><!-- container -->
  170. CSS3 for responsive web design with ANDREW CLARKE .content {

    flex : 3; } .sidebar--primary { flex : 1; } T H E F L E X P R O P E R TY F L E X I B L E B O X L A Y O U T
  171. None
  172. CSS3 for responsive web design with ANDREW CLARKE M I

    L LS ’ F L E X B O X N A V I G AT I O N F L E X I B L E B O X L A Y O U T <nav class="navigation"> <ul> <li><a href="">Home</a></li> <li><a href="">Apes in space</a></li> <li><a href="">Monkeys in orbit</a></li> <li><a href="">Ape-O-Nauts in film</a></li> <li><a href="">Apes will rise</a></li> </ul> </nav>
  173. CSS3 for responsive web design with ANDREW CLARKE M I

    L LS ’ F L E X B O X N A V I G AT I O N F L E X I B L E B O X L A Y O U T .navigation ul { display : flex; flex-flow : row wrap; justify-content : center; } .navigation li { flex : auto; width : auto; min-width : 6rem; }
  174. None
  175. None
  176. None
  177. None
  178. None
  179. None
  180. CSS3 for responsive web design with ANDREW CLARKE N O

    T E S Laying out the future http://www.slideshare.net/chrisdavidmills/laying-out-the-future Flexy Boxes: Flexbox playground and code generator http://the-echoplex.net/flexyboxes/ Using Flexbox: Mixing Old and New for the Best Browser Support http://css-tricks.com/using-flexbox/ Flexbox — fast track to layout nirvana? http://dev.opera.com/articles/view/flexbox-basics/ Advanced cross-browser flexbox http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
  181. CSS3 for responsive web design

  182. CSS3 for responsive web design

  183. CSS3 for responsive web design with ANDY CLARKE A N

    I M AT I N G F L E X B O X
  184. None
  185. CSS3 for responsive web design with ANDREW CLARKE A N

    I M AT I N G F L E X B O X <div class="box box1"> <div class="img">…</div> <div class="details">…</div> </div> <div class="box box2">…</div> <div class="box box3">…</div>
  186. CSS3 for responsive web design with ANDREW CLARKE A N

    I M AT I N G F L E X B O X @media only screen and (min-width : 48em) { .box { flex : 1; align-self : justify; } }/*48em*/
  187. None
  188. CSS3 for responsive web design with ANDREW CLARKE A N

    I M AT I N G F L E X B O X @media only screen and (min-width : 48em) { .box { flex : 1; } .box:hover { flex : 2; } }/*48em*/
  189. None
  190. None
  191. None
  192. CSS3 for responsive web design with ANDREW CLARKE A N

    I M AT I N G F L E X B O X @media only screen and (min-width : 48em) { .box { flex : 1; transition : all .15s 0 ease-in; } .box:hover { flex : 2; } }/*48em*/
  193. CSS3 for responsive web design with ANDREW CLARKE A N

    I M AT I N G F L E X B O X @media only screen and (min-width : 48em) { .box p { opacity : 0; height : 1px; transition : all .075s 0 ease-in; } .box:hover p { opacity : 1; height : auto; } }/*48em*/
  194. None
  195. CSS3 for responsive web design with ANDY CLARKE C S

    S R E G I O N S
  196. CSS3 for responsive web design with ANDREW CLARKE T R

    A D I T I O N A L LA Y O U T C S S R E G I O N S A
  197. CSS3 for responsive web design with ANDREW CLARKE Flow content

    into flexible containers Enables more complex layouts C S S R E G I O N S
  198. CSS3 for responsive web design with ANDREW CLARKE LA Y

    O U T W I T H R E G I O N S A
  199. CSS3 for responsive web design with ANDREW CLARKE LA Y

    O U T W I T H R E G I O N S A
  200. CSS3 for responsive web design with ANDREW CLARKE LA Y

    O U T W I T H R E G I O N S 1 2 3 4 5 6 7
  201. CSS3 for responsive web design with ANDREW CLARKE M E

    A N I N G F U L M A R K U P <article> <h1>Escape From The Planet Of The Apes</h1> <p>Escape from the Planet of the Apes, is a 1971 science fiction film starring Roddy McDowall, Kim Hunter and Ricardo Montalbán.</p> </article> C S S R E G I O N S
  202. CSS3 for responsive web design with ANDREW CLARKE I D

    E N T I F Y A R E G I O N C S S R E G I O N S <article id="cornelius"> <h1>Escape From The Planet Of The Apes</h1> <p>Escape from the Planet of the Apes, is a 1971 science fiction film starring Roddy McDowall, Kim Hunter and Ricardo Montalbán.</p> </article>
  203. CSS3 for responsive web design with ANDREW CLARKE <div class="content">

    </div><!-- content --> <div class="sidebar sidebar--primary"> </div><!-- sidebar --> <div class="sidebar sidebar--secondary"> </div><!-- sidebar --> <div class="overflow"> </div><!-- sidebar --> D E F I N I N G LA Y O U T C S S R E G I O N S
  204. CSS3 for responsive web design with ANDREW CLARKE D E

    F I N I N G LA Y O U T C S S R E G I O N S <div class="content" id="cornelius-1"> </div><!-- content --> <div class="sidebar sidebar--primary" id="cornelius-2"> </div><!-- sidebar --> <div class="sidebar sidebar--secondary" id="cornelius-3"> </div><!-- sidebar --> <div class="overflow"> <div id="cornelius-4"></div> </div><!-- sidebar -->
  205. None
  206. CSS3 for responsive web design with ANDREW CLARKE #cornelius {

    -webkit-flow-into : cornelius-flow; flow-into : cornelius-flow; } #cornelius-1, #cornelius-2, #cornelius-3, #cornelius-4 { -webkit-flow-from : cornelius-flow; flow-from : cornelius-flow; } F L O W I N T O C S S R E G I O N S
  207. None
  208. CSS3 for responsive web design with ANDREW CLARKE M U

    LT I P L E F L O W S C S S R E G I O N S <article id="cornelius"> <h1>Cornelius</h1> <p>Cornelius was a male chimpanzee from the films…</p> </article> <article id="zira"> <h1>Zira</h1> <p>Dr. Zira was a chimpanzee psychologist and veterinarian, who specialised in the study of humans…</p> </article>
  209. CSS3 for responsive web design with ANDREW CLARKE #cornelius {

    -webkit-flow-into : cornelius-flow; flow-into : cornelius-flow; } #cornelius-1, #cornelius-2, #cornelius-3, #cornelius-4 { -webkit-flow-from : cornelius-flow; flow-from : cornelius-flow; } F I R ST F L O W I N T O C S S R E G I O N S
  210. CSS3 for responsive web design with ANDREW CLARKE #zira {

    -webkit-flow-into : zira-flow; flow-into : zira-flow; } #zira-1, #zira-2 { -webkit-flow-from : zira-flow; flow-from : zira-flow; } S E C O N D F L O W I N T O C S S R E G I O N S
  211. None
  212. CSS3 for responsive web design with ANDREW CLARKE #cornelius-1 p

    { font-weight : bold; } /* Does not apply */ STY L I N G R E G I O N C O N T E N T C S S R E G I O N S @-webkit-region #cornelius-1 { p { font-weight : bold; } } /* Works but deprecated */ #cornelius-1::region(p) { font-weight : bold; } /* New, unsupported standard */
  213. None
  214. CSS3 for responsive web design with ANDREW CLARKE R E

    G I O N B R E A K S C S S R E G I O N S <article id="cornelius"> <h1>Cornelius</h1> <p>…</p> <h2>Forbidden Zone</h2> <p>…</p> </article>
  215. CSS3 for responsive web design with ANDREW CLARKE h2 {

    region-break-before : always;*} C S S R E G I O N S R E G I O N B R E A K S * -webkit-region-break-before : always; } Values include auto, always, avoid, left, right and inherit
  216. CSS3 for responsive web design with ANDREW CLARKE h2 {

    region-break-before : after;*} C S S R E G I O N S R E G I O N B R E A K S * -webkit-region-break-before : always; } Values include auto, always, avoid, left, right and inherit
  217. None
  218. CSS3 for responsive web design with ANDREW CLARKE N O

    T E S Adaptive Web App UI with CSS Regions http://blogs.adobe.com/webplatform/2013/04/08/adaptive-web-app-ui-with-css-regions Enable CSS Regions in Google Chrome http://adobe.github.io/web-platform/samples/css-regions/#enable-regions C S S R E G I O N S Adobe’s sample regions http://adobe.github.io/web-platform/samples/css-regions/
  219. None
  220. CSS3 for responsive web design with ANDY CLARKE C S

    S S H A P E S A N D E X C L U S I O N S
  221. CSS3 for responsive web design with ANDREW CLARKE B A

    S I C S H A P E S C S S S H A P E S Rectangle (rect) Circle Ellipse Line Polyline Polygon
  222. CSS3 for responsive web design with ANDREW CLARKE M E

    A N I N G F U L M A R K U P C S S S H A P E S <div id="cornelius"> <p>Cornelius was a male chimpanzee from the films Planet of the Apes, Beneath the Planet of the Apes and Escape from the Planet of the Apes, based on the character of Cornélius from the original novel, La Planète des singes by Pierre Boulle. He was the fiancée (later husband) of Zira and the eventual father of Milo, who would grow up to take the name Caesar. He really would have preferred the quiet life with less controversy.</p> </div>
  223. CSS3 for responsive web design with ANDREW CLARKE R E

    C T A N G L E C S S S H A P E S #cornelius { -webkit-shape-inside : rectangle( 0, /* Start x axis */ 0, /* Start y axis */ 100%, /* % of width */ 100%, /* % of height */ 50%, /* Roundness x axis */ 25% /* Roundness y axis */ ); }
  224. None
  225. CSS3 for responsive web design with ANDREW CLARKE C I

    R C L E C S S S H A P E S #cornelius { -webkit-shape-inside : circle( 50%, /* Start x axis */ 50%, /* Start y axis */ 200px, /* Use of available space */ ); width : 400px; height : 400px; }
  226. None
  227. CSS3 for responsive web design with ANDREW CLARKE P O

    LY G O N C S S S H A P E S 380px 300px
  228. CSS3 for responsive web design with ANDREW CLARKE P O

    LY G O N C S S S H A P E S 1 2 3 4 5 6 7 8 9 10 11 12 13
  229. CSS3 for responsive web design with ANDREW CLARKE S H

    A P E - I N S I D E C S S S H A P E S #cornelius { -webkit-shape-inside : polygon( /*1*/ 150px 0, /*2*/ 200px 100px, /*3*/ 230px 140px, /*4*/ 200px 140px, /*5*/ 300px 330px, /*6*/ 260px 330px, /*7*/ 270px 380px,
  230. CSS3 for responsive web design with ANDREW CLARKE S H

    A P E - I N S I D E C S S S H A P E S #cornelius { -webkit-shape-inside : polygon( /*8*/ 30px 380px, /*9*/ 40px 330px, /*10*/ 0 330px, /*11*/ 100px 140px, /*12*/ 70px 140px, /*13*/ 100px 100px); }
  231. None
  232. CSS3 for responsive web design with ANDREW CLARKE S H

    A P E - O U T S I D E C S S S H A P E S <article id="cornelius"> <div id="icarus">… </div> <h1>Escape From The Planet Of The Apes</h1> <p>Cornelius was a male chimpanzee from the films Planet of the Apes, Beneath the Planet of the Apes and Escape from the Planet of the Apes, based on the character of Cornélius from the original novel, La Planète des singes by Pierre Boulle. He was the fiancée (later husband) of Zira and the eventual father of Milo, who would grow up to take the name Caesar…</p> </article>
  233. CSS3 for responsive web design with ANDREW CLARKE S H

    A P E - O U T S I D E C S S S H A P E S #icarus { float : right; -webkit-shape-outside : polygon(…); }
  234. None
  235. CSS3 for responsive web design with ANDREW CLARKE S H

    A P E - M A R G I N C S S S H A P E S #icarus { float : right; -webkit-shape-outside : polygon(…); -webkit-shape-margin : 44px; }
  236. None
  237. CSS3 for responsive web design with ANDREW CLARKE S H

    A P E - I M A G E C S S S H A P E S #icarus { float : right; -webkit-shape-outside : url("icarus.png"); -webkit-shape-image-threshold : 0.1; }
  238. None
  239. CSS3 for responsive web design with ANDREW CLARKE S H

    A P E - I M A G E C S S S H A P E S #icarus { float : right; -webkit-shape-outside : polygon(…); -webkit-shape-outside : url("icarus.png"); -webkit-shape-image-threshold : 0.1; }
  240. None
  241. CSS3 for responsive web design with ANDREW CLARKE <article id="cornelius">

    <div id="icarus-1">… </div> <div id="icarus-2">… </div> <h1>Escape From The Planet Of The Apes</h1> <p>Cornelius was a male chimpanzee from the films Planet of the Apes, Beneath the Planet of the Apes and Escape from the Planet of the Apes, based on the character of Cornélius from the original novel, La Planète des singes by Pierre Boulle. He was the fiancée (later husband) of Zira and the eventual father of Milo…</p> </article> M U LT I P L E S H A P E S C S S S H A P E S
  242. None
  243. CSS3 for responsive web design with ANDREW CLARKE N O

    T E S SVG Basic shapes http://www.w3.org/TR/SVG/shapes.html CSS Shapes Module Level 1 http://dev.w3.org/csswg/css-shapes/ C S S E X C L U S I O N S Adobe’s sample exclusions and shapes http://codepen.io/collection/qFesk
  244. CSS3 for responsive web design with ANDY CLARKE I N

    T R O D U C I N G @ V I E W P O R T
  245. CSS3 for responsive web design with ANDREW CLARKE

  246. CSS3 for responsive web design with ANDREW CLARKE C O

    N T E N T W I D T H <meta name="viewport" content="width=600" > @ V I E W P O R T
  247. CSS3 for responsive web design with ANDREW CLARKE

  248. CSS3 for responsive web design with ANDREW CLARKE

  249. CSS3 for responsive web design with ANDREW CLARKE <meta name="viewport"

    content="width=device-width" > D E V I C E W I D T H @ V I E W P O R T
  250. CSS3 for responsive web design with ANDREW CLARKE <meta name="viewport"

    content="width=device-width, height=device-height"> D E V I C E H E I G H T @ V I E W P O R T
  251. CSS3 for responsive web design with ANDREW CLARKE <meta name="viewport"

    content="width=device-width, height=device-height, maximum-scale=2, minimum-scale=.5"> S C A L E F A C T O R S @ V I E W P O R T
  252. CSS3 for responsive web design with ANDREW CLARKE <meta name="viewport"

    content="width=device-width, height=device-height, maximum-scale=2", user-scalable=no"> D O N O T D O T H I S @ V I E W P O R T
  253. CSS3 for responsive web design with ANDREW CLARKE @viewport {

    width : device-width; * } * @-webkit-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-o-viewport { width: device-width; } V I E W P O R T I N C S S @ V I E W P O R T
  254. None
  255. CSS3 for responsive web design

  256. CSS3 for responsive web design

  257. CSS3 for responsive web design with ANDY CLARKE C S

    S T R A N S I T I O N S
  258. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N P R O P E R TY .donthatetimvandamme { transition-property : opacity; * } C S S T R A N S I T I O N S * -webkit-transition-property : opacity; -moz-transition-property : opacity; -o-transition-property : opacity; transition-property : opacity;
  259. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N P R O P E R T I E S Backgrounds Borders Colours Dimensions Fonts Opacity Positions Transforms C S S T R A N S I T I O N S
  260. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N P R O P E R T I E S .donthatetimvandamme { transition-property : opacity, color; } C S S T R A N S I T I O N S
  261. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N P R O P E R T I E S .donthatetimvandamme { transition-property : all; } C S S T R A N S I T I O N S
  262. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N D U R AT I O N .donthatetimvandamme { transition-duration : .15s; * } C S S T R A N S I T I O N S * -webkit-transition-duration : .15s; -moz-transition-duration : .15s; -o-transition-duration : .15s; transition-duration : .15s;
  263. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N D E LA Y .donthatetimvandamme { transition-delay : .1s; * } C S S T R A N S I T I O N S * -webkit-transition-delay : .1s; -moz-transition-delay : . 1s; -o-transition-delay : . 1s; transition-delay : . 1s;
  264. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N T I M I N G .donthatetimvandamme { transition-timing-function : linear; * } C S S T R A N S I T I O N S * -webkit-transition-timing-function : linear; -moz-transition-timing-function : linear; -o-transition-timing-function : linear; transition-timing-function : linear;
  265. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N T I M I N G C S S T R A N S I T I O N S ease (default)
  266. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N T I M I N G C S S T R A N S I T I O N S linear
  267. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N T I M I N G C S S T R A N S I T I O N S ease-in
  268. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N T I M I N G C S S T R A N S I T I O N S ease-out
  269. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N T I M I N G C S S T R A N S I T I O N S ease-in-out
  270. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S I T I O N S H O R T H A N D .donthatetimvandamme { transition : opacity .15s .1s linear; * } C S S T R A N S I T I O N S * -webkit-transition : opacity .15s .1s linear; -moz-transition : opacity .15s .1s linear; -o-transition : opacity .15s .1s linear; transition : opacity .15s .1s linear;
  271. None
  272. CSS3 for responsive web design with ANDREW CLARKE [rel= "

    self "] { transform: rotate(0deg); } [rel= " self "]:hover { transform: rotate(-30deg); }
  273. CSS3 for responsive web design with ANDREW CLARKE [rel= "

    self "] { transform: rotate(0deg); } [rel= " self "]:hover { transform: rotate(-30deg); }
  274. None
  275. None
  276. CSS3 for responsive web design with ANDY CLARKE C S

    S T R A N S F O R M S
  277. CSS3 for responsive web design with ANDREW CLARKE Scale Increases

    or decreases the size of an element Translate Moves an element horizontally and vertically Rotate Rotates an element Skew Distorts an element horizontally and vertically
  278. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M S C A L E C S S T R A N S F O R M S .donthatetimvandamme { transform : scaleX(1.5); * } * -webkit-transform : scaleX(1.5); -moz-transform : scaleX(1.5); -o-transform : scaleX(1.5); transform : scaleX(1.5);
  279. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M S C A L E C S S T R A N S F O R M S .donthatetimvandamme { transform : scaleY(1.5); * } * -webkit-transform : scaleY(1.5); -moz-transform : scaleY(1.5); -o-transform : scaleY(1.5); transform : scaleY(1.5);
  280. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M S C A L E C S S T R A N S F O R M S .donthatetimvandamme { transform : scale(1.5); * } * -webkit-transform : scale(1.5); -moz-transform : scaleY(1.5); -o-transform : scaleY(1.5); transform : scaleY(1.5);
  281. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M S C A L E C S S T R A N S F O R M S .donthatetimvandamme { transform : scale(.5); * } * -webkit-transform : scale(.5); -moz-transform : scale(.5); -o-transform : scale(.5); transform : scale(.5);
  282. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M T R A N S LAT E C S S T R A N S F O R M S .donthatetimvandamme { transform : translateX(50px); * } * -webkit-transform : translateX(50px); -moz-transform : translateX(50px); -o-transform : translateX(50px); transform : translateX(50px);
  283. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M T R A N S LAT E C S S T R A N S F O R M S .donthatetimvandamme { transform : translateY(50px); * } * -webkit-transform : translateY(50px); -moz-transform : translateY(50px); -o-transform : translateY(50px); transform : translateY(50px);
  284. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M T R A N S LAT E C S S T R A N S F O R M S .donthatetimvandamme { transform : translateX(50%); * } * -webkit-transform : translateX(50%); -moz-transform : translateX(50%); -o-transform : translateX(50%); transform : translateX(50%);
  285. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M T R A N S LAT E C S S T R A N S F O R M S .donthatetimvandamme { transform : translateY(-50%); } * -webkit-transform : translateY(-50%); -moz-transform : translateY(-50%); -o-transform : translateY(-50%); transform : translateY(-50%);
  286. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M T R A N S LAT E C S S T R A N S F O R M S .donthatetimvandamme { transform : translate(50px -50px); * } * -webkit-transform : translate(50px -50px); -moz-transform : translate(50px -50px); -o-transform : translate(50px -50px); transform : translate(50px -50px);
  287. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M R O T AT E C S S T R A N S F O R M S .donthatetimvandamme { transform : rotate(90deg); * } * -webkit-transform : rotate(90deg); -moz-transform : rotate(90deg); -o-transform : rotate(90deg); transform : rotate(90deg);
  288. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M R O T AT E C S S T R A N S F O R M S .donthatetimvandamme { transform : rotate(-90deg); * } * -webkit-transform : rotate(-90deg); -moz-transform : rotate(- 90deg); -o-transform : rotate(- 90deg); transform : rotate(- 90deg);
  289. CSS3 for responsive web design with ANDREW CLARKE ‘Escape from

    the Planet of the Apes’, is a 1971 science fiction film starring Roddy McDowall, Kim Hunter and Ricardo Montalbán. It’s the third of five films in the original Planet of the Apes series. The film was well received, getting the best reviews of the four Planet of the Apes sequels. Despite ‘Beneath the Planet of the Apes’ ending in it prevented the series from moving on, 20th Century Fox wanted a sequel, so producer Arthur P. Jacobs sent screenwriter Paul Dehn a telegram that read “Apes exist, Sequel required.” Production was rushed due to its low budget and was filmed in only six weeks. ‘Escape from the Planet of the Apes’ begins by establishing that three apes; Cornelius, Zira and Dr. Milo, escaped Earth’s destruction by salvaging and repairing the astronaut Taylor’s spaceship.
  290. CSS3 for responsive web design with ANDREW CLARKE ‘Escape from

    the Planet of the Apes’, is a 1971 science fiction film starringRoddy McDowall, Kim Hunter and Ricardo Montalbán. It’s the third of five films in the original Planet of the Apes series. The film was well received, getting the best reviews of the four Planet of the Apes sequels. Despite ‘Beneath the Planet of the Apes’ ending in it prevented the series from moving on, 20th Century Fox wanted a sequel, so producer Arthur P. Jacobs sent screenwriter Paul Dehn a telegram that read “Apes exist, Sequel required.” Production was rushed due to its low budget and was filmed in only six weeks. ‘Escape from the Planet of the Apes’ begins by establishing that three apes; Cornelius, Zira and Dr. Milo, escaped Earth’s destruction by salvaging and repairing the astronaut Taylor’s spaceship.
  291. CSS3 for responsive web design with ANDREW CLARKE C O

    M B I N I N G T R A N S F O R M S C S S T R A N S F O R M S .donthatetimvandamme { transform : scale(1.5) translate(50px -50px) rotate(-90deg); }
  292. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M O R I G I N C S S T R A N S F O R M S .donthatetimvandamme { transform-origin : 0 0; * } * -webkit-transform-origin : 0 0; -moz-transform-origin : 0 0; -o-transform-origin : 0 0; transform-origin : 0 0;
  293. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M O R I G I N C S S T R A N S F O R M S .donthatetimvandamme { transform-origin : 50% 0; * } * -webkit-transform-origin : 50% 0; -moz-transform-origin : 50% 0; -o-transform-origin : 50% 0; transform-origin : 50% 0;
  294. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M O R I G I N C S S T R A N S F O R M S .donthatetimvandamme { transform-origin : 100% 0; * } * -webkit-transform-origin : 100% 0; -moz-transform-origin : 100% 0; -o-transform-origin : 100% 0; transform-origin : 100% 0;
  295. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M O R I G I N C S S T R A N S F O R M S .donthatetimvandamme { transform-origin : 0 100%; } * -webkit-transform-origin : 0 100%; -moz-transform-origin : 0 100%; -o-transform-origin : 0 100%; transform-origin : 0 100%;
  296. CSS3 for responsive web design with ANDREW CLARKE T R

    A N S F O R M O R I G I N C S S T R A N S F O R M S .donthatetimvandamme { transform-origin : 100% 100%; * } * -webkit-transform-origin : 100% 100%; -moz-transform-origin : 100% 100%; -o-transform-origin : 100% 100%; transform-origin : 100% 100%;
  297. CSS3 for responsive web design with ANDY CLARKE B O

    R D E R I M A G E
  298. CSS3 for responsive web design with ANDREW CLARKE 27px 27px

    27px 27px Image 120 x 90px (180 bytes)
  299. CSS3 for responsive web design with ANDREW CLARKE 1 2

    3 4 6 7 8 9 ?
  300. CSS3 for responsive web design with ANDREW CLARKE .html {

    border-image-slice : 27 27 27 27; border-image-source : url(html.png); } .html { border-image : url(html.png) 27 27 27 27; } .html { border-image : url(html.png) 27 ; border-width : 27px; }
  301. CSS3 for responsive web design with ANDREW CLARKE .html {

    border-image : url(html.png) 27; border-width : 27px; } * -webkit-border-image : url(html-border.png) 27; -moz-border-image : url(html-border.png) 27; -o-border-image : url(html-border.png) 27;
  302. CSS3 for responsive web design with ANDREW CLARKE

  303. CSS3 for responsive web design with ANDREW CLARKE ? ?

    ? ?
  304. CSS3 for responsive web design with ANDREW CLARKE

  305. CSS3 for responsive web design with ANDREW CLARKE .html {

    border-image-repeat : repeat /* top */ repeat /* right */ repeat /* bottom */ repeat /* left */ ; }
  306. CSS3 for responsive web design with ANDREW CLARKE Stretch Stretches

    slice areas to fill horizontally or vertically Repeat Repeats slice areas to fill horizontally or vertically Round Resizes a slice so that only whole pieces fit when repeating Space Repeats whole slice pieces and adds space to fill a border evenly
  307. CSS3 for responsive web design with ANDREW CLARKE

  308. None
  309. CSS3 for responsive web design with ANDREW CLARKE Image 10

    x 20px (120 bytes) 20px
  310. [role="contentinfo"] { border-image : url(border.png) 20 0 0; * border-width

    : 20 px 0 0; } * -webkit-border-image : url(border.png) 20 0 0; -moz-border-image : url(border.png) 20 0 0; -o-border-image : url(border.png) 20 0 0;
  311. border-width : 13px; border-width : 27px; border-width :54px;

  312. CSS3 for responsive web design with ANDY CLARKE C S

    S F I LT E R S
  313. CSS3 for responsive web design with ANDREW CLARKE C S

    S F I LT E R S Blur Drop-shadow Opacity Brightness Contrast Hue-rotate Invert Saturate Grayscale Sepia
  314. CSS3 for responsive web design with ANDREW CLARKE C S

    S F I LT E R S
  315. CSS3 for responsive web design with ANDREW CLARKE B L

    U R C S S F I L T E R S .donthatetimvandamme { filter : blur(5px); * } * -webkit-filter : blur(5px);
  316. CSS3 for responsive web design with ANDREW CLARKE O PA

    C I TY C S S F I L T E R S .donthatetimvandamme { filter : opacity(.5);*} * -webkit-filter : opacity(.5);
  317. CSS3 for responsive web design with ANDREW CLARKE B R

    I G H T N E S S C S S F I L T E R S .donthatetimvandamme { filter : brightness(150%);*} * -webkit-filter : brightness(150%);
  318. brightness(0); brightness(25%); brightness(50%); Unfiltered — 100% brightness(150%); brightness(200%);

  319. CSS3 for responsive web design with ANDREW CLARKE C O

    N T R A ST C S S F I L T E R S .donthatetimvandamme { filter : contrast(150%);*} * -webkit-filter : contrast(150%);
  320. contrast(0); contrast(25%); contrast(50%); Unfiltered — 100% contrast(200%); contrast(800%);

  321. CSS3 for responsive web design with ANDREW CLARKE H U

    E - R O T AT E C S S F I L T E R S .donthatetimvandamme { filter : hue-rotate(90deg);*} * -webkit-filter : hue-rotate(90deg);
  322. Unfiltered — 0deg hue-rotate(45deg); hue-rotate(90deg); hue-rotate(180deg); hue-rotate(270deg); hue-rotate(360deg);

  323. CSS3 for responsive web design with ANDREW CLARKE I N

    V E R T C S S F I L T E R S .donthatetimvandamme { filter : invert(100%);*} * -webkit-filter : invert(100%);
  324. Unfiltered — 0 invert(25%) invert(50%) invert(75%) invert(100%)

  325. CSS3 for responsive web design with ANDREW CLARKE S AT

    U R AT E C S S F I L T E R S .donthatetimvandamme { filter : saturate(50%);*} * -webkit-filter : saturate(50%);
  326. Unfiltered — 0 saturate(25%); saturate(50%); saturate(200%); saturate(400%); saturate(800%);

  327. CSS3 for responsive web design with ANDREW CLARKE G R

    A Y S C A L E C S S F I L T E R S .donthatetimvandamme { filter : grayscale(100%);*} * -webkit-filter : grayscale(100%);
  328. Unfiltered — 0 greyscale(25%) greyscale(50%) greyscale(75%) greyscale(100%)

  329. CSS3 for responsive web design with ANDREW CLARKE S E

    P I A C S S F I L T E R S .donthatetimvandamme { filter : sepia(100%);*} * -webkit-filter : sepia(100%);
  330. Unfiltered — 0 sepia(25%) sepia(50%) sepia(75%) sepia(100%)

  331. CSS3 for responsive web design with ANDREW CLARKE C O

    M B I N I N G F I LT E R S .donthatetimvandamme { filter : contrast(1.5) drop-shadow(20px 20px 20px black); } C S S F I L T E R S
  332. CSS3 for responsive web design with ANDREW CLARKE drop-shadow box-shadow

    original B O X V S D R O P S H A D O W C S S F I L T E R S
  333. CSS3 for responsive web design with ANDREW CLARKE A N

    I M AT I N G F I LT E R S .donthatetimvandamme { filter : hue-rotate(270deg); transition : filter .5s 0 linear; } .donthatetimvandamme:hover { filter : hue-rotate(0); } C S S F I L T E R S
  334. None
  335. CSS3 for responsive web design with ANDREW CLARKE CSS3 for

    responsive web design
  336. CSS3 for responsive web design with ANDREW CLARKE A N

    Y T H I N G W E M I S S E D ?
  337. CSS3 for responsive web design with ANDREW CLARKE T H

    A N K S
  338. CSS3 for responsive web design with ANDREW CLARKE @ M

    A LA R K E Y
  339. CSS3 for responsive web design with ANDREW CLARKE @ M

    A LA R K E Y
  340. None