SlideShare a Scribd company logo

CSS3: Simply Responsive

Denise Jacobs, profile picture
Denise Jacobs

This document provides an overview of creating simple and responsive CSS3 designs. It discusses: - Using a flexible grid, flexible images, and media queries to make a design responsive. - The four steps to get responsive: plan the design, crunch the numbers, determine breaking points, and add media queries. - New CSS3 properties and selectors that allow for richer web experiences. - Tips for cross-browser compatibility like leveraging source order, filtering styles, and using tools to handle vendor prefixes.

Technology
Related topics:
Responsive Design Insights
1 of 228
Downloaded 231 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
Simply Responsive CSS3 Denise R. Jacobs // 1 Rich Web Experience 2011// 30 November 2011 //
Simple & Responsive Tweets Who I am: @denisejacobs This fine event: @nofluff #rwx2011 I’m talking about: #css3sr 2
A little about me Denise R. Jacobs is an author, speaker, design thinker, and educator. She is the author of The CSS Detective Guide, and is a co-author for InterAct with Web Standards: A Holistic Approach to Web Design. She is a Consultant Web Design Trainer and Creativity Evangelist based in Miami, Florida. 3 CSSDetectiveGuide.com & InterActWithWebStandards.com
Simple? 4
Responsive? 5
The goal 6
How??? 7
Start here… 1. Get Responsive • Shift your brain • Mobile first • Watch out • 3 components • Flexible grid • Flexible images • Media queries 8
…Continue here 1. Get Responsive (cont’d) • 4 Steps • Plan your design • Crunch the numbers • Determine the breaking points • Add media queries 9
…And end here! 2. Know Your CSS3 • Getting started • What’s new • Rules of the road • Helping tools and scripts • Properties • Standard effects • Advanced effects • Selectors 10 3. Resources
Get Responsive 11 http://mediaqueri.es/
Responsive Devices? 12 http://www.flickr.com/photos/ivyfield/4486938457/
Responsive Devices! 13 http://www.flickr.com/photos/ivyfield/4486938457/
Brain shift 14
Mobile first 15
Avoid this desktop stylesheet + media queries = mobile site 16
=“Switchy” layout 17 http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Instead this mobile stylesheet + media queries = desktop site 18
= Truly responsive 19 http://ri.gov
What’s the difference? 20
3 components 21
1) Flexible grid 22
Flexible & Fluid • Size everything in ems or percentages • Flexible: Ems for everything • Fluid: Percentages for width, ems for height 23
Various grids • http://delicious.com/denisejacobs/grid 24
2) Flexible images 25
Flexible Images: Foreground img {width: 100%; max-width: 100%;} 26
Responsive foreground images 27 https://github.com/filamentgroup/Responsive-Images
Flexible Images: Background Use background-position to selectively crop your backgrounds 28
3) @media queries 29
@media queries @media queries are now being used as a basis for responsive web design: web interfaces that change with the size (and orientation) of the device. 30
How do they work? Through media queries, the browser is served different styles or stylesheets based on the dimensions and the device. The @media construct allows style sheet rules for various media in the same style sheet. An @media rule specifies the target media types (separated by commas) of a set of statements (delimited by curly braces). 31
Simple @media rule examples @media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } } 32
@media queries Example: /* Smartphones (portrait and landscape) - ---------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } 33
@media queries: Browser compatibility Yep Nope • IE 9 • IE 8, 7, 6 • Opera 9.5+ • Safari 2 • Opera Mobile • Firefox 1, 2 • Safari 3+ • Firefox 3.5+ • Chrome 34
Css3-mediaqueries.js http://code.google.com/p/css3-mediaqueries-js/ 35
Responsive design inspiration 36 Mediaqueri.es
Resources: @media queries • http://www.delicious.com/denisejacobs/ media-queries 37
5 Steps 38
1) Plan the design(s) 39 http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Plan the design(s) • Need to plan out 3-4 iterations of a page design for each resolution/device instead of just one 40
Calculate 41
Calculate • You need to know dimensions of page elements to be able to calculate proportional relationship of size and margins • The Golden Formula: target ÷ context = result 42
Target, context, and results 43
3) Determine the breaking points 44 http://www.slideshare.net/yiibu/pragmatic-responsive-design
Some standard sizes to shoot for • 320 px: smart phones in portrait mode • 480 px: smart phones in landscape mode • 600 px: smaller tablets like the Kindle (600 x 800) or Nook (600 x 1024) • 768 px: tablet in portrait • 1024 px: tablet in landscape and netbooks • 1200 px: low end for widescreen displays • 1600 px: widescreen displays 45
4) Add media queries 46
Hardboiled’s @media queries: Smartphone /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } 47 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
Hardboiled’s @media queries: iPad /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } 48 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
Hardboiled’s @media queries: Other /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 49 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
5) Test & Tweak 50
Testing, testing, 1-2-3 • Get the design to code and prototype as soon as possible • Test breaking points • Make adjustments 51
Voilà! 52
What’s New in CSS3 53
What’s New in CSS3? CSS3 is the third generation of the CSS specification recommendations from the W3C. In CSS3 there are new selectors, pseudo- elements and classes, properties, and values specifically created to answer the needs and solve the problems of modern web design and development. 54
CSS3 Modularity CSS3 has been broken up into different unique modules. This means is that, for example, the particular CSS properties and values for layout is grouped into one specific module. 55
CSS3 Modularity: Benefits • Browser producers can now implement CSS3 module by module • Speeds up the browser implementation process • Encourages innovation 56
The CSS3 Modules • Template Layout • Values and Units • Backgrounds and Borders • Web Fonts • Ruby • Behavioral Extensions to CSS • Basic User Interface • Line Layout • Basic Box Model • Flexible Box Layout • Grid Positioning • Image Values • Speech • 2D Transformations • Marquee • Multi-column Layout • Style Attribute Syntax • 3D Transformations • Cascading and Inheritance • Namespaces • Color • Transitions • Fonts • Animations • Text • View Module • Generated Content for Paged • Media Queries Media • Paged Media • Generated and Replaced • Selectors Content 57
Resources: New in CSS3 http://www.w3.org/TR/tr-groups-all# tr_Cascading_Style_Sheets__CSS__ Working_Group 58
Colors in CSS3: RGB • Regular RGB rgb(x, x, x): ex. rgb(255, 0, 0) • RBG with alpha-opacity rgba(x, x, x, y): An RGB value ex. rgba(255, 0, 0, 0.2) 59
RGBA Color Alpha opacity: 0.0 = 0% = no opacity 1.0 = 100% = full opacity 60
Colors in CSS3: HSL HSL stands for hue, saturation, and luminosity (lightness) • Regular HSL hsl(x%, x%, x%): ex. hsl(0, 100%, 50%) • HSL with alpha-opacity hsla(x%, x%, x%, y): ex. hsla(0, 100%, 50%, 0.5) 61
HSL Color Wheel 0º – Red 60º – Yellow 120º – Green 180º – Cyan 240º – Blue 300º – Magenta 62
HSL Color Picker Tool http://www.workwithcolor.com/hsl-color-picker-01.htm 63
Getting Started with CSS3: The Rules of the Road 64 http://www.flickr.com/photos/ilike/3707503212/
CSS3 Browser Compatibility 65 http://www.flickr.com/photos/sfllaw/222795669/
The Scoop • Many properties are browser-specific, requiring vendor prefixes • Plus there is a standard property • There are syntax differences between browser-specific properties and the standard property • All of this causes an increase in the amount of CSS 66
Code bloat in action Ideally: Reality: a.polaroid:active { a.polaroid:active { z-index: 999; z-index: 999; border-color: #6A6A6A; border-color: #6A6A6A; box-shadow: 15px 15px 20px -webkit-box-shadow: 15px rgba(0,0, 0, 0.4); 15px 20px rgba(0,0, 0, transform: rotate(0deg) 0.4); scale(1.05); -moz-box-shadow: 15px 15px } 20px rgba(0,0, 0, 0.4); box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.05); -moz-transform: rotate(0deg) scale(1.05); transform: rotate(0deg) scale(1.05); } 67
Doesn’t Validate 68
None of the older IEs support CSS3 …as in “not any.” 6 7 8 69 http://www.flickr.com/photos/johnsnape/4258191545/
IE9 now supports CSS3 …But still not as fully as the other browsers yet. 70
Resources: IE9 CSS3 support http://msdn.microsoft.com/en- us/ie/ff468705.aspx#_Web_standards_sup port http://msdn.microsoft.com/en- us/library/cc351024%28v=vs.85%29.aspx http://www.impressivewebs.com/css3- support-ie9/ 71
Tools you’ll need: 1. CSS3 Property browser support charts 2. CSS3 Selector browser support charts 3. CSS3 Specifications 4. All browsers to test in and/or cross-browser testers 72
CSS3 Property browser support charts http://www.findmebyip.com/ litmus 73
CSS3 Selector browser support charts http://www.standardista.com/css3/ css3-selector-browser-support 74
The CSS3 Specifications The CSS3 Specifications are THE resource for finding out exactly is the intented behavior and use of any given property. http://www.w3.org/standards/techs/ css#w3c_all 75
Cross-browser testers http://tredosoft.com/Multiple_IE http://crossbrowsertesting.com/ (paid) http://browsershots.org/ (free) 76
CSS3 & Cross- browser Coding 77 http://www.flickr.com/photos/scfiasco/4490322916/
The Goal: Code that works in all most browsers 78
Not all browsers are created equal 79
How can we achieve compatibility? 80 http://www.flickr.com/photos/barretthall/205175534/
Steps to get as close as possible 1. Leverage source order 2. Filter it 3. Let tools do all of the work 81
Leverage source order • Place default properties first • Place browser-specific properties ahead of standard properties • The standard properties will override the vendor’s when the standard is established. 82
A Proper Stack .gradient { color: #fff; 83
A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ 84
A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ 85
A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ 86
A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */ 87
A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */ filter: progid:DXImageTransform.Microsoft.gradient(star tColorStr='#07407c', EndColorStr='#aaaaaa'); } /* filter for IE7 and lower */ 88
Apply a Filter • If you must have the effect in IE lt 8, such as alpha opacity, gradient, shadow, transitions etc. you could use a proprietary IE filter. • The -ms-filter attribute is an extension to CSS. This syntax will allow other CSS parsers to skip the value of this unknown property completely and safely. It also avoids future name clashes with other CSS parsers. • In IE 8 mode, filters must be prefixed with "-ms-" and the PROGID must be in single or double quotes to make sure IE 8 renders the filters properly. 89
Filters: {Caveat Coder} • IE filters work, but are essentially hacks – IE filters are proprietary and thus not part of any standard specification, and never will be 90
Resources: IE Filters Microsoft Visual Filters and Transitions Reference http://msdn.microsoft.com/en-us/library/ ms532853%28v=VS.85%29.aspx 91
Let the tools do the work • We’ll talk about those next! 92
CSS3 Tools 93 http://www.flickr.com/photos/johnsnape/4258191545/
Useful CSS3 Tools 1. CSS3 Generators 2. Helper Scripts 3. Browser Feature Detection 4. Templates 94
CSS3 Generators 95 http://www.flickr.com/photos/latca/841730130/
CSS3Please.com 96
CSS3Generator.com 97
CSS3Maker.com 98
CSS3 Tools at WestCiv 99 http://westciv.com/tools/
More CSS3 Generators http://border-radius.com http://www.colorzilla.com/ gradient-editor/ http://csscorners.com http://border-image.com 100
Helper Scripts 101 http://www.flickr.com/photos/keystricken/386106987/
Get a helping hand… These scripts help IE lt 8 behave like CSS3- compliant browsers. However, support of CSS3 properties varies between scripts. 102
ie-7.js (includes IE8 and IE9) 103 http://code.google.com/p/ie7-js/
CSS3Pie.com 104
CSS Sandpaper 105 http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
Browser Feature Detection 106 http://www.flickr.com/photos/johnsnape/4258191545/
Modernizr.com 107
What does Modernizr do? Modernizr detects which CSS3 (and HTML5) properties are supported by the browser, and appends classes to the <html> tag, which then allows you to create styles to target specific properties to individual browsers. It is a premier progressive enhancement tool! 108
How to use Modernizr http://www.alistapart.com/articles/taking- advantage-of-html5-and-css3-with- modernizr/ http://webdesignernotebook.com/css/ how-to-use-modernizr http://www.ericlightbody.com/2010/ modernizr-your-tool-for-html5-and-css3- functionality/ 109
Templates 110 http://www.flickr.com/photos/jazzmasterson/275796175/
HTML5Boilerplate.com Paul Irish’s HTML5 template file http://html5boilerplate.com/ 111
CSS3 Properties! 112
Webfonts 113
@font-face 114 http://lostworldsfairs.com/moon/
@font-face • Note: – Actually part of the CSS2.1 specification. – Therefore, the IEs do support it! • Tips & issues – When you decide to use a font as a webfont, you have to be sure that the EULA supports it. – One way to avoid that is to use ONLY fonts that are listed as approved webfonts. • Browser Support – IE lt 8 require fonts to be in EOT format – IE9 now supports WOFF 115
@font-face bug: IE lt 8 @font-face super bullet-proofing The problem: @font-face doesn’t work, even with the proper normal syntax. What gives? 116
@font-face bug: Webkit @font-face bold and italics “bug” The problem: Applying font-weight:bold or font- style: italic to @font-face'd text doesn’t work. 117
Solution: IE proof @font-face + faux variations Example: @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix‘) format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont- webfont.ttf')format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); font-weight:normal; font-style:normal; font-variant:normal; } 118
FontSquirrel.com 119 http://www.fontsquirrel.com/fontface/generator
Webfont Services Instead of generating the webfonts yourself, you can pay a service where the webfonts are hosted elsewhere, and you link to them and use the fonts on their server. 120
Webfont Services 121 http://www.typekit.com
Webfont Services http://www.typotheque http://www.webtype.com .com/webfonts http://www.fontslive.com http://typekit.com http://www.extensis.com/en http://fontdeck.com /WebINK/ http://kernest.com http://webfonts.fonts.com http://www.ascenderfonts http://webfonts.info/wiki/in .com/webfonts/ dex.php?title=Category:W ebfont_Services 122
Google Font Directory http://code.google.com/webfonts 123
Resources: @font-face • http://www.delicious.com/denisejacobs/ font-face 124
New Visual Effects in CSS3 125
New Visual Effects in CSS3 • border-radius • rgba color • box-shadow • text-shadow • gradient 126
border-radius 127 http://oh-hai.biz
Old-skool: code contortions 128
border-radius • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does 129
border-radius Syntax comparison breakdown: • -moz allows multiple values for each position • -webkit individual values 130 • Standard is like mozilla
border-radius #contentcolumn { -moz-border-radius: 20px 20px 0 0; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; border-radius: 20px 20px 0 0; } 131
Border-radius.com 132
border-radius Resources http://www.delicious.com/denisejacobs/ border-radius 133
rgba 134 http://aarronwalter.com/designer/
rgba • Tips & issues – More granular control of the color opacity of a particular element • Browser Support – IE lt 8 does not support, IE9 does – There is an IE filter that will give transparency with a color. 135
Cross-browser: rgba • Place after regular rgb color property to override in modern browsers; older browsers will ignore it • IE lt 8 bug: use the property background instead of background-color for the regular color 136
Full solution: rgba .rgba { background-color: #ff0000; /* fallback color in hexidecimal. */ background-color: transparent; /* transparent is key for the filter to work in IE8. best done through conditional comments */ background-color: rgba(255, 0, 0, 0.3); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr=#4CFF0000, endColorstr=#4CFF0000)"; /* filter for IE8 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#4CFF0000, endColorstr=#4CFF0000); /* filter for older IEs */ } 137
box-shadow 138 http://badassideas.com/work/
box-shadow • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does – There is a filter for IE: shadow (actually there are 2: shadow and dropshadow, but shadow is said to be better) 139
box-shadow .portfolio { -moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6); box-shadow: 0 5px 20px rgba(0,0,0,0.6); } 140
Full solution: box-shadow .boxshadow { -moz-box-shadow: 3px 3px 10px #333; -webkit-box-shadow: 3px 3px 10px #333; box-shadow: 3px 3px 10px #333; /*standard*/ -ms-filter: "progid:DXImageTransform.Microsoft.Shad ow(Strength=4, Direction=135, Color='#333333')"; /* For IE 8 */ filter: progid:DXImageTransform.Microsoft.Shado w(Strength=4, Direction=135, Color='#333333'); /* For IE 5.5 - 7 */ } 141
Inspiration: box-shadow 142 http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
Resources: box-shadow http://www.delicious.com/denisejacobs/ box-shadow 143
text-shadow 144 http://www.bountybev.com
text-shadow • Tips & issues – Can help accentuate text and improve readability and visual importance • Browser Support – IE lt 8 does not support, nor does IE9 :/ – could use the IE filter: shadow 145
Full solution: text-shadow .textshadow h2 { text-shadow:1px 1px 2px rgba(48,80,82,0.8); -ms-filter: "progid:DXImageTransform.Microsoft.Shad ow(Strength=2, Direction=135, Color='#305052')"; /* For IE 8+ */ filter: progid:DXImageTransform.Microsoft.Shado w(Strength=2, Direction=135, Color='#305052'); /* For IE 5.5 - 7 */ } 146
Inspiration: text shadow 147 http://www.midwinter-dg.com/blog_demos/css-text-shadows/
Inspiration: text shadow 148 http://desandro.com/articles/the-new-lens-flare/
Resources: text-shadow http://www.delicious.com/denisejacobs/ text-shadow 149
gradient 150 http://raymondjay.com/
Old skool: Gradient background 151
gradient • Tips & issues – Very different syntax for mozilla and webkit browsers previously – Newer syntax for current and future browsers • Browser Support – IE does not support, so will still need a fallback image for those browsers 152
gradient #mainnav li a { background-color: #f7f6f4; background-image: url(bg_navitems.gif); background-image: -moz-linear-gradient(100% 100% 90deg, #ccc9ba, #ffffff); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ccc9ba)); } 153
gradient: Full solution .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*background color matches one of the stop colors. The gradient_slice.jpg is 1px wide */ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr='#07407c', EndColorStr='#aaaaaa')"; /* IE8+ */ filter: progid:DXImageTransform.Microsoft.gradient(star tColorStr='#07407c', EndColorStr='#aaaaaa'); /* IE7- */ } 154
Colorzilla gradient tool 155 http://www.colorzilla.com/gradient-editor/
Inspiration: gradients 156 http://leaverou.me/css3patterns/
Inspiration: gradients http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/ 157
Tools: gradient http://www.colorzilla.com/gradient-editor/ http://www.westciv.com/tools/gradients/ http://css3please.com http://css3generator.com 158
Resources: gradient http://www.delicious.com/denisejacobs/ gradient 159
Advanced Visual Effects in CSS3 160
CSS3 for Advanced Visual Presentation 1. border-image 2. multiple background images 3. background-size 4. multiple text columns 161
border-image 162 http://www.spoongraphics.com/blog/
border-image Borders can now be created using images and sections thereof for enhanced visual design. • Tips & issues – Documentation on best use is sparse – No adequate fall-back techniques for graceful degradation – Vendor prefixes for Mozilla and webkit • Browser support 163 – The IEs do not support
border-image div.note div.border { -moz-border-image: url(/https/www.slideshare.net/playground/awesome-overlays/border- image.png) 5 5 5 5 stretch; -webkit-border-image: url(/https/www.slideshare.net/playground/awesome-overlays/border- image.png) 5 5 5 5 stretch; border-image: url(/https/www.slideshare.net/playground/awesome- overlays/border-image.png) 5 5 5 5 stretch; } 164
Border-image.com 165
Resources: border-image http://www.delicious.com/denisejacobs/ border-image 166
Multiple backgrounds 167 http://www.lostworldsfairs.com
Multiple backgrounds • Tips & issues: – The backgrounds are shown according to the order listed, with the first background image listed is the one “on top” and the rest stack underneath it. – Can use CSS3 gradients (which are like background images) in conjunction with multiple background images. • Browser support: – IE lt 8 does not support, but IE9 does 168
Multiple backgrounds body { background-color: #5ABBCF; background: #5ABBCF url(../images/bokeh1.png) no- repeat; /* fallback image */ background: url(../images/bokeh4.png) no-repeat, url(../images/bokeh3.png) no-repeat 10% 0, url(../images/bokeh2.png) no-repeat 20% 0, url(../images/bokeh1.png) no-repeat, url(../images/glow.png) no-repeat 90% 0, -moz-linear-gradient(0% 90% 90deg,#5ABBCF, #95E0EF); background: url(../images/bokeh4.png) no-repeat, url(../images/bokeh3.png) no-repeat 10% 0, url(../images/bokeh2.png) no-repeat 20% 0, url(../images/bokeh1.png) no-repeat, url(../images/glow.png) no-repeat 90% 0, -webkit-gradient(linear, 0% 0%, 0% 90%, from(#95E0EF), to(#5ABBCF)); } 169
Resources: multiple backgrounds http://www.delicious.com/denisejacobs/ multiplebackgrounds 170
background-size 171 http://www.alistapart.com/articles/supersize-that-background-please/
background-size You can set the size of a background image and make sure it covers the entire background of a page, no matter what the size. • Tips & Issues: – Vendor prefixes for mozilla, webkit, and opera • Browser support: – IE lt 8 does not support, but IE9 does 172
background-size Example: body { background: #000 url(myBackground_1280x960.jpg) center center fixed no-repeat; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } 173
Inspiration: background-size 174 Launchrock.com
Resources: background-size • http://www.delicious.com/denisejacobs/ backgroundsize • http://www.alistapart.com/articles/ supersize-that-background-please/ • http://www.w3.org/TR/css3- background/#the-background-size 175
Multiple text columns 176 http://www.yaili.com
Multiple text columns You can have one div containing a number of paragraphs which can be displayed in columns, with no float or height manipulations. • Tips & Issues: – Some of the properties are not widely supported, and many of the related (like dividers, breakers, etc.) haven’t been implemented or aren’t supported yet either. 177
Multiple text columns Example: div.three-col { -webkit-column-count: 3; -webkit-column-gap: 15px; -moz-column-count: 3; -moz-column-gap: 15px; column-count: 3; column-gap: 15px; } 178
Resources: multiple columns http://www.delicious.com/denisejacobs/ multiplecolumns 179
2d Transformations with CSS3 180
transform (2d) 181 http://www.zurb.com/playground/css3-polaroids/
transform • Tips & issues – Mozilla, Webkit, and Opera vendor prefixes; no standard yet. • Browser Support – IE lt 8 does not support, but IE9 does 182
2D Transformations Different kinds of transforms: • rotate • scale • skew • translate • matrix 183
transform/rotate: full solution .rotate { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizing Method='auto expand', M11=0.9961946980917455, M12=0.08715574274765817, M21=- 0.08715574274765817, M22=0.9961946980917455); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0 .9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand')"; zoom: 1; } 184
transform: multiple You can apply multiple transform properties to one element. Example: .enlargen:hover { -webkit-transform: translate(-50%, -50%) scale(2) rotate(0); -moz-transform: translate(-50%, -50%) scale(2) rotate(0); -o-transform: translate(-50%, -50%) scale(2) rotate(0); transform: translate(-50%, -50%) scale(2) rotate(0); } 185
Resources: 2D transforms http://www.delicious.com/denisejacobs/ transform 186
Animation with CSS3 187
Animation 1. transitions 2. animation (the webkits only) A Tip: Be subtle – it’s more effective 188
Old skoool: Flash 189
transition 190 http://timvandamme.com/
transition You can create subtle transitions between hover states on elements. The transitions smooth out visual jumps. • Tips & issues – Be sure to put the transition effect on the correct element 191
transition Example: #id_of_element { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } 192
Animation 193 http://www.css3exp.com/moon/
Animation You can create subtle animations in the browser! • Tips & issues: – Plan out the animation sequence ahead of time – Be aware of style order in the CSS 194
Animation div { animation-name: diagonal-slide; animation-duration: 5s; animation-iteration-count: 10; } @keyframes diagonal-slide { from { left: 0; top: 0; } to { left: 100px; top: 100px; } } 195
Resources: Animation http://www.delicious.com/denisejacobs/ animation 196
CSS3 Selectors 197 http://www.flickr.com/photos/jamiecampbell/446301597/
Getting Advanced Advanced selectors are a good way to specifically target styles for modern browsers. The right selector will help you achieve targeting nirvana, so it’s important to know which selectors you can use now. 198
CSS3 Selectors Advanced selectors give us the power to target elements that are not part of the document tree and/or those that are generated dynamically. • Tips & issues – There are a lot of options to choose from! – Great to use for progressive enhancement – Need to be aware of changes to specificity 199
CSS3 Selector Specification • General sibling • Pseudo-classes E~F – Target • :target • Attribute substrings – a[attribute^="value"] – Negation – a[attribute$="value"] • :not(s) – a[attribute*="value"] – State • Pseudo-elements • :enabled no new ones, all pseudo- • :disabled elements in CSS3 indicated with :: • :checked • :indeterminate 200
CSS3 Selectors – Structural • :nth-child(n) • :nth-last-child(n) • :nth-of-type(n) • :nth-last-of-type(n) • :last-child • :first-of-type • :last-of-type • :only-child • :only-of-type • :empty • :root 201
Uses for advanced selectors • Great for progressive enhancement • Styling first, last or x-number of elements 202
Old skool: zebra striping 203
With structural pseudo-elements The keywords odd and even can be used to match child elements whose index is odd or even. The index of an element’s first child is 1, so this rule will match any p element that is the first, third, fifth, and so on, child of its parent element. An argument, can is placed within the parentheses, as a number, a keyword, or a formula. A formula an + b can be used to create more complex repeating patterns. In the formula, a represents a cycle size, n is a counter starting at 0, and b represents an offset value. All values are integers. 204
Nth child selector tester http://leaverou.me/demos/nth.html 205
CSS3 Selector Support http://www.findmebyip.com/litmus 206
Tools: CSS3 Selectors • http://www.quirksmode.org/ compatibility.html • http://www.evotech.net/blog/2009/02/css -browser-support/ • http://www.findmebyip.com/litmus 207
CSS3 Selector Helper Script http://www.selectivizr.com 208
Resources: CSS3 Selectors • http://www.delicious.com/denisejacobs/se lectors+css3 • http://inspectelement.com/tutorials/a- look-at-some-of-the-new-selectors- introduced-in-css3/ • http://24ways.org/2009/cleaner-code- with-css3-selectors 209
Tools: CSS3 Selectors • http://www.quirksmode.org/ compatibility.html • http://www.findmebyip.com/litmus 210
Resources: CSS3 Selectors • http://www.delicious.com/denisejacobs/ selectors+css3 • http://inspectelement.com/tutorials/a- look-at-some-of-the-new-selectors- introduced-in-css3/ • http://24ways.org/2009/ cleaner-code-with-css3-selectors 211
The End? 212
Today 213
Put yourself into 214
Tomorrow 215
This is just the beginning! My Delicious links are HUGE compendia of all things related to CSS3, updated as I find new articles, resources and tools! http://delicious.com/denisejacobs/css3 http://delicious.com/denisejacobs/ css3training 216
Article-lations 217
On Netmagzine.com http://www.netmagazine.com/features/ http://www.netmagazine.com/features/ top-10-css3-techniques 21-top-tools-responsive-web-design 218
A library of resources 219 http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Library_1900.jpg
CSS3, hot off the presses! The Book of CSS3 220 by Peter Gasston
Project-based CSS3 Stunning CSS3 221 by Zoe Mikely Gillenwater
CSS3 Condensed and Explained CSS3 For Web Designers 222 by Dan Cederholm
The book on Responsive Web Design Responsive Web Design by Ethan Marcotte 223
CSS3 and Media Queries Hardboiled Web Design 224 by Andy Clarke
Flexible Layouts Flexible Web Design 225 by Zoe Mickley Gillenwater
Proactive coding & graceful degradation CssDetectiveGuide.com 226
Holistic Web Design Interact with Web Standards: A Holistic Approach to Web Design 227
Where to find me: DeniseJacobs.com denise@denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs 228

More Related Content

PDF
CSS3: Ripe and Ready to Respond
Denise Jacobs
 
PDF
Intro to CSS3
Denise Jacobs
 
PPTX
Colors In CSS3
Lea Verou
 
PDF
Quality Development with CSS3
Shay Howe
 
PDF
Introduction to CSS3
Doris Chen
 
PDF
[Worskhop Summits] CSS3 Workshop
Christopher Schmitt
 
PDF
Css3
Rahma Boufalgha
 
PDF
CSS3: Ripe and Ready
Denise Jacobs
 
CSS3: Ripe and Ready to Respond
Denise Jacobs
 
Intro to CSS3
Denise Jacobs
 
Colors In CSS3
Lea Verou
 
Quality Development with CSS3
Shay Howe
 
Introduction to CSS3
Doris Chen
 
[Worskhop Summits] CSS3 Workshop
Christopher Schmitt
 
Css3
Rahma Boufalgha
 
CSS3: Ripe and Ready
Denise Jacobs
 

What's hot (20)

PDF
CSS3 Media Queries
Russ Weakley
 
PDF
Simply Responsive CSS3
Denise Jacobs
 
KEY
Trendsetting: Web Design and Beyond
Andy Stratton
 
PDF
Fundamental CSS3
Achmad Solichin
 
PDF
CSS3 - is everything we used to do wrong?
Russ Weakley
 
PDF
Dive into HTML5: SVG and Canvas
Doris Chen
 
PPTX
Css 3
poollar
 
PPTX
Css 3
poollar
 
PDF
CSS3: Ripe and Ready to Respond
Denise Jacobs
 
PDF
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
PDF
CSS
Jussi Pohjolainen
 
PDF
CSS in React - The Good, The Bad, and The Ugly
Joe Seifi
 
PDF
CSS3: Are you experienced?
Denise Jacobs
 
PPTX
CSS3
Chathuranga Jayanath
 
KEY
CSS and CSS3
Robyn Overstreet
 
PDF
SVG For Web Designers (and Developers)
Sara Soueidan
 
PDF
CSS3 Introduction
Jaeni Sahuri
 
PDF
CSS in React
Joe Seifi
 
PPT
Web design-workflow
Peter Kaizer
 
PDF
Sass
Bram Verdyck
 
CSS3 Media Queries
Russ Weakley
 
Simply Responsive CSS3
Denise Jacobs
 
Trendsetting: Web Design and Beyond
Andy Stratton
 
Fundamental CSS3
Achmad Solichin
 
CSS3 - is everything we used to do wrong?
Russ Weakley
 
Dive into HTML5: SVG and Canvas
Doris Chen
 
Css 3
poollar
 
Css 3
poollar
 
CSS3: Ripe and Ready to Respond
Denise Jacobs
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
CSS
Jussi Pohjolainen
 
CSS in React - The Good, The Bad, and The Ugly
Joe Seifi
 
CSS3: Are you experienced?
Denise Jacobs
 
CSS3
Chathuranga Jayanath
 
CSS and CSS3
Robyn Overstreet
 
SVG For Web Designers (and Developers)
Sara Soueidan
 
CSS3 Introduction
Jaeni Sahuri
 
CSS in React
Joe Seifi
 
Web design-workflow
Peter Kaizer
 
Sass
Bram Verdyck
 
Ad

Viewers also liked (20)

PDF
CSS3 Flexbox & Responsive Design
Arash Milani
 
PPT
public speaking presentation UiTM students
omarsyed
 
PDF
The Age of Responsive Design
Denise Jacobs
 
PDF
Banish Your Inner Critic - Web Design Day 2015
Denise Jacobs
 
PPT
Ecce Result Unit 1
Gilmar Mattos
 
PPT
Towards an Agile Design Process
Denise Jacobs
 
PDF
5 Must Haves for Developing Corporate Social Media Strategy
Bob Hazlett
 
PPS
Credit Training Presentation
guest7f7d4
 
PPTX
2012 03-27 developers e-commercedag presentatie4 ogone
Combell NV
 
PDF
Creativity (R)Evolution - Oredev 2013
Denise Jacobs
 
PDF
Infinite Possibilities - Devoxx Belgium, 2014
Denise Jacobs
 
PDF
Banish Your Inner Critic - HOW Interactive Conference, Boston
Denise Jacobs
 
PPT
matter states
matter
 
PPT
How To Get Your Website into the 21st Century
Denise Jacobs
 
PPT
Welcome To Sheldon
guesta4be188
 
PDF
Bored But Never Boring - Media Evolution: The Conference 2013
Denise Jacobs
 
PPT
Time for Change
kjdaniels
 
PDF
On-Demand Inspiration
Denise Jacobs
 
PPTX
Top 10 Tips for using LinkedIn
Michael Fisher
 
PDF
Transmuting Fear - TEDxRheinMain, "Curiosity"
Denise Jacobs
 
CSS3 Flexbox & Responsive Design
Arash Milani
 
public speaking presentation UiTM students
omarsyed
 
The Age of Responsive Design
Denise Jacobs
 
Banish Your Inner Critic - Web Design Day 2015
Denise Jacobs
 
Ecce Result Unit 1
Gilmar Mattos
 
Towards an Agile Design Process
Denise Jacobs
 
5 Must Haves for Developing Corporate Social Media Strategy
Bob Hazlett
 
Credit Training Presentation
guest7f7d4
 
2012 03-27 developers e-commercedag presentatie4 ogone
Combell NV
 
Creativity (R)Evolution - Oredev 2013
Denise Jacobs
 
Infinite Possibilities - Devoxx Belgium, 2014
Denise Jacobs
 
Banish Your Inner Critic - HOW Interactive Conference, Boston
Denise Jacobs
 
matter states
matter
 
How To Get Your Website into the 21st Century
Denise Jacobs
 
Welcome To Sheldon
guesta4be188
 
Bored But Never Boring - Media Evolution: The Conference 2013
Denise Jacobs
 
Time for Change
kjdaniels
 
On-Demand Inspiration
Denise Jacobs
 
Top 10 Tips for using LinkedIn
Michael Fisher
 
Transmuting Fear - TEDxRheinMain, "Curiosity"
Denise Jacobs
 
Ad

Similar to CSS3: Simply Responsive (20)

PDF
Responsive Web Site Design
Jussi Pohjolainen
 
PDF
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
arborwebsolutions
 
PDF
CSS3: Using media queries to improve the web site experience
Zoe Gillenwater
 
PDF
CSS3, Media Queries, and Responsive Design
Zoe Gillenwater
 
PDF
Great Responsive-ability Web Design
Mike Wilcox
 
PDF
Responsive Websites
Joe Seifi
 
PPTX
Chapter 17: Responsive Web Design
Steve Guinan
 
PDF
Media queries
Kevin DeRudder
 
PPTX
FITC - 2012-04-23 - Responsive Web Design
Frédéric Harper
 
PDF
Responsive websites. Toolbox
Wojtek Zając
 
PDF
Responsive Web Design On Student's day
psophy
 
PDF
Responsive design lunch and learn
Ricardo Queiroz
 
PDF
Responsive Design Tools & Resources
Clarissa Peterson
 
PPTX
Mobile Best Practices
mintersam
 
PDF
[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)
Tomomi Imura
 
PDF
Html 5 mobile - nitty gritty
Mario Noble
 
PDF
Webconf 2013 - Media Query 123
Hina Chen
 
PDF
Responsive Web design Zambig
Tribune Media
 
PPT
Responsive Web Design
RZasadzinski
 
PDF
Introduction to Responsive Design v.2
Clarissa Peterson
 
Responsive Web Site Design
Jussi Pohjolainen
 
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
arborwebsolutions
 
CSS3: Using media queries to improve the web site experience
Zoe Gillenwater
 
CSS3, Media Queries, and Responsive Design
Zoe Gillenwater
 
Great Responsive-ability Web Design
Mike Wilcox
 
Responsive Websites
Joe Seifi
 
Chapter 17: Responsive Web Design
Steve Guinan
 
Media queries
Kevin DeRudder
 
FITC - 2012-04-23 - Responsive Web Design
Frédéric Harper
 
Responsive websites. Toolbox
Wojtek Zając
 
Responsive Web Design On Student's day
psophy
 
Responsive design lunch and learn
Ricardo Queiroz
 
Responsive Design Tools & Resources
Clarissa Peterson
 
Mobile Best Practices
mintersam
 
[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)
Tomomi Imura
 
Html 5 mobile - nitty gritty
Mario Noble
 
Webconf 2013 - Media Query 123
Hina Chen
 
Responsive Web design Zambig
Tribune Media
 
Responsive Web Design
RZasadzinski
 
Introduction to Responsive Design v.2
Clarissa Peterson
 

More from Denise Jacobs (20)

PDF
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Denise Jacobs
 
PDF
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Denise Jacobs
 
PDF
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Denise Jacobs
 
PDF
How to Have Difficult Conversations With Confidence - MTP Digital 2020
Denise Jacobs
 
PDF
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202
Denise Jacobs
 
PDF
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Denise Jacobs
 
PDF
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Denise Jacobs
 
PDF
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Denise Jacobs
 
PDF
Banish Your Inner Critic – Stanford HCI Group 2020
Denise Jacobs
 
PDF
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Denise Jacobs
 
PDF
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Denise Jacobs
 
PDF
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Denise Jacobs
 
PDF
Co-Create: Creating Better Together - Clarity Conference 2019
Denise Jacobs
 
PDF
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Denise Jacobs
 
PDF
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Denise Jacobs
 
PDF
Banish Your Inner Critic: Hack Your Productivity and Elevate Performance
Denise Jacobs
 
PDF
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018
Denise Jacobs
 
PDF
The Creativity (R)Evolution – CMX Summit 2018
Denise Jacobs
 
PDF
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Denise Jacobs
 
PDF
Co-Create: Creating Better Together - DevCamp Brazil 2018
Denise Jacobs
 
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Denise Jacobs
 
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Denise Jacobs
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Denise Jacobs
 
How to Have Difficult Conversations With Confidence - MTP Digital 2020
Denise Jacobs
 
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202
Denise Jacobs
 
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Denise Jacobs
 
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Denise Jacobs
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Denise Jacobs
 
Banish Your Inner Critic – Stanford HCI Group 2020
Denise Jacobs
 
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Denise Jacobs
 
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Denise Jacobs
 
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Denise Jacobs
 
Co-Create: Creating Better Together - Clarity Conference 2019
Denise Jacobs
 
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Denise Jacobs
 
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Denise Jacobs
 
Banish Your Inner Critic: Hack Your Productivity and Elevate Performance
Denise Jacobs
 
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018
Denise Jacobs
 
The Creativity (R)Evolution – CMX Summit 2018
Denise Jacobs
 
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Denise Jacobs
 
Co-Create: Creating Better Together - DevCamp Brazil 2018
Denise Jacobs
 

Recently uploaded (20)

PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PDF
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PPTX
Programs and apps: productivity, graphics, security and other tools
4mqw9zch22
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PPTX
Spectroscopy.pptx food analysis technology
nawahassan45
 
PDF
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
Approach and Philosophy of On baking technology
30anthuong17
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
Programs and apps: productivity, graphics, security and other tools
4mqw9zch22
 
Teaching material agriculture food technology
LiaRayya
 
Spectroscopy.pptx food analysis technology
nawahassan45
 
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 

CSS3: Simply Responsive

  • 1. Simply Responsive CSS3 Denise R. Jacobs // 1 Rich Web Experience 2011// 30 November 2011 //
  • 2. Simple & Responsive Tweets Who I am: @denisejacobs This fine event: @nofluff #rwx2011 I’m talking about: #css3sr 2
  • 3. A little about me Denise R. Jacobs is an author, speaker, design thinker, and educator. She is the author of The CSS Detective Guide, and is a co-author for InterAct with Web Standards: A Holistic Approach to Web Design. She is a Consultant Web Design Trainer and Creativity Evangelist based in Miami, Florida. 3 CSSDetectiveGuide.com & InterActWithWebStandards.com
  • 8. Start here… 1. Get Responsive • Shift your brain • Mobile first • Watch out • 3 components • Flexible grid • Flexible images • Media queries 8
  • 9. …Continue here 1. Get Responsive (cont’d) • 4 Steps • Plan your design • Crunch the numbers • Determine the breaking points • Add media queries 9
  • 10. …And end here! 2. Know Your CSS3 • Getting started • What’s new • Rules of the road • Helping tools and scripts • Properties • Standard effects • Advanced effects • Selectors 10 3. Resources
  • 11. Get Responsive 11 http://mediaqueri.es/
  • 12. Responsive Devices? 12 http://www.flickr.com/photos/ivyfield/4486938457/
  • 13. Responsive Devices! 13 http://www.flickr.com/photos/ivyfield/4486938457/
  • 16. Avoid this desktop stylesheet + media queries = mobile site 16
  • 17. =“Switchy” layout 17 http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
  • 18. Instead this mobile stylesheet + media queries = desktop site 18
  • 19. = Truly responsive 19 http://ri.gov
  • 23. Flexible & Fluid • Size everything in ems or percentages • Flexible: Ems for everything • Fluid: Percentages for width, ems for height 23
  • 24. Various grids • http://delicious.com/denisejacobs/grid 24
  • 26. Flexible Images: Foreground img {width: 100%; max-width: 100%;} 26
  • 27. Responsive foreground images 27 https://github.com/filamentgroup/Responsive-Images
  • 28. Flexible Images: Background Use background-position to selectively crop your backgrounds 28
  • 30. @media queries @media queries are now being used as a basis for responsive web design: web interfaces that change with the size (and orientation) of the device. 30
  • 31. How do they work? Through media queries, the browser is served different styles or stylesheets based on the dimensions and the device. The @media construct allows style sheet rules for various media in the same style sheet. An @media rule specifies the target media types (separated by commas) of a set of statements (delimited by curly braces). 31
  • 32. Simple @media rule examples @media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } } 32
  • 33. @media queries Example: /* Smartphones (portrait and landscape) - ---------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } 33
  • 34. @media queries: Browser compatibility Yep Nope • IE 9 • IE 8, 7, 6 • Opera 9.5+ • Safari 2 • Opera Mobile • Firefox 1, 2 • Safari 3+ • Firefox 3.5+ • Chrome 34
  • 35. Css3-mediaqueries.js http://code.google.com/p/css3-mediaqueries-js/ 35
  • 37. Resources: @media queries • http://www.delicious.com/denisejacobs/ media-queries 37
  • 39. 1) Plan the design(s) 39 http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
  • 40. Plan the design(s) • Need to plan out 3-4 iterations of a page design for each resolution/device instead of just one 40
  • 42. Calculate • You need to know dimensions of page elements to be able to calculate proportional relationship of size and margins • The Golden Formula: target ÷ context = result 42
  • 43. Target, context, and results 43
  • 44. 3) Determine the breaking points 44 http://www.slideshare.net/yiibu/pragmatic-responsive-design
  • 45. Some standard sizes to shoot for • 320 px: smart phones in portrait mode • 480 px: smart phones in landscape mode • 600 px: smaller tablets like the Kindle (600 x 800) or Nook (600 x 1024) • 768 px: tablet in portrait • 1024 px: tablet in landscape and netbooks • 1200 px: low end for widescreen displays • 1600 px: widescreen displays 45
  • 46. 4) Add media queries 46
  • 47. Hardboiled’s @media queries: Smartphone /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } 47 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
  • 48. Hardboiled’s @media queries: iPad /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } 48 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
  • 49. Hardboiled’s @media queries: Other /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 49 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
  • 50. 5) Test & Tweak 50
  • 51. Testing, testing, 1-2-3 • Get the design to code and prototype as soon as possible • Test breaking points • Make adjustments 51
  • 53. What’s New in CSS3 53
  • 54. What’s New in CSS3? CSS3 is the third generation of the CSS specification recommendations from the W3C. In CSS3 there are new selectors, pseudo- elements and classes, properties, and values specifically created to answer the needs and solve the problems of modern web design and development. 54
  • 55. CSS3 Modularity CSS3 has been broken up into different unique modules. This means is that, for example, the particular CSS properties and values for layout is grouped into one specific module. 55
  • 56. CSS3 Modularity: Benefits • Browser producers can now implement CSS3 module by module • Speeds up the browser implementation process • Encourages innovation 56
  • 57. The CSS3 Modules • Template Layout • Values and Units • Backgrounds and Borders • Web Fonts • Ruby • Behavioral Extensions to CSS • Basic User Interface • Line Layout • Basic Box Model • Flexible Box Layout • Grid Positioning • Image Values • Speech • 2D Transformations • Marquee • Multi-column Layout • Style Attribute Syntax • 3D Transformations • Cascading and Inheritance • Namespaces • Color • Transitions • Fonts • Animations • Text • View Module • Generated Content for Paged • Media Queries Media • Paged Media • Generated and Replaced • Selectors Content 57
  • 58. Resources: New in CSS3 http://www.w3.org/TR/tr-groups-all# tr_Cascading_Style_Sheets__CSS__ Working_Group 58
  • 59. Colors in CSS3: RGB • Regular RGB rgb(x, x, x): ex. rgb(255, 0, 0) • RBG with alpha-opacity rgba(x, x, x, y): An RGB value ex. rgba(255, 0, 0, 0.2) 59
  • 60. RGBA Color Alpha opacity: 0.0 = 0% = no opacity 1.0 = 100% = full opacity 60
  • 61. Colors in CSS3: HSL HSL stands for hue, saturation, and luminosity (lightness) • Regular HSL hsl(x%, x%, x%): ex. hsl(0, 100%, 50%) • HSL with alpha-opacity hsla(x%, x%, x%, y): ex. hsla(0, 100%, 50%, 0.5) 61
  • 62. HSL Color Wheel 0º – Red 60º – Yellow 120º – Green 180º – Cyan 240º – Blue 300º – Magenta 62
  • 63. HSL Color Picker Tool http://www.workwithcolor.com/hsl-color-picker-01.htm 63
  • 64. Getting Started with CSS3: The Rules of the Road 64 http://www.flickr.com/photos/ilike/3707503212/
  • 65. CSS3 Browser Compatibility 65 http://www.flickr.com/photos/sfllaw/222795669/
  • 66. The Scoop • Many properties are browser-specific, requiring vendor prefixes • Plus there is a standard property • There are syntax differences between browser-specific properties and the standard property • All of this causes an increase in the amount of CSS 66
  • 67. Code bloat in action Ideally: Reality: a.polaroid:active { a.polaroid:active { z-index: 999; z-index: 999; border-color: #6A6A6A; border-color: #6A6A6A; box-shadow: 15px 15px 20px -webkit-box-shadow: 15px rgba(0,0, 0, 0.4); 15px 20px rgba(0,0, 0, transform: rotate(0deg) 0.4); scale(1.05); -moz-box-shadow: 15px 15px } 20px rgba(0,0, 0, 0.4); box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.05); -moz-transform: rotate(0deg) scale(1.05); transform: rotate(0deg) scale(1.05); } 67
  • 69. None of the older IEs support CSS3 …as in “not any.” 6 7 8 69 http://www.flickr.com/photos/johnsnape/4258191545/
  • 70. IE9 now supports CSS3 …But still not as fully as the other browsers yet. 70
  • 71. Resources: IE9 CSS3 support http://msdn.microsoft.com/en- us/ie/ff468705.aspx#_Web_standards_sup port http://msdn.microsoft.com/en- us/library/cc351024%28v=vs.85%29.aspx http://www.impressivewebs.com/css3- support-ie9/ 71
  • 72. Tools you’ll need: 1. CSS3 Property browser support charts 2. CSS3 Selector browser support charts 3. CSS3 Specifications 4. All browsers to test in and/or cross-browser testers 72
  • 73. CSS3 Property browser support charts http://www.findmebyip.com/ litmus 73
  • 74. CSS3 Selector browser support charts http://www.standardista.com/css3/ css3-selector-browser-support 74
  • 75. The CSS3 Specifications The CSS3 Specifications are THE resource for finding out exactly is the intented behavior and use of any given property. http://www.w3.org/standards/techs/ css#w3c_all 75
  • 76. Cross-browser testers http://tredosoft.com/Multiple_IE http://crossbrowsertesting.com/ (paid) http://browsershots.org/ (free) 76
  • 77. CSS3 & Cross- browser Coding 77 http://www.flickr.com/photos/scfiasco/4490322916/
  • 78. The Goal: Code that works in all most browsers 78
  • 79. Not all browsers are created equal 79
  • 80. How can we achieve compatibility? 80 http://www.flickr.com/photos/barretthall/205175534/
  • 81. Steps to get as close as possible 1. Leverage source order 2. Filter it 3. Let tools do all of the work 81
  • 82. Leverage source order • Place default properties first • Place browser-specific properties ahead of standard properties • The standard properties will override the vendor’s when the standard is established. 82
  • 83. A Proper Stack .gradient { color: #fff; 83
  • 84. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ 84
  • 85. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ 85
  • 86. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ 86
  • 87. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */ 87
  • 88. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */ filter: progid:DXImageTransform.Microsoft.gradient(star tColorStr='#07407c', EndColorStr='#aaaaaa'); } /* filter for IE7 and lower */ 88
  • 89. Apply a Filter • If you must have the effect in IE lt 8, such as alpha opacity, gradient, shadow, transitions etc. you could use a proprietary IE filter. • The -ms-filter attribute is an extension to CSS. This syntax will allow other CSS parsers to skip the value of this unknown property completely and safely. It also avoids future name clashes with other CSS parsers. • In IE 8 mode, filters must be prefixed with "-ms-" and the PROGID must be in single or double quotes to make sure IE 8 renders the filters properly. 89
  • 90. Filters: {Caveat Coder} • IE filters work, but are essentially hacks – IE filters are proprietary and thus not part of any standard specification, and never will be 90
  • 91. Resources: IE Filters Microsoft Visual Filters and Transitions Reference http://msdn.microsoft.com/en-us/library/ ms532853%28v=VS.85%29.aspx 91
  • 92. Let the tools do the work • We’ll talk about those next! 92
  • 93. CSS3 Tools 93 http://www.flickr.com/photos/johnsnape/4258191545/
  • 94. Useful CSS3 Tools 1. CSS3 Generators 2. Helper Scripts 3. Browser Feature Detection 4. Templates 94
  • 95. CSS3 Generators 95 http://www.flickr.com/photos/latca/841730130/
  • 99. CSS3 Tools at WestCiv 99 http://westciv.com/tools/
  • 100. More CSS3 Generators http://border-radius.com http://www.colorzilla.com/ gradient-editor/ http://csscorners.com http://border-image.com 100
  • 101. Helper Scripts 101 http://www.flickr.com/photos/keystricken/386106987/
  • 102. Get a helping hand… These scripts help IE lt 8 behave like CSS3- compliant browsers. However, support of CSS3 properties varies between scripts. 102
  • 103. ie-7.js (includes IE8 and IE9) 103 http://code.google.com/p/ie7-js/
  • 105. CSS Sandpaper 105 http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
  • 106. Browser Feature Detection 106 http://www.flickr.com/photos/johnsnape/4258191545/
  • 108. What does Modernizr do? Modernizr detects which CSS3 (and HTML5) properties are supported by the browser, and appends classes to the <html> tag, which then allows you to create styles to target specific properties to individual browsers. It is a premier progressive enhancement tool! 108
  • 109. How to use Modernizr http://www.alistapart.com/articles/taking- advantage-of-html5-and-css3-with- modernizr/ http://webdesignernotebook.com/css/ how-to-use-modernizr http://www.ericlightbody.com/2010/ modernizr-your-tool-for-html5-and-css3- functionality/ 109
  • 110. Templates 110 http://www.flickr.com/photos/jazzmasterson/275796175/
  • 111. HTML5Boilerplate.com Paul Irish’s HTML5 template file http://html5boilerplate.com/ 111
  • 114. @font-face 114 http://lostworldsfairs.com/moon/
  • 115. @font-face • Note: – Actually part of the CSS2.1 specification. – Therefore, the IEs do support it! • Tips & issues – When you decide to use a font as a webfont, you have to be sure that the EULA supports it. – One way to avoid that is to use ONLY fonts that are listed as approved webfonts. • Browser Support – IE lt 8 require fonts to be in EOT format – IE9 now supports WOFF 115
  • 116. @font-face bug: IE lt 8 @font-face super bullet-proofing The problem: @font-face doesn’t work, even with the proper normal syntax. What gives? 116
  • 117. @font-face bug: Webkit @font-face bold and italics “bug” The problem: Applying font-weight:bold or font- style: italic to @font-face'd text doesn’t work. 117
  • 118. Solution: IE proof @font-face + faux variations Example: @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix‘) format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont- webfont.ttf')format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); font-weight:normal; font-style:normal; font-variant:normal; } 118
  • 119. FontSquirrel.com 119 http://www.fontsquirrel.com/fontface/generator
  • 120. Webfont Services Instead of generating the webfonts yourself, you can pay a service where the webfonts are hosted elsewhere, and you link to them and use the fonts on their server. 120
  • 121. Webfont Services 121 http://www.typekit.com
  • 122. Webfont Services http://www.typotheque http://www.webtype.com .com/webfonts http://www.fontslive.com http://typekit.com http://www.extensis.com/en http://fontdeck.com /WebINK/ http://kernest.com http://webfonts.fonts.com http://www.ascenderfonts http://webfonts.info/wiki/in .com/webfonts/ dex.php?title=Category:W ebfont_Services 122
  • 123. Google Font Directory http://code.google.com/webfonts 123
  • 124. Resources: @font-face • http://www.delicious.com/denisejacobs/ font-face 124
  • 125. New Visual Effects in CSS3 125
  • 126. New Visual Effects in CSS3 • border-radius • rgba color • box-shadow • text-shadow • gradient 126
  • 127. border-radius 127 http://oh-hai.biz
  • 129. border-radius • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does 129
  • 130. border-radius Syntax comparison breakdown: • -moz allows multiple values for each position • -webkit individual values 130 • Standard is like mozilla
  • 131. border-radius #contentcolumn { -moz-border-radius: 20px 20px 0 0; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; border-radius: 20px 20px 0 0; } 131
  • 133. border-radius Resources http://www.delicious.com/denisejacobs/ border-radius 133
  • 134. rgba 134 http://aarronwalter.com/designer/
  • 135. rgba • Tips & issues – More granular control of the color opacity of a particular element • Browser Support – IE lt 8 does not support, IE9 does – There is an IE filter that will give transparency with a color. 135
  • 136. Cross-browser: rgba • Place after regular rgb color property to override in modern browsers; older browsers will ignore it • IE lt 8 bug: use the property background instead of background-color for the regular color 136
  • 137. Full solution: rgba .rgba { background-color: #ff0000; /* fallback color in hexidecimal. */ background-color: transparent; /* transparent is key for the filter to work in IE8. best done through conditional comments */ background-color: rgba(255, 0, 0, 0.3); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr=#4CFF0000, endColorstr=#4CFF0000)"; /* filter for IE8 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#4CFF0000, endColorstr=#4CFF0000); /* filter for older IEs */ } 137
  • 138. box-shadow 138 http://badassideas.com/work/
  • 139. box-shadow • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does – There is a filter for IE: shadow (actually there are 2: shadow and dropshadow, but shadow is said to be better) 139
  • 140. box-shadow .portfolio { -moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6); box-shadow: 0 5px 20px rgba(0,0,0,0.6); } 140
  • 141. Full solution: box-shadow .boxshadow { -moz-box-shadow: 3px 3px 10px #333; -webkit-box-shadow: 3px 3px 10px #333; box-shadow: 3px 3px 10px #333; /*standard*/ -ms-filter: "progid:DXImageTransform.Microsoft.Shad ow(Strength=4, Direction=135, Color='#333333')"; /* For IE 8 */ filter: progid:DXImageTransform.Microsoft.Shado w(Strength=4, Direction=135, Color='#333333'); /* For IE 5.5 - 7 */ } 141
  • 142. Inspiration: box-shadow 142 http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  • 143. Resources: box-shadow http://www.delicious.com/denisejacobs/ box-shadow 143
  • 144. text-shadow 144 http://www.bountybev.com
  • 145. text-shadow • Tips & issues – Can help accentuate text and improve readability and visual importance • Browser Support – IE lt 8 does not support, nor does IE9 :/ – could use the IE filter: shadow 145
  • 146. Full solution: text-shadow .textshadow h2 { text-shadow:1px 1px 2px rgba(48,80,82,0.8); -ms-filter: "progid:DXImageTransform.Microsoft.Shad ow(Strength=2, Direction=135, Color='#305052')"; /* For IE 8+ */ filter: progid:DXImageTransform.Microsoft.Shado w(Strength=2, Direction=135, Color='#305052'); /* For IE 5.5 - 7 */ } 146
  • 147. Inspiration: text shadow 147 http://www.midwinter-dg.com/blog_demos/css-text-shadows/
  • 148. Inspiration: text shadow 148 http://desandro.com/articles/the-new-lens-flare/
  • 149. Resources: text-shadow http://www.delicious.com/denisejacobs/ text-shadow 149
  • 150. gradient 150 http://raymondjay.com/
  • 151. Old skool: Gradient background 151
  • 152. gradient • Tips & issues – Very different syntax for mozilla and webkit browsers previously – Newer syntax for current and future browsers • Browser Support – IE does not support, so will still need a fallback image for those browsers 152
  • 153. gradient #mainnav li a { background-color: #f7f6f4; background-image: url(bg_navitems.gif); background-image: -moz-linear-gradient(100% 100% 90deg, #ccc9ba, #ffffff); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ccc9ba)); } 153
  • 154. gradient: Full solution .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*background color matches one of the stop colors. The gradient_slice.jpg is 1px wide */ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr='#07407c', EndColorStr='#aaaaaa')"; /* IE8+ */ filter: progid:DXImageTransform.Microsoft.gradient(star tColorStr='#07407c', EndColorStr='#aaaaaa'); /* IE7- */ } 154
  • 155. Colorzilla gradient tool 155 http://www.colorzilla.com/gradient-editor/
  • 156. Inspiration: gradients 156 http://leaverou.me/css3patterns/
  • 157. Inspiration: gradients http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/ 157
  • 158. Tools: gradient http://www.colorzilla.com/gradient-editor/ http://www.westciv.com/tools/gradients/ http://css3please.com http://css3generator.com 158
  • 159. Resources: gradient http://www.delicious.com/denisejacobs/ gradient 159
  • 160. Advanced Visual Effects in CSS3 160
  • 161. CSS3 for Advanced Visual Presentation 1. border-image 2. multiple background images 3. background-size 4. multiple text columns 161
  • 162. border-image 162 http://www.spoongraphics.com/blog/
  • 163. border-image Borders can now be created using images and sections thereof for enhanced visual design. • Tips & issues – Documentation on best use is sparse – No adequate fall-back techniques for graceful degradation – Vendor prefixes for Mozilla and webkit • Browser support 163 – The IEs do not support
  • 164. border-image div.note div.border { -moz-border-image: url(/https/www.slideshare.net/playground/awesome-overlays/border- image.png) 5 5 5 5 stretch; -webkit-border-image: url(/https/www.slideshare.net/playground/awesome-overlays/border- image.png) 5 5 5 5 stretch; border-image: url(/https/www.slideshare.net/playground/awesome- overlays/border-image.png) 5 5 5 5 stretch; } 164
  • 166. Resources: border-image http://www.delicious.com/denisejacobs/ border-image 166
  • 167. Multiple backgrounds 167 http://www.lostworldsfairs.com
  • 168. Multiple backgrounds • Tips & issues: – The backgrounds are shown according to the order listed, with the first background image listed is the one “on top” and the rest stack underneath it. – Can use CSS3 gradients (which are like background images) in conjunction with multiple background images. • Browser support: – IE lt 8 does not support, but IE9 does 168
  • 169. Multiple backgrounds body { background-color: #5ABBCF; background: #5ABBCF url(../images/bokeh1.png) no- repeat; /* fallback image */ background: url(../images/bokeh4.png) no-repeat, url(../images/bokeh3.png) no-repeat 10% 0, url(../images/bokeh2.png) no-repeat 20% 0, url(../images/bokeh1.png) no-repeat, url(../images/glow.png) no-repeat 90% 0, -moz-linear-gradient(0% 90% 90deg,#5ABBCF, #95E0EF); background: url(../images/bokeh4.png) no-repeat, url(../images/bokeh3.png) no-repeat 10% 0, url(../images/bokeh2.png) no-repeat 20% 0, url(../images/bokeh1.png) no-repeat, url(../images/glow.png) no-repeat 90% 0, -webkit-gradient(linear, 0% 0%, 0% 90%, from(#95E0EF), to(#5ABBCF)); } 169
  • 170. Resources: multiple backgrounds http://www.delicious.com/denisejacobs/ multiplebackgrounds 170
  • 171. background-size 171 http://www.alistapart.com/articles/supersize-that-background-please/
  • 172. background-size You can set the size of a background image and make sure it covers the entire background of a page, no matter what the size. • Tips & Issues: – Vendor prefixes for mozilla, webkit, and opera • Browser support: – IE lt 8 does not support, but IE9 does 172
  • 173. background-size Example: body { background: #000 url(myBackground_1280x960.jpg) center center fixed no-repeat; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } 173
  • 175. Resources: background-size • http://www.delicious.com/denisejacobs/ backgroundsize • http://www.alistapart.com/articles/ supersize-that-background-please/ • http://www.w3.org/TR/css3- background/#the-background-size 175
  • 176. Multiple text columns 176 http://www.yaili.com
  • 177. Multiple text columns You can have one div containing a number of paragraphs which can be displayed in columns, with no float or height manipulations. • Tips & Issues: – Some of the properties are not widely supported, and many of the related (like dividers, breakers, etc.) haven’t been implemented or aren’t supported yet either. 177
  • 178. Multiple text columns Example: div.three-col { -webkit-column-count: 3; -webkit-column-gap: 15px; -moz-column-count: 3; -moz-column-gap: 15px; column-count: 3; column-gap: 15px; } 178
  • 179. Resources: multiple columns http://www.delicious.com/denisejacobs/ multiplecolumns 179
  • 180. 2d Transformations with CSS3 180
  • 181. transform (2d) 181 http://www.zurb.com/playground/css3-polaroids/
  • 182. transform • Tips & issues – Mozilla, Webkit, and Opera vendor prefixes; no standard yet. • Browser Support – IE lt 8 does not support, but IE9 does 182
  • 183. 2D Transformations Different kinds of transforms: • rotate • scale • skew • translate • matrix 183
  • 184. transform/rotate: full solution .rotate { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizing Method='auto expand', M11=0.9961946980917455, M12=0.08715574274765817, M21=- 0.08715574274765817, M22=0.9961946980917455); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0 .9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand')"; zoom: 1; } 184
  • 185. transform: multiple You can apply multiple transform properties to one element. Example: .enlargen:hover { -webkit-transform: translate(-50%, -50%) scale(2) rotate(0); -moz-transform: translate(-50%, -50%) scale(2) rotate(0); -o-transform: translate(-50%, -50%) scale(2) rotate(0); transform: translate(-50%, -50%) scale(2) rotate(0); } 185
  • 186. Resources: 2D transforms http://www.delicious.com/denisejacobs/ transform 186
  • 187. Animation with CSS3 187
  • 188. Animation 1. transitions 2. animation (the webkits only) A Tip: Be subtle – it’s more effective 188
  • 190. transition 190 http://timvandamme.com/
  • 191. transition You can create subtle transitions between hover states on elements. The transitions smooth out visual jumps. • Tips & issues – Be sure to put the transition effect on the correct element 191
  • 192. transition Example: #id_of_element { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } 192
  • 193. Animation 193 http://www.css3exp.com/moon/
  • 194. Animation You can create subtle animations in the browser! • Tips & issues: – Plan out the animation sequence ahead of time – Be aware of style order in the CSS 194
  • 195. Animation div { animation-name: diagonal-slide; animation-duration: 5s; animation-iteration-count: 10; } @keyframes diagonal-slide { from { left: 0; top: 0; } to { left: 100px; top: 100px; } } 195
  • 196. Resources: Animation http://www.delicious.com/denisejacobs/ animation 196
  • 197. CSS3 Selectors 197 http://www.flickr.com/photos/jamiecampbell/446301597/
  • 198. Getting Advanced Advanced selectors are a good way to specifically target styles for modern browsers. The right selector will help you achieve targeting nirvana, so it’s important to know which selectors you can use now. 198
  • 199. CSS3 Selectors Advanced selectors give us the power to target elements that are not part of the document tree and/or those that are generated dynamically. • Tips & issues – There are a lot of options to choose from! – Great to use for progressive enhancement – Need to be aware of changes to specificity 199
  • 200. CSS3 Selector Specification • General sibling • Pseudo-classes E~F – Target • :target • Attribute substrings – a[attribute^="value"] – Negation – a[attribute$="value"] • :not(s) – a[attribute*="value"] – State • Pseudo-elements • :enabled no new ones, all pseudo- • :disabled elements in CSS3 indicated with :: • :checked • :indeterminate 200
  • 201. CSS3 Selectors – Structural • :nth-child(n) • :nth-last-child(n) • :nth-of-type(n) • :nth-last-of-type(n) • :last-child • :first-of-type • :last-of-type • :only-child • :only-of-type • :empty • :root 201
  • 202. Uses for advanced selectors • Great for progressive enhancement • Styling first, last or x-number of elements 202
  • 203. Old skool: zebra striping 203
  • 204. With structural pseudo-elements The keywords odd and even can be used to match child elements whose index is odd or even. The index of an element’s first child is 1, so this rule will match any p element that is the first, third, fifth, and so on, child of its parent element. An argument, can is placed within the parentheses, as a number, a keyword, or a formula. A formula an + b can be used to create more complex repeating patterns. In the formula, a represents a cycle size, n is a counter starting at 0, and b represents an offset value. All values are integers. 204
  • 205. Nth child selector tester http://leaverou.me/demos/nth.html 205
  • 206. CSS3 Selector Support http://www.findmebyip.com/litmus 206
  • 207. Tools: CSS3 Selectors • http://www.quirksmode.org/ compatibility.html • http://www.evotech.net/blog/2009/02/css -browser-support/ • http://www.findmebyip.com/litmus 207
  • 208. CSS3 Selector Helper Script http://www.selectivizr.com 208
  • 209. Resources: CSS3 Selectors • http://www.delicious.com/denisejacobs/se lectors+css3 • http://inspectelement.com/tutorials/a- look-at-some-of-the-new-selectors- introduced-in-css3/ • http://24ways.org/2009/cleaner-code- with-css3-selectors 209
  • 210. Tools: CSS3 Selectors • http://www.quirksmode.org/ compatibility.html • http://www.findmebyip.com/litmus 210
  • 211. Resources: CSS3 Selectors • http://www.delicious.com/denisejacobs/ selectors+css3 • http://inspectelement.com/tutorials/a- look-at-some-of-the-new-selectors- introduced-in-css3/ • http://24ways.org/2009/ cleaner-code-with-css3-selectors 211
  • 216. This is just the beginning! My Delicious links are HUGE compendia of all things related to CSS3, updated as I find new articles, resources and tools! http://delicious.com/denisejacobs/css3 http://delicious.com/denisejacobs/ css3training 216
  • 218. On Netmagzine.com http://www.netmagazine.com/features/ http://www.netmagazine.com/features/ top-10-css3-techniques 21-top-tools-responsive-web-design 218
  • 219. A library of resources 219 http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Library_1900.jpg
  • 220. CSS3, hot off the presses! The Book of CSS3 220 by Peter Gasston
  • 221. Project-based CSS3 Stunning CSS3 221 by Zoe Mikely Gillenwater
  • 222. CSS3 Condensed and Explained CSS3 For Web Designers 222 by Dan Cederholm
  • 223. The book on Responsive Web Design Responsive Web Design by Ethan Marcotte 223
  • 224. CSS3 and Media Queries Hardboiled Web Design 224 by Andy Clarke
  • 225. Flexible Layouts Flexible Web Design 225 by Zoe Mickley Gillenwater
  • 226. Proactive coding & graceful degradation CssDetectiveGuide.com 226
  • 227. Holistic Web Design Interact with Web Standards: A Holistic Approach to Web Design 227
  • 228. Where to find me: DeniseJacobs.com [email protected] twitter.com/denisejacobs slideshare.net/denisejacobs 228