HTML5 and CSS3 Responsive Web Design Cookbook -- Table of Contents -- HTML5 and CSS3 Responsive Web Design Cookbook -- Credits -- About the Author -- About the Reviewers -- www.PacktPub.com -- Support files, eBooks, discount offers and more -- Why Subscribe? -- Free Access for Packt account holders -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Reader feedback -- Customer support -- Downloading the example code -- Errata -- Piracy -- Questions -- 1. Responsive Elements and Media -- Introduction -- Resizing an image using percent width -- Getting ready -- How to do it… -- How it works… -- See also -- Responsive images using the cookie and JavaScript -- Getting ready -- How to do it… -- How it works… -- Making your video respond to your screen width -- Getting ready -- How to do it… -- How it works… -- Resizing an image using media queries -- Getting ready -- How to do it… -- How it works... -- Changing your navigation with media queries -- Getting ready -- How to do it… -- How it works… -- Making a responsive padding based on size -- Getting ready -- How to do it… -- How it works… -- Making a CSS3 button glow for a loading element -- Getting ready -- How to do it… -- How it works… -- 2. Responsive Typography -- Introduction -- Creating fluid, responsive typography -- Getting ready -- How to do it... -- How it works... -- See also -- Making a text shadow with canvas -- Getting ready -- How to do it... -- How it works… -- See also -- Making an inner and outer shadow with canvas -- Getting ready -- How to do it… -- How it works… -- Rotating your text with canvas -- Getting ready -- How to do it… -- How it works… -- See also -- Rotating your text with CSS3 -- Getting ready -- How to do it… -- How it works… -- See also -- Making 3D text with CSS3 -- Getting ready -- How to do it….

How it works… -- Adding texture to your text with text masking -- Getting ready -- How to do it… -- How it works… -- Styling alternating rows with the nth positional pseudo class -- Getting ready -- How to do it… -- How it works… -- Adding characters before and after pseudo elements -- Getting ready -- How to do it… -- How it works… -- Making a button with a relative font size -- Getting ready -- How to do it… -- How it works… -- Adding a shadow to your font -- Getting ready -- How to do it… -- How it works... -- Curving a corner with border radius -- Getting ready -- How to do it… -- How it works… -- 3. Responsive Layout -- Introduction -- Responsive layout with the min-width and max-width properties -- Getting ready -- How to do it… -- How it works… -- Controlling your layout with relative padding -- Getting ready -- How to do it… -- How it works… -- Adding a media query to your CSS -- Getting ready -- How to do it… -- How it works… -- Creating a responsive width layout with media queries -- Getting ready -- How to do it… -- How it works… -- Changing image sizes with media queries -- Getting ready -- How to do it… -- How it works… -- Hiding an element with media queries -- Getting ready -- How to do it… -- How it works… -- Making a smoothly transitioning responsive layout -- Getting ready -- How to do it... -- How it works... -- There's more... -- 4. Using Responsive Frameworks -- Introduction -- Using the Fluid 960 grid layout -- Getting ready -- How to do it... -- How it works... -- Using the Blueprint grid layout -- Getting ready -- How to do it.... -- How it works... -- Fluid layout using the rule of thirds -- Getting ready -- How to do it… -- How it works... -- There's more... -- Trying Gumby, a responsive 960 grid -- Getting ready -- How to do it… -- How it works... -- The Bootstrap framework makes responsive layouts easy -- Getting ready.

How it works... -- There's more... -- 5. Making Mobile-first Web Applications -- Introduction -- Using the Safari Developer Tools' User Agent switcher -- Getting ready -- How to do it… -- How it works... -- Masking your user agent in Chrome with a plugin -- Getting ready -- How to do it... -- How it works... -- There's more... -- Using browser resizing plugins -- Getting ready -- How to do it... -- How it works... -- Learning the viewport and its options -- Getting ready -- How to do it… -- How it works... -- Adding tags for jQuery Mobile -- Getting ready -- How to do it... -- How it works... -- Adding a second page in jQuery Mobile -- Getting ready -- How to do it... -- How it works... -- Making a list element in jQuery Mobile -- Getting ready -- How to do it... -- How it works... -- Adding a mobile, native-looking button with jQuery Mobile -- Getting ready -- How to do it... -- How it works... -- Adding a mobile stylesheet for mobile browsers only using the media query -- Getting ready -- How to do it... -- How it works... -- Adding JavaScript for mobile browsers only -- Getting ready -- How to do it... -- How it works... -- 6. Optimizing Responsive Content -- Introduction -- Responsive testing using IE's Developer Tools -- Getting ready -- How to do it... -- How it works... -- There's more... -- Browser testing - using plugins -- Getting ready -- How to do it... -- Development environments - getting a free IDE -- Getting ready -- How to do it… -- How it works... -- Virtualization - downloading VirtualBox -- Getting ready -- How to do it... -- How it works… -- Getting a browser resizer for Chrome -- Getting ready -- How to do it... -- How it works... -- 7. Unobtrusive JavaScript -- Introduction -- Writing "Hello World" unobtrusively -- Getting ready -- How to do it... -- How it works... -- Creating a glowing "submit" button with the event listener.

Getting ready -- How to do it... -- How it works... -- Making a button stand out when you hover over it -- Getting ready -- How to do it... -- How it works... -- Resizing an element with unobtrusive jQuery -- Getting ready -- How to do it... -- How it works... -- Masking a password with unobtrusive JavaScript -- Getting ready -- How to do it... -- How it works... -- Using an event listener to animate an image shadow -- Getting ready -- How to do it... -- How it works... -- Index.