Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

CSS3 for responsive web design with ANDREW CLARKE

Slide 4

Slide 4 text

CSS3 for responsive web design with ANDREW CLARKE

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

CSS3 for responsive web design with ANDREW CLARKE O U R E XA M PL E S

Slide 19

Slide 19 text

CSS3 for responsive web design with ANDREW CLARKE APES IN SPACE

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

CSS3 for responsive web design with ANDREW CLARKE

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

CSS3 for responsive web design with ANDREW CLARKE C O N T E N T B R E A K P O I N T S
M a d n e s s

Slide 46

Slide 46 text

CSS3 for responsive web design with ANDREW CLARKE C O N T E N T B R E A K P O I N T S @media only screen and (min-width : 444px) {…} @media only screen and (min-width : 560px) {…} @media only screen and (min-width : 585px) {…} @media only screen and (min-width : 747px) {…} @media only screen and (min-width : 856px) {…} @media only screen and (min-width : 1000px) {…} @media only screen and (min-width : 1382px) {…}

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

CSS3 for responsive web design with ANDY CLARKE D I S P LA Y T A B L E

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

CSS3 for responsive web design with ANDREW CLARKE N A V I G AT I O N F I R ST
…

Escape From The Planet Of The Apes

…
D I S P L A Y T A B L E

Slide 54

Slide 54 text

CSS3 for responsive web design with ANDREW CLARKE C O N T E N T F I R ST D I S P L A Y T A B L E

Escape From The Planet Of The Apes

…
…

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

CSS3 for responsive web design with ANDREW CLARKE C O N T E N T F I R ST D I S P L A Y T A B L E …
…
…
…

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

CSS3 for responsive web design with ANDREW CLARKE S K I P T O N A V I G AT I O N D I S P L A Y T A B L E Navigation …
…
…
…

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

CSS3 for responsive web design with ANDREW CLARKE C R E AT I N G C O L U M N S D I S P L A Y T A B L E … …
…
…
…

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

CSS3 for responsive web design with ANDY CLARKE M U LT I C O L U M N LA Y O U T

Slide 76

Slide 76 text

CSS3 for responsive web design with ANDREW CLARKE Improves readability Manages the measure Reduces purely presentational markup C S S C O L U M N A D V A N T A G E S M U L T I C O L U M N L A Y O U T

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

CSS3 for responsive web design with ANDREW CLARKE P R E S E N T AT I O N A L H T M L M U L T I C O L U M N L A Y O U T

Escape From The Planet Of The Apes

…
…

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

CSS3 for responsive web design with ANDREW CLARKE M E A N I N G F U L M A R K U P M U L T I C O L U M N L A Y O U T

Escape From The Planet Of The Apes

<figure>…figure>

…

…

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

CSS3 for responsive web design with ANDREW CLARKE S PA N N I N G C O L U M N S M U L T I C O L U M N L A Y O U T

Escape From The Planet Of The Apes

…

<figure>…figure> …

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

CSS3 for responsive web design with ANDREW CLARKE A D D I T I O N A L P R O P E R T I E S M U L T I C O L U M N L A Y O U T

Escape From The Planet Of The Apes

…

<figure class="span" >…figure>

…

Ape-o-nauts?

…

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

CSS3 for responsive web design with ANDY CLARKE I N T R O D U C I N G R E M U N I T S

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

CSS3 for responsive web design

Slide 106

Slide 106 text

CSS3 for responsive web design

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Apes In Space

Slide 111

Slide 111 text

Apes Space In

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

CSS3 for responsive web design with ANDY CLARKE F L E X I B L E B O X LA Y O U T

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

CSS3 for responsive web design with ANDREW CLARKE F L E X I B L E M A R K U P F L E X I B L E B O X L A Y O U T
… …
…
…
…
…

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

CSS3 for responsive web design with ANDREW CLARKE cross axis main axis C O L U M N

Slide 127

Slide 127 text

CSS3 for responsive web design with ANDREW CLARKE
…
…
…
J U ST I F Y C O N T E N T F L E X I B L E B O X L A Y O U T

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

No content

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

No content

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

No content

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

No content

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

justify-content : center; justify-content : flex-start; justify-content : flex-end; justify-content : space-between; justify-content : space-around;

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

No content

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

No content

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

No content

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

No content

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

CSS3 for responsive web design with ANDREW CLARKE F L E X I B L E M A R K U P F L E X I B L E B O X L A Y O U T
… …
…
…
…
…

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

1 2 3 4 5 6

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

No content

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

No content

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

No content

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

No content

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

No content

Slide 164

Slide 164 text

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

Slide 165

Slide 165 text

