HTML5 and CSS3 Responsive Web Design Cookbook

Cover......Page 1
Copyright......Page 3
Credits......Page 4
About the Author......Page 5
About the Reviewers......Page 6
www.PacktPub.com......Page 8
Table of Contents......Page 10
Preface......Page 14
Introduction......Page 18
Resizing an image using percent width......Page 19
Responsive images using the cookie and JavaScript......Page 21
Making your video respond to your screen width......Page 23
Resizing an image using media queries......Page 26
Changing your navigation with media query......Page 27
Making a responsive padding based on size......Page 32
Making a CSS3 button glow for a loading element......Page 34
Introduction......Page 40
Creating fluid, responsive typography......Page 41
Making a text shadow with canvas......Page 42
Making an inner and outer shadow with canvas......Page 44
Rotating your text with canvas......Page 46
Rotating your text with CSS3......Page 47
Making 3D text with CSS3......Page 49
Adding texture to your text with text-masking......Page 51
Styling alternating rows with the nth positional pseudo class......Page 52
Adding characters before and after with pseudo elements......Page 54
Making a button with a relative font size......Page 55
Adding a shadow to your font......Page 57
Curving a corner with border radius......Page 59
Responsive layout with the min-width and max-width properties......Page 62
Controlling your layout with relative padding......Page 65
Adding a media query to your CSS......Page 68
Creating a responsive width layout with media query......Page 72
Changing image sizes with the media query......Page 77
Hiding an element with the media query......Page 79
Making a smoothly transitioning responsive layout......Page 81
Introduction......Page 92
Using the Fluid 960 grid layout......Page 93
Using the Blueprint grid layout......Page 97
Fluid layout using the rule of thirds......Page 101
Trying Gumby, a responsive 960 grid......Page 106
The Bootstrap framework makes responsive layouts easy......Page 112
Introduction......Page 118
Using the Safari Developer Tools\' User Agent switcher......Page 119
Masking your user agent in Chrome with a plugin......Page 122
Using browser resizing plugins......Page 125
Learning the viewport and its options......Page 126
 Adding tags for jQuery Mobile......Page 129
Adding a second page in jQuery Mobile......Page 132
Making a list element in jQuery Mobile......Page 135
Adding a mobile native-looking button with jQuery Mobile......Page 142
Adding a mobile stylesheet for mobile browsers only using the media query......Page 148
Adding a JavaScript for mobile browsers only......Page 150
Introduction......Page 152
Responsive testing using IE\'s Developer Tools......Page 153
Browser testing – using plugins......Page 156
Development environments – getting a free IDE......Page 162
Virtualization – downloading VirtualBox......Page 165
Getting a browser resizer for Chrome......Page 169
Writing \"Hello World\" unobtrusively......Page 174
Creating a glowing submit button with the event listener......Page 178
Making a button stand out when you hover over it......Page 182
Resizing an element with unobtrusive jQuery......Page 186
Masking a password with unobtrusive JavaScript......Page 190
Using an event listener to animate an image shadow......Page 192
Index......Page 198