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

Transcript

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
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
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
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*/
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*/
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) {…}
51. CSS3 for responsive web design with ANDY CLARKE D I S P LA Y T A B L E
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 -->
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>
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
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>
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
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
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
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
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
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*/
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*/
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 -->
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*/
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*/
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
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
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; }
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; }
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; }
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; }
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; }
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
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
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
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
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; }
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; }
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 */
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
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
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
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*/}
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
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; }
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
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*/
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*/
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*/
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 -->
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
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
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 */
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
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/
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 */ ); }
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; }
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); }
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(…); }
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; }
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; }
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; }
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
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
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;
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); }
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
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
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