CSS3 for Responsive Web Design (full day workshop) 2015

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

Special thanks to @sarasoueidan

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, ﬁlters and blends Today’s schedule

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

Just kidding Today’s browser

Chrome Today’s browser

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

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

Three ingredients for responsive web design A ﬂexible grid Flexible
images and media CSS3 media queries

Three ingredients for responsive web design A ﬂexible grid Flexible
images and media CSS3 media queries And a whole lot more

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

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

Vertical centering, solved by Flexbox

Float drop and clearing, solved by Flexbox

Equal height columns, solved by Flexbox

Source order dependence, helped by Flexbox

Flexible boxes Modern layout foundations © Stuff & Nonsense 2014

Advantages of Flexbox More ﬂexible layouts Visual content reordering Column
height matching Flexible Box Layout

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

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

Horizontal layout Flexible Box Layout row row-reverse

Vertical layout Flexible Box Layout column column-reverse

Main & cross axis Flexible Box Layout main axis cross
axis

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

Wrapping ﬂex items Flexible Box Layout

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

<body class="layout-flex-2col"> <div class="container"> <header role="banner" class="flex-banner">…<header> <div class="main">…</div> <aside
class="aside—1">…</aside> <footer role="contentinfo">…</footer>   </div> </body> Two-column Flexbox layout Flexible Box Layout

.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

@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

.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;   }

Flex-grow Flexible Box Layout 1 1 1 The ability for
a ﬂex item to grow if necessary and dictates the amount   of available space an item should take.

.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

Flex-grow Flexible Box Layout 1 1 2 The ability for
a ﬂex item to grow if necessary and dictates the amount   of available space an item should take.

.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

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 */ }

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 */ }

Flex Flexible Box Layout

<body class="layout-flex-3col"> <div class="container"> <header role="banner" class="flex-banner">…</header> <div class="main">…</div> <aside
class="aside—1">…</aside>  <aside class="aside—2">…</aside> <footer role="contentinfo">…</footer>   </div> </body> Three-column Flexbox layout Flexible Box Layout

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

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

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

<body class="layout-flex-3col-variant"> <div class="container"> <header role="banner" class="flex-banner">…</header> <div class="main">…</div> <aside
class="aside—1">…</aside>  <aside class="aside—2">…</aside> <footer role="contentinfo">…</footer>   </div> </body> Three-column Flexbox layout Flexible Box Layout

[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

[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

When is Flexbox appropriate? 11 30 27 23 6.1 1
4.4 7.1 1 37 Flexible Box Layout 1 Supported with -webkit- preﬁx

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

Legacy Flexbox syntax Flexible Box Layout .container { display :
-webkit-box; display : -moz-box; display : -ms-ﬂexbox; display : -webkit-ﬂex; display : flex;   } .container { display : -webkit-flex; display : flex;   }

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);   }

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

When is Flexbox appropriate? Flexible Box Layout CSS performance test:
Flexbox v CSS Table  http://benfrain.com/css-performance-test-ﬂexbox-v-css-table-ﬁght/

Display table Modern layout foundations © Stuff & Nonsense 2014

<body class="table-1"> <header role="banner" class="flex-banner">…</header> <nav role="navigation" class="banner__nav">…</nav> <div class="content">…</div> 
<footer role="contentinfo">…</footer> </body> Navigation ﬁrst Display table layout

<body class="table-1"> <header role="banner" class="flex-banner">…</header> <div class="content">…</div> <nav role="navigation" class="banner__nav">…</nav>
<footer role="contentinfo">…</footer> </body> Content ﬁrst Display table layout

Table properties Display table layout display : table  Deﬁnes 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

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

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

<body class="table-1"> <header role="banner" class="flex-banner">…</header> <div class="content-group"> <div class="content">…</div> <nav
role="navigation">…</nav>  </div> <footer role="contentinfo">…</footer> </body> Content ﬁrst Display table layout

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

Skip to navigation Display table layout <body class="table-1">  <a href="#navigation">Menu</a>
<header role="banner" class="ﬂex-banner">…</header> <div class="content-group"> <div class="content">…</div> <nav role="navigation" id="navigation">…</nav>  </div> <footer role="contentinfo">…</footer> </body>

Skip to navigation Display table layout a[href="#navigation"] {   display
: block;   } @media (min-width : 48em { a[href="#navigation"] {   display : none; } }

Two-column display-table layout Display table layout <body class="table-2"> <header role="banner"
class="ﬂex-banner">…</header>  <div class="content-group">  <div class="content"> <div class="main">…</div> <aside class="aside-1">…</aside>  </div>  </div> <footer role="contentinfo">…</footer> </body>

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%; } }

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

