You are previewing HTML5 and CSS3 Responsive Web Design Cookbook.
O'Reilly logo
HTML5 and CSS3 Responsive Web Design Cookbook

Book Description

The web is moving inexorably away from the desktop, and this is the cookbook you need to make responsive websites that adapt fluidly to mobile devices. All the innovative techniques at your fingertips in one handy volume.

  • Learn the fundamental elements of writing responsive website code for all stages of the development lifecycle

  • Create the ultimate code writer’s resource using logical workflow layers

  • Full of usable code for immediate use in your website projects

  • Written in an easy-to-understand language giving knowledge without preaching

  • In Detail

    The Internet is going mobile. Desktop computer sales keep falling as the mobile device marketplace burgeons. Web development methods are rapidly changing to adapt to this new trend. HTML5 and CSS3 Responsive Web Design Cookbook, for all of today’s wireless Internet devices, gives developers a new toolbox for staying connected with this on-the-run demographic.

    HTML5 and CSS3 Responsive Web Design Cookbook is the programmer’s resource for generating websites that effortlessly interface with modern mobile devices. Using its clear instructions you can create responsive applications that make snappy connections for mobile browsers and give your website the latest design and development advantages for reaching mobile devices.

    HTML5 and CSS3 Responsive Web Design Cookbook is full of how-to recipes for site enhancements and optimizing your sites for the latest devices and the mobile Web.

    You will learn how to make images automatically respond to page size, make responsive menus, embed responsive videos and take advantage of a number of responsive typography techniques.We’ll then move on to creating layouts using frameworks making captivating responsive sites and retrofit frameworks into responsive websites with just a few lines of CSS.

    HTML5 and CSS3 Responsive Web Design Cookbook is your guide to obtaining full access to next generation devices and browser technology.

    Table of Contents

    1. HTML5 and CSS3 Responsive Web Design Cookbook
      1. Table of Contents
      2. HTML5 and CSS3 Responsive Web Design Cookbook
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Responsive Elements and Media
        1. Introduction
        2. Resizing an image using percent width
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        3. Responsive images using the cookie and JavaScript
          1. Getting ready
          2. How to do it…
          3. How it works…
        4. Making your video respond to your screen width
          1. Getting ready
          2. How to do it…
          3. How it works…
        5. Resizing an image using media queries
          1. Getting ready
          2. How to do it…
          3. How it works...
        6. Changing your navigation with media queries
          1. Getting ready
          2. How to do it…
          3. How it works…
        7. Making a responsive padding based on size
          1. Getting ready
          2. How to do it…
          3. How it works…
        8. Making a CSS3 button glow for a loading element
          1. Getting ready
          2. How to do it…
          3. How it works…
      9. 2. Responsive Typography
        1. Introduction
        2. Creating fluid, responsive typography
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Making a text shadow with canvas
          1. Getting ready
          2. How to do it...
          3. How it works…
          4. See also
        4. Making an inner and outer shadow with canvas
          1. Getting ready
          2. How to do it…
          3. How it works…
        5. Rotating your text with canvas
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        6. Rotating your text with CSS3
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        7. Making 3D text with CSS3
          1. Getting ready
          2. How to do it…
          3. How it works…
        8. Adding texture to your text with text masking
          1. Getting ready
          2. How to do it…
          3. How it works…
        9. Styling alternating rows with the nth positional pseudo class
          1. Getting ready
          2. How to do it…
          3. How it works…
        10. Adding characters before and after pseudo elements
          1. Getting ready
          2. How to do it…
          3. How it works…
        11. Making a button with a relative font size
          1. Getting ready
          2. How to do it…
          3. How it works…
        12. Adding a shadow to your font
          1. Getting ready
          2. How to do it…
          3. How it works...
        13. Curving a corner with border radius
          1. Getting ready
          2. How to do it…
          3. How it works…
      10. 3. Responsive Layout
        1. Introduction
        2. Responsive layout with the min-width and max-width properties
          1. Getting ready
          2. How to do it…
          3. How it works…
        3. Controlling your layout with relative padding
          1. Getting ready
          2. How to do it…
          3. How it works…
        4. Adding a media query to your CSS
          1. Getting ready
          2. How to do it…
          3. How it works…
        5. Creating a responsive width layout with media queries
          1. Getting ready
          2. How to do it…
          3. How it works…
        6. Changing image sizes with media queries
          1. Getting ready
          2. How to do it…
          3. How it works…
        7. Hiding an element with media queries
          1. Getting ready
          2. How to do it…
          3. How it works…
        8. Making a smoothly transitioning responsive layout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
      11. 4. Using Responsive Frameworks
        1. Introduction
        2. Using the Fluid 960 grid layout
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Using the Blueprint grid layout
          1. Getting ready
          2. How to do it....
          3. How it works...
        4. Fluid layout using the rule of thirds
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. There's more...
        5. Trying Gumby, a responsive 960 grid
          1. Getting ready
          2. How to do it…
          3. How it works...
        6. The Bootstrap framework makes responsive layouts easy
          1. Getting ready
          2. How it works...
          3. There's more...
      12. 5. Making Mobile-first Web Applications
        1. Introduction
        2. Using the Safari Developer Tools' User Agent switcher
          1. Getting ready
          2. How to do it…
          3. How it works...
        3. Masking your user agent in Chrome with a plugin
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        4. Using browser resizing plugins
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Learning the viewport and its options
          1. Getting ready
          2. How to do it…
          3. How it works...
        6. Adding tags for jQuery Mobile
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Adding a second page in jQuery Mobile
          1. Getting ready
          2. How to do it...
          3. How it works...
        8. Making a list element in jQuery Mobile
          1. Getting ready
          2. How to do it...
          3. How it works...
        9. Adding a mobile, native-looking button with jQuery Mobile
          1. Getting ready
          2. How to do it...
          3. How it works...
        10. Adding a mobile stylesheet for mobile browsers only using the media query
          1. Getting ready
          2. How to do it...
          3. How it works...
        11. Adding JavaScript for mobile browsers only
          1. Getting ready
          2. How to do it...
          3. How it works...
      13. 6. Optimizing Responsive Content
        1. Introduction
        2. Responsive testing using IE's Developer Tools
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        3. Browser testing – using plugins
          1. Getting ready
          2. How to do it...
        4. Development environments – getting a free IDE
          1. Getting ready
          2. How to do it…
          3. How it works...
        5. Virtualization – downloading VirtualBox
          1. Getting ready
          2. How to do it...
          3. How it works…
        6. Getting a browser resizer for Chrome
          1. Getting ready
          2. How to do it...
          3. How it works...
      14. 7. Unobtrusive JavaScript
        1. Introduction
        2. Writing "Hello World" unobtrusively
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Creating a glowing "submit" button with the event listener
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Making a button stand out when you hover over it
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Resizing an element with unobtrusive jQuery
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Masking a password with unobtrusive JavaScript
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Using an event listener to animate an image shadow
          1. Getting ready
          2. How to do it...
          3. How it works...
      15. Index