CSS3 for Responsive Web Design (full day workshop) 2015

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

1. CSS3 for
   responsive
   web design
   © Stuff & Nonsense 2014
   With your host Andrew Clarke
   

   View Slide

2. View Slide

3. View Slide

4. Special thanks to
   @sarasoueidan
   

   View Slide

5. Modern layout foundations

   Flexible Boxes (Flexbox) and table display properties
   

   Modules and content components

   Advanced Flexbox for content and functionality
   

   Responsive typography

   Units, columns, shapes and masks
   

   Responsive design details
   Border images, filters and blends
   Today’s schedule
   

   View Slide

6. CSS Grid Layout Module

   Grid by Example simple usage examples by Rachel Andrew
   http://gridbyexample.com
   What we won’t cover
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. Just kidding
    Today’s browser
    

    View Slide

13. Chrome
    Today’s browser
    

    View Slide

14. Get Chrome ready
    Navigate to chrome://flags
    Enable Experimental Web Platform features
    Restart Chrome
    

    View Slide

15. Modern layout
    foundations
    CSS3 for responsive web design
    © Stuff & Nonsense 2014
    Part one
    

    View Slide

16. Three ingredients for responsive web design
    A flexible grid
    Flexible images and media
    CSS3 media queries
    

    View Slide

17. Three ingredients for responsive web design
    A flexible grid
    Flexible images and media
    CSS3 media queries
    And a whole lot more
    

    View Slide

18. Modern layout is about proportions, not pixels
    Hecton 1.73205
    Golden 1.61803
    Hemiolon 1.5
    Bipenton 1.458
    Diagon 1.41421
    Penton 1.27201
    Biauron 1.23606
    Quadriagon 1.2071
    Trion 1.1547
    Hermidiagon 1.11803
    Source: Gridset
    

    View Slide

19. Drawbacks of traditional CSS layout
    Complicated maths
    Vertical centering
    Float drops
    Float clearing
    Same height columns
    Shrink-to-fit containers
    Source order dependence
    

    View Slide

20. Vertical centering, solved by Flexbox
    

    View Slide

21. Float drop and clearing, solved by Flexbox
    

    View Slide

22. Equal height columns, solved by Flexbox
    

    View Slide

23. Source order dependence, helped by Flexbox
    

    View Slide

24. Flexible boxes
    Modern layout foundations
    © Stuff & Nonsense 2014
    

    View Slide

25. Advantages of Flexbox
    More flexible layouts
    Visual content reordering
    Column height matching
    Flexible Box Layout
    

    View Slide

26. .container {
    display : flex;
    // display : inline-flex;
    }
    Apply flex to a container Flexible Box Layout
    

    View Slide

27. .container {
    display : flex;
    flex-direction : row; /* default */
    }
    // row, row-reverse, column, column-reverse
    Set the flex direction Flexible Box Layout
    

    View Slide

28. Horizontal layout Flexible Box Layout
    row
    row-reverse
    

    View Slide

29. Vertical layout Flexible Box Layout
    column
    column-reverse
    

    View Slide

30. Main & cross axis Flexible Box Layout
    main axis
    cross axis
    

    View Slide

31. .container {
    display : flex;
    flex-direction : row;
    flex-wrap : nowrap; /* default */
    }
    Rows and columns Flexible Box Layout
    

    View Slide

32. Wrapping flex items Flexible Box Layout
    

    View Slide

33. .container {
    display : flex;
    flex-flow : row nowrap;
    }
    Rows and columns Flexible Box Layout
    

    View Slide

34. 
    
    …
    …
    …
    …
    

    
    
    Two-column Flexbox layout Flexible Box Layout
    

    View Slide

35. .container {
    display : flex; 

    }
    [role="banner"], [role="contentinfo"], aside {
    /* All children have equal size inside a container */
    flex-grow : 1;

    /* The default size before any remaining space is distributed */
    flex-basis : 100%; 

    }
    Two-column Flexbox layout Flexible Box Layout
    

    View Slide

36. View Slide

37. @media (min-width: 48em) {
    .main {

    /* Take three times the available space as other siblings */
    flex : 3;

    /* The default size before any remaining space is distributed */
    flex-basis : 1px;
    }
    aside {

    /* Take one unit of available space */
    flex : 1; 

    /* The default size before any remaining space is distributed */

    flex-basis : 1px;
    }
    }
    Two-column Flexbox layout Flexible Box Layout
    

    View Slide

38. View Slide

39. .box--one {
    flex : 1; 

    }
    .box--two {
    flex : 1; 

    }
    .box--three {
    flex : 1; 

    }
    Flex-grow Flexible Box Layout
    .box {
    /* All children have equal size */
    flex : 1; 

    }
    

    View Slide

40. Flex-grow Flexible Box Layout
    1 1 1
    The ability for a flex item to grow if necessary and dictates the amount 

    of available space an item should take.
    

    View Slide

41. .box--one {
    flex : 1; 

    }
    .box--two {
    /* Take twice the available space as other siblings */
    flex : 2; 

    }
    .box--three {
    flex : 1; 

    }
    Flex-grow Flexible Box Layout
    

    View Slide

42. Flex-grow Flexible Box Layout
    1 1
    2
    The ability for a flex item to grow if necessary and dictates the amount 

    of available space an item should take.
    

    View Slide

43. .container {
    width : 700px; }
    .box--one {
    flex-grow : 1;
    flex-basis : 200px; /* 33px added */ }
    .box--two {
    flex-grow : 1;
    flex-basis : 200px; /* 33px added */ }
    .box--three {
    flex-grow : 1;
    flex-basis : 200px; /* 33px added */ }
    Flex-basis Flexible Box Layout
    

    View Slide

44. Flex-basis Flexible Box Layout
    .container {
    width : 700px; }
    .box--one {
    flex-grow : 1;
    flex-basis : 200px; /* 25px added */ }
    .box--two {
    flex-grow : 2;
    flex-basis : 200px; /* 50px added */ }
    .box--three {
    flex-grow : 1;
    flex-basis : 200px; /* 25px added */ }
    

    View Slide