Creating columns Display table layout

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

Creating columns Display table layout

Flexbox recap Modern layout foundations © Stuff & Nonsense 2014

Align-items Flexible Box Layout cross axis main axis ﬂex-start: Items
placed on the cross axis start line

Align-items Display table layout .content {  align-items : flex-start;  
} ﬂex-start: Items placed on the cross axis start line

Align-items Flexible Box Layout cross axis main axis ﬂex-end: Items
placed on the cross axis end line

Align-items Display table layout .content {  align-items : flex-end;  
} ﬂex-end: Items placed on the cross axis end line

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

Align-items Display table layout .content {  align-items : center;  
} center: items centered in the cross axis

Align-items Flexible Box Layout cross axis main axis stretch (default):
items stretch to ﬁll container height

Align-items Display table layout .content {  align-items : stretch; /*
default value */  } stretch (default): items stretch to ﬁll container height

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

Align-items Display table layout .content {  align-items : baseline;  
} baseline: items aligned so that their baselines match

Modules and components Part two

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

Justify-content Flexible Box Layout cross axis ﬂex-start: Items placed on
the main axis start line main axis

Justify-content Display table layout .content {  justify-content : flex-start;  
} ﬂex-start: Items placed on the main axis start line

Justify-content Flexible Box Layout cross axis ﬂex-end: Items placed on
the main axis end line main axis

Justify-content Display table layout .content {  justify-content : flex-end;  
} ﬂex-end: Items placed on the main axis end line

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

Justify-content Display table layout .content {  justify-content : center;  
} center: Items centered in the main axis

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

Justify-content Display table layout .content {  justify-content : space-between;  
} space-between: Items distributed in the line; ﬁrst item on the start line, last on the end

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

Justify-content Display table layout .content {  justify-content : space-around;  
} space-around: Items distributed in the line with equal space around them

Align-content Flexible Box Layout cross axis ﬂex-start: lines placed at
the start of the container main axis

Align-content Display table layout .content {  align-content : flex-start;  
} ﬂex-start: lines placed at the start of the container

Align-content Flexible Box Layout cross axis cross axis ﬂex-end: lines
placed at the end of the container main axis

Align-content Display table layout .content {  align-content : flex-end;  
} ﬂex-end: lines placed at the end of the container

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

Align-content Display table layout .content {  align-content : center;  
} center: lines placed at the center of the container

Align-content Flexible Box Layout cross axis cross axis stretch (default):
lines stretch to ﬁll container height main axis

Align-content Display table layout .content {  align-content : stretch; /*
default value */  } stretch (default): lines stretch to ﬁll container height

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

Align-content Display table layout .content {  align-content : space-between;  
} space-between: Lines distributed in the container; ﬁrst item on the start line, last on the end

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

Align-content Display table layout .content {  align-content : space-around;  
} space-around: Lines distributed in the container with equal space around them

Align-self Flexible Box Layout cross axis cross axis main axis
align-self: Overrides for individual ﬂex items

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

Media modules Modules and components © Stuff & Nonsense 2014

Media modules Modules and components

Media modules Modules and components <div class="flex-media">   <div class="flex-media__figure">
<img src="media__img.png -->" alt=""> </div> <div class="flex-media__content"> <p>…</p> </div>  </div>

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

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

Media modules Modules and components

Store items Modules and components © Stuff & Nonsense 2014

Store items Modules and components

Store items Modules and components <div class="flex-commerce-media-items">   <div class="commerce-media-item">…</div>
<div class="commerce-media-item">…</div> </div>

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

Store items Modules and components <div class="commerce-media-item"> <div class="flex-media__figure">…</div> <div
class="flex-media__content">…</div> </div>

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

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

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

Pinning buttons Modules and components © Stuff & Nonsense 2014

Pinning buttons Modules and components

Pinning buttons Modules and components <div class="flex-commerce-media-items">   <div class="commerce-media-item">…</div>
<div class="commerce-media-item">…</div> <div class="commerce-media-item">…</div> </div>

Pinning buttons Modules and components <div class="commerce-media-item"> <div class="flex-media__figure">…</div> <div
class="flex-media__content"> <h3 class="item__header">…</h3> <p>…</p> <a href="" class="item__button">Buy now</a> </div> </div>

Pinning buttons Modules and components .ﬂex-commerce-media-items { display : flex;
  flex-wrap : wrap; } .commerce-media-item { flex : 1; } .ﬂex-media__content { display : flex; flex-direction : column; } .item__button { margin-top : auto; }

Pinning buttons Modules and components

