PacktLib: HTML5 and CSS3 Responsive Web Design Cookbook

HTML5 and CSS3 Responsive Web Design Cookbook


About the Author

About the Reviewers


Responsive Elements and Media


Resizing an image using percent width

Responsive images using the cookie and JavaScript

Making your video respond to your screen width

Resizing an image using media queries

Changing your navigation with media queries

Making a responsive padding based on size

Making a CSS3 button glow for a loading element

Responsive Typography


Creating fluid, responsive typography

Making a text shadow with canvas

Making an inner and outer shadow with canvas

Rotating your text with canvas

Rotating your text with CSS3

Making 3D text with CSS3

Adding texture to your text with text masking

Styling alternating rows with the nth positional pseudo class

Adding characters before and after pseudo elements

Making a button with a relative font size

Adding a shadow to your font

Curving a corner with border radius

Responsive Layout


Responsive layout with the min-width and max-width properties

Controlling your layout with relative padding

Adding a media query to your CSS

Creating a responsive width layout with media queries

Changing image sizes with media queries

Hiding an element with media queries

Making a smoothly transitioning responsive layout

Using Responsive Frameworks


Using the Fluid 960 grid layout

Using the Blueprint grid layout

Fluid layout using the rule of thirds

Trying Gumby, a responsive 960 grid

The Bootstrap framework makes responsive layouts easy

Making Mobile-first Web Applications


Using the Safari Developer Tools' User Agent switcher

Masking your user agent in Chrome with a plugin

Using browser resizing plugins

Learning the viewport and its options

Adding tags for jQuery Mobile

Adding a second page in jQuery Mobile

Making a list element in jQuery Mobile

Adding a mobile, native-looking button with jQuery Mobile

Adding a mobile stylesheet for mobile browsers only using the media query

Adding JavaScript for mobile browsers only

Optimizing Responsive Content


Responsive testing using IE's Developer Tools

Browser testing – using plugins

Development environments – getting a free IDE

Virtualization – downloading VirtualBox

Getting a browser resizer for Chrome

Unobtrusive JavaScript


Writing "Hello World" unobtrusively

Creating a glowing "submit" button with the event listener

Making a button stand out when you hover over it

Resizing an element with unobtrusive jQuery

Masking a password with unobtrusive JavaScript

Using an event listener to animate an image shadow