No content

Slide 166

Slide 166 text

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

Slide 167

Slide 167 text

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

Slide 168

Slide 168 text

No content

Slide 169

Slide 169 text

CSS3 for responsive web design with ANDREW CLARKE T H E F L E X P R O P E R TY F L E X I B L E B O X L A Y O U T
… …
…
…
…
…

Slide 170

Slide 170 text

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

Slide 171

Slide 171 text

No content

Slide 172

Slide 172 text

CSS3 for responsive web design with ANDREW CLARKE M I L LS ’ F L E X B O X N A V I G AT I O N F L E X I B L E B O X L A Y O U T
  • Home
  • Apes in space
  • Monkeys in orbit
  • Ape-O-Nauts in film
  • Apes will rise

Slide 173

Slide 173 text

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

Slide 174

Slide 174 text

No content

Slide 175

Slide 175 text

No content

Slide 176

Slide 176 text

No content

Slide 177

Slide 177 text

No content

Slide 178

Slide 178 text

No content

Slide 179

Slide 179 text

No content

Slide 180

Slide 180 text

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

Slide 181

Slide 181 text

CSS3 for responsive web design

Slide 182

Slide 182 text

CSS3 for responsive web design

Slide 183

Slide 183 text

CSS3 for responsive web design with ANDY CLARKE A N I M AT I N G F L E X B O X

Slide 184

Slide 184 text

No content

Slide 185

Slide 185 text

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

Slide 186

Slide 186 text

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

Slide 187

Slide 187 text

No content

Slide 188

Slide 188 text

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

Slide 189

Slide 189 text

No content

Slide 190

Slide 190 text

No content

Slide 191

Slide 191 text

No content

Slide 192

Slide 192 text

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

Slide 193

Slide 193 text

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

Slide 194

Slide 194 text

No content

Slide 195

Slide 195 text

CSS3 for responsive web design with ANDY CLARKE C S S R E G I O N S

Slide 196

Slide 196 text

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

Slide 197

Slide 197 text

CSS3 for responsive web design with ANDREW CLARKE Flow content into flexible containers Enables more complex layouts C S S R E G I O N S

Slide 198

Slide 198 text

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

Slide 199

Slide 199 text

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

Slide 200

Slide 200 text

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

Slide 201

Slide 201 text

CSS3 for responsive web design with ANDREW CLARKE M E A N I N G F U L M A R K U P

Escape From The Planet Of The Apes

Escape from the Planet of the Apes, is a 1971 science fiction film starring Roddy McDowall, Kim Hunter and Ricardo Montalbán.

C S S R E G I O N S

Slide 202

Slide 202 text

CSS3 for responsive web design with ANDREW CLARKE I D E N T I F Y A R E G I O N C S S R E G I O N S

Escape From The Planet Of The Apes

Escape from the Planet of the Apes, is a 1971 science fiction film starring Roddy McDowall, Kim Hunter and Ricardo Montalbán.

Slide 203

Slide 203 text

CSS3 for responsive web design with ANDREW CLARKE
D E F I N I N G LA Y O U T C S S R E G I O N S

Slide 204

Slide 204 text

CSS3 for responsive web design with ANDREW CLARKE D E F I N I N G LA Y O U T C S S R E G I O N S

Slide 205

Slide 205 text

No content

Slide 206

Slide 206 text

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

Slide 207

Slide 207 text

No content

Slide 208

Slide 208 text

CSS3 for responsive web design with ANDREW CLARKE M U LT I P L E F L O W S C S S R E G I O N S

Cornelius

Cornelius was a male chimpanzee from the films…

Zira

Dr. Zira was a chimpanzee psychologist and veterinarian, who specialised in the study of humans…

Slide 209

Slide 209 text

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

Slide 210

Slide 210 text

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

Slide 211

Slide 211 text

No content

Slide 212

Slide 212 text

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

Slide 213

Slide 213 text

No content

Slide 214

Slide 214 text

CSS3 for responsive web design with ANDREW CLARKE R E G I O N B R E A K S C S S R E G I O N S

Cornelius

…

Forbidden Zone

…

Slide 215

Slide 215 text

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

Slide 216

Slide 216 text

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

Slide 217

Slide 217 text

No content

Slide 218

Slide 218 text

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

Slide 219

Slide 219 text

No content

Slide 220

Slide 220 text

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

Slide 221

Slide 221 text

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

Slide 222

Slide 222 text

CSS3 for responsive web design with ANDREW CLARKE M E A N I N G F U L M A R K U P C S S S H A P E S