Figures & captions Modules and components © Stuff & Nonsense
2014

Figures and captions Modules and components

Figures and captions Modules and components <figure class="flex-figure"> <img src="16x9.png"
alt=""> <figcaption>…</figcaption> </figure>

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

Use the Web Inspector to add: .figure--reverse, .figure--center,   .figure--bottom
and figure--alt to .flex-figure Figures and captions Modules and components

Superhero Modules and components © Stuff & Nonsense 2014

Superhero Modules and components <div class="flex-hero"> <div class="hero__inner"> <p class="hero__lead">…</p>
<a href="" class="hero__action">…</a> </div> </div>

Superhero Modules and components @media (min-width : 37.5em) { .ﬂex-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 .ﬂex-hero

Use the Web Inspector to add: .hero--top and .hero--bottom to
.ﬂex-hero

Centered banner Modules and components © Stuff & Nonsense 2014

Centered banner Modules and components <header role="banner" class="flex-banner"> <div class="banner__logo">
<img src="banner__logo.png" alt=""> </div> <nav role="navigation"> <ul class="banner__list">…</ul> </nav> </header>

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

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; }  }

Flexbox pagination Modules and components © Stuff & Nonsense 2014

Medium screens without Flexbox Medium screens display : ﬂex; Flexbox
pagination Modules and components

Flexbox pagination Modules and components <ul class="flex-pagination"> <li><a href="">Previous</a></li> <li><a
href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> <li><a href="">Next</a></li> </ul>

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

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; }

Medium screens without Flexbox Medium screens display : ﬂex; Large
screens display : ﬂex; Flexbox pagination Modules and components

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; } }

Flexible forms Modules and components © Stuff & Nonsense 2014

Flexible forms Modules and components

Flexible forms Modules and components <div class="flex-form"> <span class="flex-form__item">Name</span> <input
class="flex-form__input"> </div> <div class="flex-form"> <input class="flex-form__input"> <a class="flex-form__item">Go</a> </div>

Flexible forms Modules and components <div class="flex-form"> <span class="flex-form__item">www</span> <input
class="flex-form__input"> <select class="flex-form__item"> <option>.com</option> <option>.co.uk</option> <option>.uk</option> </select> </div>

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

Flexible forms Modules and components

Flexible forms Modules and components <div class="flex-form-stretch"> <label>A long label
that keeps expanding</label> <input type="text"> <button>Search</button> </div>

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

Example showing stretch ﬂexbox forms variations

Responsive typography Part three

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

Viewport width units Responsive typography h1 {  font-size : 32px;
  font-size : 3.2rem;   font-size : 5.4vw;   }

Sticky Flexbox footer Responsive typography © Stuff & Nonsense 2014

<body class="layout-full"> <div class="container">…</div> <footer role="contentinfo">…</footer> </body> Sticky footer

Sticky footer .layout-full {  display : flex; min-height : 100vh;
flex-direction : column;   } .layout-full .container { flex : 1; }

Multiple column layout Responsive typography © Stuff & Nonsense 2014

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- preﬁx 2 Supported with -moz- preﬁx

CSS column advantages Multiple column layout Improves readability  Manages the
measure  Reduces purely presentational markup

Presentational HTML <div class="content-cols"> <div class="column column--one">…</div> <div class="column column--two">…</div> 
</div> Multiple column layout

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

Meaningful markup <div class="content-cols"> <ﬁgure>...</ﬁgure>   <p>...</p> </div> Multiple column
layout

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

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

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

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

Column rule @media (min-width : 48em) { .content-cols { column-rule-width
: 3px; column-rule-style : double;   column-rule-color : #e3e2e0; }   } -moz- and -webkit- preﬁxes are also required Multiple column layout

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

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

Spanning columns <div class="columns"> <p>...</p> <ﬁgure class="column__span" >...</ﬁgure> <p>...</p> <h2
class="column__span">Ape-o-nauts?</h2> ... </div> Multiple column layout Column-span is not supported in Firefox

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

Spanning breaks .columns h2 { break-before : column; break-after :
avoid-column;   } Multiple column layout

CSS shapes Responsive typography © Stuff & Nonsense 2014

1 Supported with -webkit- preﬁx CSS shapes Responsive design details
37 24 7.1 1 8 37

.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 ( ); }

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

Conditions for use Responsive design details Floated left or right
  A shapes element must be ﬂoated 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.

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

. shapes__circle { ﬂoat : 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

. shapes__ellipse { ﬂoat : left; height : 250px; width
: 200px; shape-outside : ellipse ( );  } CSS shapes Responsive design details

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

Responsive design details Polygon shape . shapes__polygon { ﬂoat :
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…); } }