45. Flex Flexible Box Layout
    .container {
    width : 700px; }
    .box--one {
    flex : 1 200px; /* 25px added */ }
    .box--two {
    flex : 2 200px; /* 50px added */ }
    .box--three {
    flex : 1 200px; /* 25px added */ }
    

    View Slide

46. Flex Flexible Box Layout
    

    View Slide

47. 
    
    …
    …
    …

    …
    …
    

    
    
    Three-column Flexbox layout Flexible Box Layout
    

    View Slide

48. View Slide

49. 1 2 3
    Order Flexible Box Layout
    Controls the order in which items appear visually in a flex container.
    

    View Slide

50. Flex-direction Flexible Box Layout
    3 2 1
    Right to left in ltr layouts, left to right in rtl layouts.
    

    View Slide

51. Order Flexible Box Layout
    2 1 3
    Controls the order in which items appear visually in a flex container.
    

    View Slide

52. 
    
    …
    …
    …

    …
    …
    

    
    
    Three-column Flexbox layout Flexible Box Layout
    

    View Slide

53. View Slide

54. [role="banner"] {
    order : 1; }
    .main {
    order : 3; }
    .aside--1 {
    order : 2; }
    .aside--2 {
    order : 4; }
    [role="contentinfo"] {
    order : 5; }
    Three-column Flexbox layout Flexible Box Layout
    

    View Slide

55. View Slide

56. [role="banner"] {
    order : 1; }
    .main {
    order : 4; }
    .aside--1 {
    order : 3; }
    .aside--2 {
    order : 2; }
    [role="contentinfo"] {
    order : 5; }
    Three-column Flexbox layout Flexible Box Layout
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. When is Flexbox appropriate?
    11
    30
    27 23
    6.1 1
    4.4 7.1 1
    37
    Flexible Box Layout
    1 Supported with -webkit- prefix
    

    View Slide

62. Legacy browser implementations Flexible Box Layout
    10
    2012 syntax with -ms- prefix
    5.1
    Old syntax with -webkit- prefix
    7
    Old syntax with -webkit- prefix
    4.4
    Old syntax with -webkit- prefix
    

    View Slide

63. Legacy Flexbox syntax Flexible Box Layout
    .container {
    display : -webkit-box;
    display : -moz-box;
    display : -ms-flexbox;
    display : -webkit-flex;
    display : flex; 

    }
    .container {
    display : -webkit-flex;
    display : flex; 

    }
    

    View Slide

64. Legacy Flexbox Sass mixin Flexible Box Layout
    @mixin flexbox() {
    display : -webkit-box;
    display : -moz-box;
    display : -ms-flexbox;
    display : -webkit-flex;
    display : flex;
    }
    @mixin flex($values) {
    -webkit-box-flex : $values;
    -moz-box-flex : $values;
    -webkit-flex : $values;
    -ms-flex : $values;
    flex : $values;
    }
    .container {
    @include flexbox(); 

    }
    .box {
    @include flex(1 200px); 

    }
    

    View Slide

65. View Slide

66. Modernizr Flexbox
    Isolate Flexbox compatible and non-compatible files
    Modernizr adds flexbox, no-flexbox, and flexboxlegacy classes
    .no-flexbox .container {
    /* styles */
    }
    Flexible Box Layout
    

    View Slide

67. When is Flexbox appropriate? Flexible Box Layout
    CSS performance test: Flexbox v CSS Table

    http://benfrain.com/css-performance-test-flexbox-v-css-table-fight/
    

    View Slide

68. Display table
    Modern layout foundations
    © Stuff & Nonsense 2014
    

    View Slide

69. 
    …
    …
    …

    …
    
    Navigation first Display table layout
    

    View Slide

70. View Slide

71. 
    …
    …
    …
    …
    
    Content first Display table layout
    

    View Slide

72. View Slide

73. View Slide

74. Table properties Display table layout
    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
    

    View Slide

75. Table properties Display table layout
    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
    

    View Slide

76. table-row
    An ‘anonymous’ box created by applying
    display:table-row to an element
    

    display : table

    An ‘anonymous’ box created by applying
    display:table to an element
    

    View Slide

77. 
    …
    
    …
    …

    
    …
    
    Content first Display table layout
    

    View Slide

78. View Slide

79. @media (min-width : 48em) {
    .content {
    display : table-footer-group; }
    [role="navigation"] {
    display : table-header-group; }

    }
    }
    Content first Display table layout
    

    View Slide

80. View Slide

81. Skip to navigation Display table layout
    

    Menu
    …
    
    …
    …

    
    …
    
    

    View Slide

82. View Slide