Cornelius was a male chimpanzee from the films Planet of the Apes, Beneath the Planet of the Apes and Escape from the Planet of the Apes, based on the character of Cornélius from the original novel, La Planète des singes by Pierre Boulle. He was the fiancée (later husband) of Zira and the eventual father of Milo, who would grow up to take the name Caesar. He really would have preferred the quiet life with less controversy.

Slide 223

Slide 223 text

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

Slide 224

Slide 224 text

No content

Slide 225

Slide 225 text

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

Slide 226

Slide 226 text

No content

Slide 227

Slide 227 text

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

Slide 228

Slide 228 text

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

Slide 229

Slide 229 text

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

Slide 230

Slide 230 text

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

Slide 231

Slide 231 text

No content

Slide 232

Slide 232 text

CSS3 for responsive web design with ANDREW CLARKE S H A P E - O U T S I D E C S S S H A P E S
…

Escape From The Planet Of The Apes

Cornelius was a male chimpanzee from the films Planet of the Apes, Beneath the Planet of the Apes and Escape from the Planet of the Apes, based on the character of Cornélius from the original novel, La Planète des singes by Pierre Boulle. He was the fiancée (later husband) of Zira and the eventual father of Milo, who would grow up to take the name Caesar…

Slide 233

Slide 233 text

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

Slide 234

Slide 234 text

No content

Slide 235

Slide 235 text

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

Slide 236

Slide 236 text

No content

Slide 237

Slide 237 text

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

Slide 238

Slide 238 text

No content

Slide 239

Slide 239 text

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

Slide 240

Slide 240 text

No content

Slide 241

Slide 241 text

CSS3 for responsive web design with ANDREW CLARKE
…
…

Escape From The Planet Of The Apes

Cornelius was a male chimpanzee from the films Planet of the Apes, Beneath the Planet of the Apes and Escape from the Planet of the Apes, based on the character of Cornélius from the original novel, La Planète des singes by Pierre Boulle. He was the fiancée (later husband) of Zira and the eventual father of Milo…

M U LT I P L E S H A P E S C S S S H A P E S

Slide 242

Slide 242 text

No content

Slide 243

Slide 243 text

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

Slide 244

Slide 244 text

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

Slide 245

Slide 245 text

CSS3 for responsive web design with ANDREW CLARKE

Slide 246

Slide 246 text

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

Slide 247

Slide 247 text

CSS3 for responsive web design with ANDREW CLARKE

Slide 248

Slide 248 text

CSS3 for responsive web design with ANDREW CLARKE

Slide 249

Slide 249 text

CSS3 for responsive web design with ANDREW CLARKE D E V I C E W I D T H @ V I E W P O R T

Slide 250

Slide 250 text

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

Slide 251

Slide 251 text

CSS3 for responsive web design with ANDREW CLARKE S C A L E F A C T O R S @ V I E W P O R T

Slide 252

Slide 252 text

CSS3 for responsive web design with ANDREW CLARKE D O N O T D O T H I S @ V I E W P O R T

Slide 253

Slide 253 text

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

Slide 254

Slide 254 text

No content

Slide 255

Slide 255 text

CSS3 for responsive web design

Slide 256

Slide 256 text

CSS3 for responsive web design

Slide 257

Slide 257 text

CSS3 for responsive web design with ANDY CLARKE C S S T R A N S I T I O N S

Slide 258

Slide 258 text

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

Slide 259

Slide 259 text

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

Slide 260

Slide 260 text

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

Slide 261

Slide 261 text

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

Slide 262

Slide 262 text

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

Slide 263

Slide 263 text

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

Slide 264

Slide 264 text

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

Slide 265

Slide 265 text

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

Slide 266

Slide 266 text

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

Slide 267

Slide 267 text

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

Slide 268

Slide 268 text

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

Slide 269

Slide 269 text

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

Slide 270

Slide 270 text

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

Slide 271

Slide 271 text

No content

Slide 272

Slide 272 text

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

Slide 273

Slide 273 text

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

Slide 274

Slide 274 text

No content

Slide 275

Slide 275 text

No content

Slide 276

Slide 276 text

CSS3 for responsive web design with ANDY CLARKE C S S T R A N S F O R M S

Slide 277

Slide 277 text

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

Slide 278

Slide 278 text

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

Slide 279

Slide 279 text

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

Slide 280

Slide 280 text

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

Slide 281

Slide 281 text

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

Slide 282

Slide 282 text

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

Slide 283

Slide 283 text

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

Slide 284

Slide 284 text

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

Slide 285

Slide 285 text

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

Slide 286

Slide 286 text

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

Slide 287

Slide 287 text

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

Slide 288

Slide 288 text

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

Slide 289