1 Supported with -webkit- preﬁx Clip path property Responsive design
details 31 31 1 24 1 7 1 4.4 1 7.1 1 38 1

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 speciﬁed image is greater than the ‘shape-image-threshold’ value. When shape-image-threshold is not speciﬁed, the initial value to be considered is 0.5.

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

Responsive design details Image shape

Responsive design details Image shape . shapes__img { ﬂoat :
left; height : 200px; width : 250px;  background : url(ship.png); shape-outside : url(ship-mask.png); shape-image-threshold : .5; } }

Responsive images Responsive typography © Stuff & Nonsense 2014

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

Source set attribute <img src="ursus.png" srcset=" [email protected] 1.5x, /* 300px
*/ [email protected] 2x, /* 400px */ [email protected] 3x" /* 600px */ width="200px" alt="General Ursus"> Responsive images

Sizes attribute <img src="ursus.png" 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

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

32 1 34 24 7.1 8 37 1 Not enabled
by default but can be enabled in about:conﬁg Source set Responsive images

Responsive design details Part four

Border images Responsive design details © Stuff & Nonsense 2014

1 Supported with -webkit- preﬁx Border images Responsive design details
11 31 31 24 5.1 1 6.1 2.3 1 4.4 7.1 37

93px 76px 2kb png image

33px 43px 33px 43px

1 2 3 7 8 9 4 6 ?

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; }

? ? ? ?

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

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

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

Background blends Responsive design details 35 24 7.1 8 37
31

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

Background blends Responsive design details Mix blend mode  Speciﬁes how
an element will mix its colors with those   of others it overlaps in the ‘background.’ Mixing and the isolation property   Background blend mode  Speciﬁes how an element will mix the colour of its own background image and background color.

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

.ﬂex-media__ﬁgure { mix-blend-mode : normal;  } Mix blend mode Responsive
design details

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

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

.hero { background-color : #fbd996; mix-blend-mode : difference;  } Mix
blend mode Responsive design details

.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

.hero__lead { mix-blend-mode : exclusion;   } .hero__action { mix-blend-mode
: hard-light;   } Background blend mode Responsive design details

.hero__inner { isolation : isolate;   } Background blend mode
Responsive design details

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

.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

Use the Web Inspector to change the background-blend-mode property: color

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

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

.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

.blend {  background-blend-mode :   normal, normal, normal, luminosity;  
} Background blend mode Responsive design details

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

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

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

.blend { background-blend-mode : normal, normal, normal, normal, color-dodge, screen;

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

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

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

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

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

brightness(0); brightness(25%); brightness(50%); Unﬁltered — 100% brightness(150%); brightness(200%);

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

contrast(0); contrast(25%); contrast(50%); Unﬁltered — 100% contrast(200%); contrast(800%);

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

Unﬁltered — 0deg hue-rotate(45deg); hue-rotate(90deg); hue-rotate(180deg); hue-rotate(270deg); hue-rotate(360deg);

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

Unﬁltered — 0 invert(25%) invert(50%) invert(75%) invert(100%)

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

Unﬁltered — 0 saturate(25%); saturate(50%); saturate(200%); saturate(400%); saturate(800%);

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

Unﬁltered — 0 greyscale(25%) greyscale(50%) greyscale(75%) greyscale(100%)

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

Unﬁltered — 0 sepia(25%) sepia(50%) sepia(75%) sepia(100%)

Combining ﬁlters Responsive design details .donthatetimvandamme { -webkit-ﬁlter :  
contrast(1.5) drop-shadow(20px 20px 20px black); filter :   contrast(1.5) drop-shadow(20px 20px 20px black); }

drop-shadow box-shadow original

Anything we missed?

Thank you

@malarkey

Some more things Bonus

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- preﬁx

Scale  Stretches slice areas to ﬁll 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

.donthatetimvandamme { transform : scaleX(1.5); }

.donthatetimvandamme { transform : scaleY(1.5); }

.donthatetimvandamme { transform : scale(1.5); }

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

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

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

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

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

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

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

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

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

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

.donthatetimvandamme { transform : scale(1.5) translate(50px -50px)  rotate(-90deg) }

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

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

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

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

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

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- preﬁx

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

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

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

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

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

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

Transition timing Some more things ease (default)

Transition timing Some more things linear

Transition timing Some more things ease-in

Transition timing Some more things ease-out

Transition timing Some more things ease-in-out

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

CSS3 for Responsive Web Design (full day worksh...

CSS3 for Responsive Web Design (full day workshop) 2015

More Decks by Andy Clarke

Other Decks in Design

Featured

Transcript