83. Skip to navigation Display table layout
    a[href="#navigation"] { 

    display : block; 

    }
    @media (min-width : 48em {
    a[href="#navigation"] { 

    display : none; }
    }
    

    View Slide

84. Two-column display-table layout Display table layout
    
    …

    

    
    …
    …

    

    
    …
    
    

    View Slide

85. Two-column display-table layout Display table layout
    @media (min-width : 62em {
    .content, .aside-1 {
    display : table-cell; }
    .main { width : 65%; }
    .aside-1 { width : 35%; }
    }
    

    View Slide

86. View Slide

87. View Slide

88. Creating columns Display table layout
    @media (min-width : 62em {
    .commerce-item {
    float : left;
    width : 33%; }

    }
    

    View Slide

89. Creating columns Display table layout
    

    View Slide

90. Creating columns Display table layout
    @media (min-width : 62em {
    .commerce-item {
    display : table-cell;
    width : 33%; }

    }
    

    View Slide

91. Creating columns Display table layout
    

    View Slide

92. Flexbox recap
    Modern layout foundations
    © Stuff & Nonsense 2014
    

    View Slide

93. Align-items Flexible Box Layout
    cross axis
    main axis
    flex-start: Items placed on the cross axis start line
    

    View Slide

94. Align-items Display table layout
    .content {

    align-items : flex-start; 

    }
    flex-start: Items placed on the cross axis start line
    

    View Slide

95. Align-items Flexible Box Layout
    cross axis
    main axis
    flex-end: Items placed on the cross axis end line
    

    View Slide

96. Align-items Display table layout
    .content {

    align-items : flex-end; 

    }
    flex-end: Items placed on the cross axis end line
    

    View Slide

97. Align-items Flexible Box Layout
    cross axis
    main axis
    center: items centered in the cross axis
    

    View Slide

98. Align-items Display table layout
    .content {

    align-items : center; 

    }
    center: items centered in the cross axis
    

    View Slide

99. Align-items Flexible Box Layout
    cross axis
    main axis
    stretch (default): items stretch to fill container height
    

    View Slide

100. Align-items Display table layout
     .content {

     align-items : stretch; /* default value */

     }
     stretch (default): items stretch to fill container height
     

     View Slide

101. Align-items Flexible Box Layout
     Starts on baseline Starts on baseline Starts on baseline
     cross axis
     main axis
     baseline: items aligned so that their baselines match
     

     View Slide

102. Align-items Display table layout
     .content {

     align-items : baseline; 

     }
     baseline: items aligned so that their baselines match
     

     View Slide

103. CSS3 for responsive web design
     © Stuff & Nonsense 2014
     Modules and
     components
     Part two
     

     View Slide

104. Additional Flexbox properties Flexible Box Layout
     Justify-content
     Align-content
     Align-self
     

     View Slide

105. Justify-content Flexible Box Layout
     cross axis
     flex-start: Items placed on the main axis start line
     main axis
     

     View Slide

106. Justify-content Display table layout
     .content {

     justify-content : flex-start; 

     }
     flex-start: Items placed on the main axis start line
     

     View Slide

107. Justify-content Flexible Box Layout
     cross axis
     flex-end: Items placed on the main axis end line
     main axis
     

     View Slide

108. Justify-content Display table layout
     .content {

     justify-content : flex-end; 

     }
     flex-end: Items placed on the main axis end line
     

     View Slide

109. Justify-content Flexible Box Layout
     cross axis
     center: Items centered in the main axis
     main axis
     

     View Slide

110. Justify-content Display table layout
     .content {

     justify-content : center; 

     }
     center: Items centered in the main axis
     

     View Slide

111. Justify-content Flexible Box Layout
     space-between: Items distributed in the line; first item on the start line, last on the end
     cross axis
     main axis
     

     View Slide

112. Justify-content Display table layout
     .content {

     justify-content : space-between; 

     }
     space-between: Items distributed in the line; first item on the start line, last on the end
     

     View Slide

113. Justify-content Flexible Box Layout
     main axis
     cross axis
     space-around: Items distributed in the line with equal space around them
     

     View Slide

114. Justify-content Display table layout
     .content {

     justify-content : space-around; 

     }
     space-around: Items distributed in the line with equal space around them
     

     View Slide

115. Align-content Flexible Box Layout
     cross axis
     flex-start: lines placed at the start of the container
     main axis
     

     View Slide

116. Align-content Display table layout
     .content {

     align-content : flex-start; 

     }
     flex-start: lines placed at the start of the container
     

     View Slide

117. Align-content Flexible Box Layout
     cross axis
     cross axis
     flex-end: lines placed at the end of the container
     main axis
     

     View Slide

118. Align-content Display table layout
     .content {

     align-content : flex-end; 

     }
     flex-end: lines placed at the end of the container
     

     View Slide

119. Align-content Flexible Box Layout
     cross axis
     cross axis
     center: lines placed at the center of the container
     main axis
     

     View Slide

120. Align-content Display table layout
     .content {

     align-content : center; 

     }
     center: lines placed at the center of the container
     

     View Slide

121. Align-content Flexible Box Layout
     cross axis
     cross axis
     stretch (default): lines stretch to fill container height
     main axis
     

     View Slide

122. Align-content Display table layout
     .content {

     align-content : stretch; /* default value */

     }
     stretch (default): lines stretch to fill container height
     

     View Slide

123. Align-content Flexible Box Layout
     cross axis
     cross axis
     space-between: Lines distributed in the container; first item on the start line, last on the end
     main axis
     

     View Slide

124. Align-content Display table layout
     .content {

     align-content : space-between; 

     }
     space-between: Lines distributed in the container; first item on the start line, last on the end
     

     View Slide

125. Align-content Flexible Box Layout
     cross axis
     cross axis
     main axis
     space-around: Lines distributed in the container with equal space around them
     

     View Slide

126. Align-content Display table layout
     .content {

     align-content : space-around; 

     }
     space-around: Lines distributed in the container with equal space around them
     

     View Slide

127. Align-self Flexible Box Layout
     cross axis
     cross axis
     main axis
     align-self: Overrides for individual flex items
     

     View Slide

128. Align-items Display table layout
     .content {
     /* auto | flex-start | flex-end | center | baseline | stretch */

     align-self : flex-end; 

     }
     align-self: Overrides for individual flex items
     

     View Slide

129. Media modules
     Modules and components
     © Stuff & Nonsense 2014
     

     View Slide

130. Media modules Modules and components
     

     View Slide

131. Media modules Modules and components
     
     

     
     
     
     
     …
     

     
     

     View Slide

132. Media modules Modules and components
     .flex-media {
     display : flex; }
     .flex-media__figure {
     margin-right : 22px; }
     .flex-media__content {
     flex : 1; }
     

     View Slide

133. Media modules Modules and components
     .flex-media {
     display : flex; }
     .flex-media__figure {
     margin-right : 22px; }
     .flex-media__content {
     flex : 1; }
     Use the Web Inspector to add: .media--reverse, .media--center and .media--bottom to .flex-media
     

     View Slide

134. Media modules Modules and components
     

     View Slide

135. Store items
     Modules and components
     © Stuff & Nonsense 2014
     

     View Slide

136. Store items Modules and components
     

     View Slide

137. Store items Modules and components
     
     

     …
     …
     
     

     View Slide

138. Store items Modules and components
     .flex-commerce-media-items {
     display : flex; }
     .commerce-media-item {
     flex : 1; }
     

     View Slide

139. Store items Modules and components
     

     View Slide

140. Store items Modules and components
     
     …
     …
     
     

     View Slide

141. Store items Modules and components
     .flex-commerce-media-items {
     display : flex; }
     .commerce-media-item {
     flex : 1; }
     Use the Web Inspector to add: .media--reverse, .media--center and .media--bottom to .flex-media
     

     View Slide

142. Store items Modules and components
     

     View Slide

143. Store items Modules and components
     .flex-self-alt {
     align-self : flex-end; }
     

     View Slide

144. Store items Modules and components
     Use the Web Inspector to add
     align-items : flex-end; to the flex-media__figure element
     

     View Slide

145. Pinning buttons
     Modules and components
     © Stuff & Nonsense 2014
     

     View Slide

146. Pinning buttons Modules and components
     

     View Slide

147. Pinning buttons Modules and components
     
     

     …
     …
     …
     
     

     View Slide

148. Pinning buttons Modules and components
     
     …
     
     …
     …
     Buy now
     
     
     

     View Slide

149. Pinning buttons Modules and components
     .flex-commerce-media-items {
     display : flex; 

     flex-wrap : wrap; }
     .commerce-media-item {
     flex : 1; }
     .flex-media__content {
     display : flex;
     flex-direction : column; }
     .item__button {
     margin-top : auto; }
     

     View Slide

150. Pinning buttons Modules and components
     

     View Slide

151. Figures & captions
     Modules and components
     © Stuff & Nonsense 2014
     

     View Slide

152. Figures and captions Modules and components
     

     View Slide

153. Figures and captions Modules and components
     <figure class="flex-figure">
     
     <figcaption>…figcaption>
     figure>
     

     View Slide

154. Figures and captions Modules and components
     @media (min-width : 64em) {
     .flex-figure { display : flex; }
     .flex-figure img { flex : 2 0 320px; }
     .flex-figure figcaption { flex : 1; }
     }
     Use the Web Inspector to add: .figure--reverse, .figure--center, 

     .figure--bottom and figure--alt to .flex-figure
     

     View Slide

155. Use the Web Inspector to add: .figure--reverse, .figure--center, 

     .figure--bottom and figure--alt to .flex-figure
     Figures and captions Modules and components
     

     View Slide

156. Superhero
     Modules and components
     © Stuff & Nonsense 2014
     

     View Slide

157. View Slide

158. Superhero Modules and components
     
     
     …
     …
     
     
     

     View Slide

159. Superhero Modules and components
     @media (min-width : 37.5em) {
     .flex-hero {
     display : flex;
     align-items : center;
     justify-content : center;
     height : auto;
     min-height : 24em; }
     }
     Use the Web Inspector to add: .hero--top and .hero--bottom to .flex-hero
     

     View Slide

160. View Slide

161. Use the Web Inspector to add: .hero--top and .hero--bottom to .flex-hero
     

     View Slide

162. Use the Web Inspector to add: .hero--top and .hero--bottom to .flex-hero
     

     View Slide

163. Centered banner
     Modules and components
     © Stuff & Nonsense 2014
     

     View Slide

164. View Slide

165. Centered banner Modules and components
     
     
     
     
     
     …
     
     
     

     View Slide

166. Centered banner Modules and components
     .banner__logo {
     text-align : center; }
     @media (min-width : 37.5em) {
     .banner__list {
     display : flex;
     justify-content : space-between;
     }
     }
     

     View Slide

167. Centered banner Modules and components
     @media (min-width : 48em) {
     .banner__list {
     transform : translateY(-130px);
     }
     #link-one { margin-right : 22px; }
     #link-three { margin-left : auto; }
     #link-four { margin-left : 22px; }

     }
     

     View Slide

168. View Slide

169. View Slide

170. Flexbox pagination
     Modules and components
     © Stuff & Nonsense 2014
     

     View Slide

171. Medium screens without Flexbox
     Medium screens display : flex;
     Flexbox pagination Modules and components
     

     View Slide

172. View Slide

173. Flexbox pagination Modules and components
     
     Previous
     1
     2
     3
     4
     5
     6
     Next
     
     

     View Slide

174. Flexbox pagination Modules and components
     .flex-pagination {
     display : flex;
     flex-wrap : wrap;
     justify-content : space-between;
     }
     .flex-pagination li {
     order : 2;
     display : inline-block;
     }
     

     View Slide

175. Flexbox pagination Modules and components
     .flex-pagination li:first-child {
     order : 0;
     width : 50%;
     text-align : left; }
     .flex-pagination li:last-child {
     order : 1;
     width : 50%;
     text-align : right; }
     

     View Slide

176. Medium screens without Flexbox
     Medium screens display : flex;
     Large screens display : flex;
     Flexbox pagination Modules and components
     

     View Slide

177. Flexbox pagination Modules and components
     @media (min-width : 48em) {
     .flex-pagination li { order : 0; }
     .flex-pagination li:first-child {
     order : 0;
     width : auto;
     text-align : center; }
     .flex-pagination li:last-child {
     order : 0;
     width : auto;
     text-align : center; }
     }
     

     View Slide

178. Flexible forms
     Modules and components
     © Stuff & Nonsense 2014
     

     View Slide

179. Flexible forms Modules and components
     

     View Slide

180. Flexible forms Modules and components
     
     Name
     
     
     
     
     Go
     
     

     View Slide

181. Flexible forms Modules and components
     
     www
     
     
     .com
     .co.uk
     .uk
     
     
     

     View Slide

182. Flexible forms Modules and components
     .flex-form {
     display : flex;
     flex-wrap : wrap;
     justify-content : space-between;
     }
     .flex-form__input {
     flex : 1; 

     }
     

     View Slide

183. Flexible forms Modules and components
     

     View Slide

184. Flexible forms Modules and components
     

     View Slide

185. Flexible forms Modules and components
     
     A long label that keeps expanding
     
     Search
     
     

     View Slide

186. Flexible forms Modules and components
     .flex-form-stretch {
     display : flex; }
     .flex-form-stretch input {
     flex : 1; }
     

     View Slide

187. Example showing stretch flexbox forms variations
     

     View Slide

188. CSS3 for responsive web design
     © Stuff & Nonsense 2014
     Responsive
     typography
     Part three
     

     View Slide

189. 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
     Viewport width units Responsive typography
     

     View Slide

190. Viewport width units Responsive typography
     h1 {

     font-size : 32px; 

     font-size : 3.2rem; 

     font-size : 5.4vw; 

     }
     

     View Slide

191. Sticky Flexbox footer
     Responsive typography
     © Stuff & Nonsense 2014
     

     View Slide

192. View Slide

193. 
     …
     …
     
     Sticky footer
     

     View Slide

194. Sticky footer
     .layout-full {

     display : flex;
     min-height : 100vh;
     flex-direction : column; 

     }
     .layout-full .container {
     flex : 1; }
     

     View Slide

195. Multiple column layout
     Responsive typography
     © Stuff & Nonsense 2014
     

     View Slide

196. Multiple column layout support
     10
     31 2
     32 1
     24 1
     5.1 1
     2.3 1
     7.1 1
     37 1
     Multiple column layout
     1 Supported with -webkit- prefix
     2 Supported with -moz- prefix
     

     View Slide

197. CSS column advantages Multiple column layout
     Improves readability

     Manages the measure

     Reduces purely presentational markup
     

     View Slide

198. View Slide

199. View Slide

200. View Slide

201. Presentational HTML
     
     …
     …

     
     Multiple column layout
     

     View Slide

202. Column properties
     Column count
     Column width
     Column span
     Break after
     Column gap
     Column rule
     Break before
     Multiple column layout
     

     View Slide

203. Meaningful markup
     
     <figure>...figure> 

     ...
     
     Multiple column layout
     

     View Slide

204. Column width
     @media (min-width : 48em) {
     .content-cols {
     -webkit-column-width : 24em;
     -moz-column-width : 24em;
     column-width : 24em;
     }
     }
     Multiple column layout
     

     View Slide

205. Column count
     @media (min-width : 48em) {
     .content-cols {
     -webkit-column-count : 2;
     -moz-column-count : 2;
     column-count : 2;
     }
     }
     Multiple column layout
     

     View Slide

206. Columns
     @media (min-width : 48em) {
     .content-cols {
     -webkit-columns : 2 24em;
     -moz-columns : 2 24em;
     columns : 2 24em;
     }
     }
     Multiple column layout
     

     View Slide

207. View Slide

208. Column gap
     @media (min-width : 48em) {
     .content-cols {
     -webkit-column-gap : 44px;
     -moz-column-gap : 44px;
     column-gap : 44px;
     }
     }
     Multiple column layout
     

     View Slide

209. Column rule
     @media (min-width : 48em) {
     .content-cols {
     column-rule-width : 3px;
     column-rule-style : double; 

     column-rule-color : #e3e2e0;
     }
     

     }
     -moz- and -webkit- prefixes are also required
     Multiple column layout
     

     View Slide

210. View Slide

211. Columnised lists
     @media (min-width : 37.5em) {
     .sidebar ul {
     column-count : 2;
     column-gap : 48px; }
     }
     @media (min-width : 48em) {
     .sidebar ul {
     column-count : 1; }
     }
     Multiple column layout
     

     View Slide

212. View Slide

213. View Slide

214. View Slide

215. View Slide

216. Columnised captions
     @media (min-width : 37.5em) {
     .cols-figure figcaption {
     column-count : 2;
     column-gap : 44px; }
     }
     Multiple column layout
     

     View Slide

217. Spanning columns
     
     ...
     <figure class="column__span" >...figure>
     ...
     Ape-o-nauts?
     ...
     
     Multiple column layout
     Column-span is not supported in Firefox
     

     View Slide

218. Spanning columns
     @media (min-width : 64em) {
     .cols__span {
     column-span : all; }
     }
     Multiple column layout
     

     View Slide

219. View Slide

220. View Slide

221. View Slide

222. View Slide

223. Spanning breaks
     .columns h2 {
     break-before : column;
     break-after : avoid-column; 

     }
     Multiple column layout
     

     View Slide

224. CSS shapes
     Responsive typography
     © Stuff & Nonsense 2014
     

     View Slide

225. 1 Supported with -webkit- prefix
     CSS shapes Responsive design details
     37 24
     7.1 1
     8
     37
     

     View Slide

226. .shapes__circle {
     /* Content will wrap around a shape */
     shape-outside : circle ( );
     }
     CSS shapes Responsive design details
     .shapes__circle {
     /* Content contained within a shape. May not be implemented */
     shape-inside : circle ( );
     }
     

     View Slide

227. CSS shapes Responsive design details
     circle ()
     ellipse ()
     inset ()
     polygon ()
     Each shape is defined by a set of points.
     

     View Slide

228. Conditions for use Responsive design details
     Floated left or right 

     A shapes element must be floated to enable content 

     to wrap around it.
     

     Intrinsic size

     Intrinsic size (height and width dimensions) needed to establish a
     coordinate system on the element; the system will be used to
     position the shape functions’ points on the element.
     The intrinsic size doesn’t have to be set using absolute values (e.g
     pixels), you can use percentages, which means that the shaped
     element can be fully responsive.
     

     View Slide

229. .shapes__circle {
     float : left;
     height : 200px;
     width : 200px;
     shape-outside : circle ( );
     }
     CSS shapes Responsive design details
     

     View Slide

230. View Slide

231. . shapes__circle {
     float : left;
     height : 200px;
     width : 200px;
     shape-outside : circle ( );

     shape-margin : 22px;
     }
     CSS shapes Responsive design details
     The content-box and padding-box keywords are optional
     

     View Slide

232. . shapes__ellipse {
     float : left;
     height : 250px;
     width : 200px;
     shape-outside : ellipse ( );

     }
     CSS shapes Responsive design details
     

     View Slide

233. View Slide

234. Responsive design details
     Inset shape
     . shapes__inset {
     float : left;
     height : 200px;
     width : 300px;
     shape-outside : inset ( );

     }
     

     View Slide

235. View Slide

236. Responsive design details
     Polygon shape
     . shapes__polygon {
     float : left;
     height : 200px;
     width : 250px;

     background : url(polygon.png) 100% 100%;
     clip-path: polygon(99.67px -3.00px, 117.08px 19.87px,…);

     shape-outside: polygon(99.67px -3.00px, 117.08px 19.87px…); }
     }
     

     View Slide

237. View Slide

238. 1 Supported with -webkit- prefix
     Clip path property Responsive design details
     31
     31 1
     24 1
     7 1
     4.4 1
     7.1 1
     38 1
     

     View Slide

239. Responsive design details
     Image shape
     Browser uses the alpha channel of an image to extract a
     shape.
     

     Shape is computed to be the path that encloses the area
     where the opacity of the specified image is greater than the
     ‘shape-image-threshold’ value.
     When shape-image-threshold is not specified, the initial value
     to be considered is 0.5.
     

     View Slide

240. Responsive design details
     Image shape
     An image should be CORS (Cross-Origin Resource Sharing.)
     Image has to be an image with an alpha channel, not a
     luminance channel. Luminance masks/images won’t be used
     and will have no effect
     

     View Slide

241. Responsive design details
     Image shape
     

     View Slide

242. Responsive design details
     Image shape
     . shapes__img {
     float : left;
     height : 200px;
     width : 250px;

     background : url(ship.png);
     shape-outside : url(ship-mask.png);
     shape-image-threshold : .5; }
     }
     

     View Slide

243. View Slide

244. View Slide

245. View Slide

246. View Slide

247. Responsive images
     Responsive typography
     © Stuff & Nonsense 2014
     

     View Slide

248. Image set Responsive images
     .banner__logo {
     background-image : url(assets/banner__logo.png);
     background-image :
     -webkit-image-set (url(banner__logo.png) 1x,
     url(banner__logo@2x.png) 2x);
     }
     

     View Slide

249. Source set attribute
     srcset="
     ursus@1.5x.png 1.5x, /* 300px */
     ursus@2x.png 2x, /* 400px */
     ursus@3x.png 3x" /* 600px */
     width="200px"
     alt="General Ursus">
     Responsive images
     

     View Slide

250. Sizes attribute
     srcset="
     ursus-small.png 200w,
     ursus-medium.png 400w,
     ursus-large.png 600w"
     sizes="(max-width : 30em) 100vw,
     (max-width : 48em) 50vw"
     alt="General Ursus">
     Responsive images
     

     View Slide

251. Resolution switching
     srcset="
     ursus-small.png 200w,
     ursus-medium.png 400w,
     ursus-large.png 600w,
     ursus@2x.png 200w 2x"
     sizes="(max-width : 30em) 100vw,
     (max-width : 48em) 50vw"
     alt="General Ursus">
     Responsive images
     

     View Slide

252. 32 1
     34 24
     7.1
     8
     37
     1 Not enabled by default but can be enabled in about:config
     Source set Responsive images
     

     View Slide

253. View Slide

254. CSS3 for responsive web design
     © Stuff & Nonsense 2014
     Responsive
     design details
     Part four
     

     View Slide

255. Border images
     Responsive design details
     © Stuff & Nonsense 2014
     

     View Slide

256. 1 Supported with -webkit- prefix
     Border images Responsive design details
     11
     31
     31 24
     5.1 1
     6.1
     2.3 1
     4.4 7.1
     37
     

     View Slide

257. View Slide

258. View Slide

259. 93px
     76px
     2kb png image
     

     View Slide

260. View Slide

261. 33px
     43px
     33px
     43px
     

     View Slide

262. 1 2 3
     7 8 9
     4 6
     ?
     

     View Slide

263. Border images Responsive design details
     .hero__image {
     border-image-slice : 33 43 33 43;
     border-image-source : url(hero__image.png); }
     .hero__image {
     border-image : url(hero__image.png) 33 43 33 43; }
     .hero__image {
     border-image : url(hero__image.png) 33 43;
     border-width : 33px 43px; }
     

     View Slide

264. View Slide

265. ?
     ?
     ?
     ?
     

     View Slide

266. View Slide

267. Border images Responsive design details
     .html {
     border-image-repeat :
     repeat /* top */
     repeat /* right */
     repeat /* bottom */
     repeat /* left */
     ;}
     

     View Slide

268. 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
     Border images Responsive design details
     

     View Slide

269. Border images Responsive design details
     border-width : 33px; border-width : 66px; border-width : 99px;
     

     View Slide

270. Background blends
     Responsive design details
     © Stuff & Nonsense 2014
     

     View Slide

271. Background blends Responsive design details
     35 24
     7.1
     8
     37 31
     

     View Slide

272. color
     color-burn
     color-dodge
     darken
     difference
     exclusion
     hard-light
     hue
     lighten
     luminosity
     multiply
     overlay
     saturation
     soft-light
     screen
     Background blends Responsive design details
     

     View Slide

273. Background blends Responsive design details
     Mix blend mode

     Specifies how an element will mix its colors with those 

     of others it overlaps in the ‘background.’
     Mixing and the isolation property
     

     Background blend mode

     Specifies how an element will mix the colour of its own
     background image and background color.
     

     View Slide

274. Mix blend mode Responsive design details
     mix-blend-mode : normal
     

     View Slide

275. .flex-media__figure {
     mix-blend-mode : normal;

     }
     Mix blend mode Responsive design details
     

     View Slide

276. Mix blend mode Responsive design details
     normal color color-dodge
     color-burn
     difference exclusion hard-light hue
     

     View Slide

277. Mix blend mode Responsive design details
     normal color lighten luminosity
     multiply overlay saturation screen
     

     View Slide

278. .hero {
     background-color : #fbd996;
     mix-blend-mode : difference;

     }
     Mix blend mode Responsive design details
     

     View Slide

279. View Slide

280. .hero {
     position : relative;

     }
     .hero:before {
     content : "";
     position : absolute;
     top : 0; right : 0; 

     bottom : 0; left : 0;
     background-color : #fbd996;
     mix-blend-mode: difference; 

     }
     Mix blend mode Responsive design details
     

     View Slide

281. View Slide

282. .hero__lead {
     mix-blend-mode : exclusion; 

     }
     .hero__action {
     mix-blend-mode : hard-light; 

     }
     Background blend mode Responsive design details
     

     View Slide

283. .hero__inner {
     isolation : isolate; 

     }
     Background blend mode Responsive design details
     

     View Slide

284. Use the Web Inspector to change the mix-blend-mode property:
     color
     color-burn
     color-dodge
     darken
     saturation
     soft-light
     screen
     difference
     exclusion
     hard-light
     hue
     lighten
     luminosity
     multiply
     overlay
     

     View Slide

285. .blend {

     background-color : #396d7f;

     background-image : 

     url(bg-waves-front.png), 

     url(bg-ship.png), 

     url(bg-waves-back.png), 

     url(bg-sky.png);

     background-blend-mode : difference;

     }
     Background blend mode Responsive design details
     

     View Slide

286. Use the Web Inspector to change the background-blend-mode property:
     color
     color-burn
     color-dodge
     darken
     saturation
     soft-light
     screen
     difference
     exclusion
     hard-light
     hue
     lighten
     luminosity
     multiply
     overlay
     

     View Slide

287. normal
     Use the Web Inspector to change the background-blend-mode property:
     color
     color-burn
     color-dodge
     darken
     saturation
     soft-light
     screen
     difference
     exclusion
     hard-light
     hue
     lighten
     luminosity
     multiply
     overlay
     

     View Slide

288. Use the Web Inspector to change the background-blend-mode property:
     color
     color-burn
     color-dodge
     darken
     saturation
     soft-light
     screen
     difference
     exclusion
     hard-light
     hue
     lighten
     luminosity
     multiply
     overlay
     

     View Slide

289. Use the Web Inspector to change the background-blend-mode property:
     color
     color-burn
     color-dodge
     darken
     saturation
     soft-light
     screen
     difference
     exclusion
     hard-light
     hue
     lighten
     luminosity
     multiply
     overlay
     

     View Slide

290. color-burn
     Use the Web Inspector to change the background-blend-mode property:
     color
     color-burn
     color-dodge
     darken
     saturation
     soft-light
     screen
     difference
     exclusion
     hard-light
     hue
     lighten
     luminosity
     multiply
     overlay
     

     View Slide

291. Use the Web Inspector to change the background-blend-mode property:
     color
     color-burn
     color-dodge
     darken
     saturation
     soft-light
     screen
     difference
     exclusion
     hard-light
     hue
     lighten
     luminosity
     multiply
     overlay
     

     View Slide

292. Use the Web Inspector to change the background-blend-mode property:
     color
     color-burn
     color-dodge
     darken
     saturation
     soft-light
     screen
     difference
     exclusion
     hard-light
     hue
     lighten
     luminosity
     multiply
     overlay
     

     View Slide

293. .blend {

     background-color : #396d7f;

     background-image : 

     url(bg-waves-front.png), 

     url(bg-ship.png), 

     url(bg-waves-back.png), 

     url(bg-sky.png);

     background-blend-mode : difference;

     }
     Background blend mode Responsive design details
     

     View Slide

294. .blend {

     background-blend-mode : 

     normal, normal, normal, luminosity; 

     }
     Background blend mode Responsive design details
     

     View Slide

295. Use the Web Inspector to change the background-blend-mode property:
     color
     color-burn
     color-dodge
     darken
     saturation
     soft-light
     screen
     difference
     exclusion
     hard-light
     hue
     lighten
     luminosity
     multiply
     overlay
     

     View Slide

296. .blend {

     background-image :
     url(bg-waves-front.png),
     url(bg-ship.png),
     url(bg-waves-back.png),
     -webkit-linear-gradient(…),
     url(bg-sky.png);

     …
     }
     Background blend mode Responsive design details
     

     View Slide

297. .blend {
     background-position :
     5% 200px,
     100% 20px,
     2% 140px,
     0px 0px,
     100% -200px;
     }
     Background blend mode Responsive design details
     

     View Slide

298. .blend {
     background-repeat :
     no-repeat,
     no-repeat,
     no-repeat,
     repeat-x,
     no-repeat;
     }
     Background blend mode Responsive design details
     

     View Slide

299. .blend {
     background-blend-mode :
     normal,
     normal,
     normal,
     normal,
     color-dodge,
     screen;
     }
     Background blend mode Responsive design details
     

     View Slide

300. Use the Web Inspector to change the background-blend-mode property:
     color
     color-burn
     color-dodge
     darken
     saturation
     soft-light
     screen
     difference
     exclusion
     hard-light
     hue
     lighten
     luminosity
     multiply
     overlay
     

     View Slide

301. View Slide

302. View Slide

303. View Slide

304. Filter effects
     Responsive design details
     © Stuff & Nonsense 2014
     

     View Slide

305. Filter effects support
     31 1
     24 1
     6.1 1
     4.4 1
     7.1 1
     371
     Responsive design details
     1 Supported with -webkit- prefix
     2 Support from Firefox 35 (January 2015)
     35 2
     

     View Slide

306. Filter properties Responsive design details
     Blur
     Drop-shadow
     Opacity
     Brightness
     Contrast
     Hue-rotate
     Invert
     Saturate
     Grayscale
     Sepia
     

     View Slide

307. View Slide

308. .donthatetimvandamme {
     -webkit-filter : blur(5px);
     filter : blur(5px); }
     

     View Slide

309. .donthatetimvandamme {
     -webkit-filter : opacity(.5);
     filter : opacity(.5); * }
     

     View Slide

310. .donthatetimvandamme {
     -webkit-filter : brightness(150%);
     filter : brightness(150%); * }
     

     View Slide

311. brightness(0); brightness(25%); brightness(50%);
     Unfiltered — 100% brightness(150%); brightness(200%);
     

     View Slide

312. .donthatetimvandamme {
     -webkit-filter : contrast(150%);
     filter : contrast(150%); * }
     

     View Slide

313. contrast(0); contrast(25%); contrast(50%);
     Unfiltered — 100% contrast(200%); contrast(800%);
     

     View Slide

314. .donthatetimvandamme {
     -webkit-filter : hue-rotate(90deg);
     filter : hue-rotate(90deg); * }
     

     View Slide

315. Unfiltered — 0deg hue-rotate(45deg); hue-rotate(90deg);
     hue-rotate(180deg); hue-rotate(270deg); hue-rotate(360deg);
     

     View Slide

316. .donthatetimvandamme {
     -webkit-filter : invert(100%);
     filter : invert(100%); * }
     

     View Slide

317. Unfiltered — 0 invert(25%)
     invert(50%) invert(75%) invert(100%)
     

     View Slide

318. .donthatetimvandamme {
     -webkit-filter : saturate(50%);
     filter : saturate(50%); * }
     

     View Slide

319. Unfiltered — 0 saturate(25%); saturate(50%);
     saturate(200%); saturate(400%); saturate(800%);
     

     View Slide

320. .donthatetimvandamme {
     -webkit-filter : grayscale(100%);
     filter : grayscale(100%); * }
     

     View Slide

321. Unfiltered — 0 greyscale(25%)
     greyscale(50%) greyscale(75%) greyscale(100%)
     

     View Slide

322. .donthatetimvandamme {
     -webkit-filter : sepia(100%);
     filter : sepia(100%); * }
     

     View Slide

323. Unfiltered — 0 sepia(25%)
     sepia(50%) sepia(75%) sepia(100%)
     

     View Slide

324. Combining filters Responsive design details
     .donthatetimvandamme {
     -webkit-filter : 

     contrast(1.5)
     drop-shadow(20px 20px 20px black);
     filter : 

     contrast(1.5)
     drop-shadow(20px 20px 20px black); }
     

     View Slide

325. drop-shadow
     box-shadow
     original
     

     View Slide

326. View Slide

327. View Slide

328. View Slide

329. CSS3 for
     responsive
     web design
     © Stuff & Nonsense 2014
     

     View Slide

330. Anything we missed?
     

     View Slide

331. Thank you
     

     View Slide

332. @malarkey
     

     View Slide

333. View Slide

334. CSS3 for responsive web design
     © Stuff & Nonsense 2014
     Some more things
     Bonus
     

     View Slide

335. Transforms
     Some more things
     © Stuff & Nonsense 2014
     

     View Slide

336. Transform support
     9
     31
     31 1
     36 24
     5.1 1
     2.3 1
     7.1 1
     37
     Some more things
     1 Supported with -webkit- prefix
     

     View Slide

337. Scale

     Stretches slice areas to fill horizontally or vertically
     

     Translate

     Moves an element horizontally and vertically
     

     Rotate

     Rotates an element
     

     Skew
     Distorts an element horizontally and vertically
     Transforms Some more things
     

     View Slide

338. View Slide

339. .donthatetimvandamme {
     transform : scaleX(1.5); }
     

     View Slide

340. .donthatetimvandamme {
     transform : scaleY(1.5); }
     

     View Slide

341. .donthatetimvandamme {
     transform : scale(1.5); }
     

     View Slide

342. .donthatetimvandamme {
     transform : scale(.5); }
     

     View Slide

343. .donthatetimvandamme {
     transform : translateX(50px); }
     

     View Slide

344. .donthatetimvandamme {
     transform : translateY(50px); }
     

     View Slide

345. .donthatetimvandamme {
     transform : translateX(50%); }
     

     View Slide

346. .donthatetimvandamme {
     transform : translateY(-50%); }
     

     View Slide

347. .donthatetimvandamme {
     transform : translate(50px -50px); }
     

     View Slide

348. .donthatetimvandamme {
     transform : rotate(90deg); }
     

     View Slide

349. .donthatetimvandamme {
     transform : rotate(-90deg); }
     

     View Slide

350. ‘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.
     

     View Slide

351. ‘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.
     

     View Slide

352. .donthatetimvandamme {
     transform : scale(1.5)
     translate(50px -50px)

     rotate(-90deg) }
     

     View Slide

353. .donthatetimvandamme {
     transform-origin : 0 0; * }
     

     View Slide

354. .donthatetimvandamme {
     transform-origin : 50% 0; * }
     

     View Slide

355. .donthatetimvandamme {
     transform-origin : 100% 0; * }
     

     View Slide

356. .donthatetimvandamme {
     transform-origin : 0 100%; * }
     

     View Slide

357. .donthatetimvandamme {
     transform-origin : 100% 100%; * }
     

     View Slide

358. Transitions
     Some more things
     © Stuff & Nonsense 2014
     

     View Slide

359. Transition support
     10
     31
     32 24
     5.1 1
     6.1
     2.3 1
     4.4 7.1
     37
     Some more things
     1 Supported with -webkit- prefix
     

     View Slide

360. Transition property Some more things
     .donthatetimvandamme {
     transition-property : opacity; }
     

     View Slide

361. Backgrounds
     Borders
     Colours
     Dimensions
     Fonts
     Opacity
     Positions
     Transforms
     Transition properties Some more things
     

     View Slide

362. Transition property Some more things
     .donthatetimvandamme {
     transition-property : opacity, color; }
     .donthatetimvandamme {
     transition-property : all; }
     

     View Slide

363. Transition duration Some more things
     .donthatetimvandamme {
     transition-duration : .15s; }
     

     View Slide

364. Transition delay Some more things
     .donthatetimvandamme {
     transition-delay : .1s; }
     

     View Slide

365. Transition timing Some more things
     .donthatetimvandamme {
     transition-timing-function : linear; }
     

     View Slide

366. Transition timing Some more things
     ease (default)
     

     View Slide

367. Transition timing Some more things
     linear
     

     View Slide

368. Transition timing Some more things
     ease-in
     

     View Slide

369. Transition timing Some more things
     ease-out
     

     View Slide

370. Transition timing Some more things
     ease-in-out
     

     View Slide

371. Transition shorthand Some more things
     .donthatetimvandamme {
     transition : opacity .15s .1s linear; }
     

     View Slide

372. View Slide