Slide 289 text

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

Slide 290

Slide 290 text

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

Slide 291

Slide 291 text

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

Slide 292

Slide 292 text

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

Slide 293

Slide 293 text

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

Slide 294

Slide 294 text

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

Slide 295

Slide 295 text

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

Slide 296

Slide 296 text

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

Slide 297

Slide 297 text

CSS3 for responsive web design with ANDY CLARKE B O R D E R I M A G E

Slide 298

Slide 298 text

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

Slide 299

Slide 299 text

CSS3 for responsive web design with ANDREW CLARKE 1 2 3 4 6 7 8 9 ?

Slide 300

Slide 300 text

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

Slide 301

Slide 301 text

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

Slide 302

Slide 302 text

CSS3 for responsive web design with ANDREW CLARKE

Slide 303

Slide 303 text

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

Slide 304

Slide 304 text

CSS3 for responsive web design with ANDREW CLARKE

Slide 305

Slide 305 text

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

Slide 306

Slide 306 text

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

Slide 307

Slide 307 text

CSS3 for responsive web design with ANDREW CLARKE

Slide 308

Slide 308 text

No content

Slide 309

Slide 309 text

CSS3 for responsive web design with ANDREW CLARKE Image 10 x 20px (120 bytes) 20px

Slide 310

Slide 310 text

[role="contentinfo"] { border-image : url(border.png) 20 0 0; * border-width : 20 px 0 0; } * -webkit-border-image : url(border.png) 20 0 0; -moz-border-image : url(border.png) 20 0 0; -o-border-image : url(border.png) 20 0 0;

Slide 311

Slide 311 text

border-width : 13px; border-width : 27px; border-width :54px;

Slide 312

Slide 312 text

CSS3 for responsive web design with ANDY CLARKE C S S F I LT E R S

Slide 313

Slide 313 text

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

Slide 314

Slide 314 text

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

Slide 315

Slide 315 text

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

Slide 316

Slide 316 text

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

Slide 317

Slide 317 text

CSS3 for responsive web design with ANDREW CLARKE B R I G H T N E S S C S S F I L T E R S .donthatetimvandamme { filter : brightness(150%);*} * -webkit-filter : brightness(150%);

Slide 318

Slide 318 text

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

Slide 319

Slide 319 text

CSS3 for responsive web design with ANDREW CLARKE C O N T R A ST C S S F I L T E R S .donthatetimvandamme { filter : contrast(150%);*} * -webkit-filter : contrast(150%);

Slide 320

Slide 320 text

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

Slide 321

Slide 321 text

CSS3 for responsive web design with ANDREW CLARKE H U E - R O T AT E C S S F I L T E R S .donthatetimvandamme { filter : hue-rotate(90deg);*} * -webkit-filter : hue-rotate(90deg);

Slide 322

Slide 322 text

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

Slide 323

Slide 323 text

CSS3 for responsive web design with ANDREW CLARKE I N V E R T C S S F I L T E R S .donthatetimvandamme { filter : invert(100%);*} * -webkit-filter : invert(100%);

Slide 324

Slide 324 text

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

Slide 325

Slide 325 text

CSS3 for responsive web design with ANDREW CLARKE S AT U R AT E C S S F I L T E R S .donthatetimvandamme { filter : saturate(50%);*} * -webkit-filter : saturate(50%);

Slide 326

Slide 326 text

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

Slide 327

Slide 327 text

CSS3 for responsive web design with ANDREW CLARKE G R A Y S C A L E C S S F I L T E R S .donthatetimvandamme { filter : grayscale(100%);*} * -webkit-filter : grayscale(100%);

Slide 328

Slide 328 text

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

Slide 329

Slide 329 text

CSS3 for responsive web design with ANDREW CLARKE S E P I A C S S F I L T E R S .donthatetimvandamme { filter : sepia(100%);*} * -webkit-filter : sepia(100%);

Slide 330

Slide 330 text

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

Slide 331

Slide 331 text

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

Slide 332

Slide 332 text

CSS3 for responsive web design with ANDREW CLARKE drop-shadow box-shadow original B O X V S D R O P S H A D O W C S S F I L T E R S

Slide 333

Slide 333 text

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

Slide 334

Slide 334 text

No content

Slide 335

Slide 335 text

CSS3 for responsive web design with ANDREW CLARKE CSS3 for responsive web design

Slide 336

Slide 336 text

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

Slide 337

Slide 337 text

CSS3 for responsive web design with ANDREW CLARKE T H A N K S

Slide 338

Slide 338 text

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

Slide 339

Slide 339 text

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

Slide 340

Slide 340 text

No content