HTML5 and CSS3 Responsive Web Design Cookbook Learn the secrets of developing responsive websites capable of interfacing with today's mobile Internet devices Benjamin LaGrone BIRMINGHAM - MUMBAI HTML5 and CSS3 Responsive Web Design Cookbook Copyright © 2013 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: May 2013 Production Reference: 1160513 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84969-544-2 www.packtpub.com Cover Image by Duraid Fatouhi (duraidfatouhi@yahoo.com) Credits Author Benjamin LaGrone Reviewers Dale Cruse Ed Henderson Rokesh Jankie Acquisition Editor Edward Gordon Lead Technical Editors Savio Jose Neeshma Ramakrishnan Technical Editors Ishita Malhi Hardik Soni Nitee Shetty Project Coordinator Arshad Sopariwala Proofreader Amy Guest Indexer Tejal R. Soni Production Coordinator Nitesh Thakur Cover Work Nitesh Thakur About the Author Benjamin LaGrone is a web developer who lives and works in Texas. He got his start in programming at the age of 6 when he took his first computer class at The Houston Museum of Natural Science. His first program was “choose your own adventure book”, written in BASIC; he has fond memories of the days when software needed you to write line numbers. Fast forward to about thirty years later; after deciding that computers are here to stay, Ben has made a career combining some of his favorite things—art and coding; creating art from code. One of his favorite projects was using the GMaps API to map pathologies to chromosomes for cancer research. Fascinated with mobile devices for a long time, Ben thinks that the Responsive Web is one of the most exciting, yet long time coming, new aspects of web development. He now works in a SAAS development shop and is the mobile and Responsive Web evangelist for the team. When he’s not working on some Internet project, Ben spends his time building robots, tinkering with machines, drinking coffee, surfing, and teaching Kuk Sool martial arts. This book could not have been written without the patience and support of my loving wife, Hannah, and my two beautiful daughters, Daphne and Darby. Thank you. About the Reviewers Dale Cruse is the author of HTML5 Multimedia Development and has worked as a technical editor on several other HTML5 books. He started his career in 1995 as a U.S. Army photojournalist. Since going purely digital on CBSNews.com, he’s created web and mobile experiences for some of the most well-known clients in the world, including 20th Century Fox, Bloomingdale’s, and MINI Cooper. Currently, he juggles between being a senior frontend developer at Allen & Gerritsen and a New York Yankees fan in South Boston. An in-demand speaker, you can’t get him to shut up on Twitter at @dalecruse. Ed Henderson was born and raised in Scotland, and is an experienced human being, with a love for designing, building, and making and breaking things online. Not afraid to get his hands dirty and his feet wet, he is open to new technologies as long as they are useful and/or fun. Ed has a real degree in Computer Science, has run his own business, worked freelance, been employed, and been a consultant. He is now employed as Senior Software Engineer for POPSUGAR in San Francisco, California, USA. He has vast experience in all aspects of the industry, from web pages and apps to social media. Ed has also reviewed and written a number of books. Ed thrives on coming up with fresh ideas. Making a difference and turning one of those ideas into useful, working “things” is what floats Ed’s boat. Away from the crazy world of the Web, Ed has run the Edinburgh Marathon and abseiled down a lighthouse, raising thousands of pounds for charity. He captained his local Scottish rugby team for three seasons, winning the championship as top scorer and reaching the final of a national competition. You may not know that Ed is the Dad from Jack Draws Anything (http://jackdrawsanything.com/) and the winner of the prestigious .net magazine Social Campaign of the Year (2011) award. Ed lives in Corte Madera, California, USA (just 15 minutes from San Francisco) with the rest of Team Hendo: his amazing wife Rose and sidekicks Jack, Toby, and Noah. Ed likes cake, bacon, cider, and talking about himself in the third person. Rokesh Jankie graduated with a Masters degree in Computer Science from Leiden University, the Netherlands, in 1998. His field of specialization was Algorithms and NP-complete problems. Scheduling problems can be NP-complete, and that’s the area he focused on. After that, he started working for the University of Leiden. He then went on to work with ORTEC consultants, Ponte Vecchio, and later, with Qualogy. At Qualogy, he used his experience thus far to set up a product. Qualogy works in the fields of Oracle and Java technologies. With the current set of technologies, interesting products can be delivered; that is QAFE (see www.qafe.com for more info). The company that he works for now is specialized in Oracle and Java technologies. As head of the product development department and CTO of QAFE Inc., his focus is on the future of web application development. At the company, modern technologies (such as HTML5, Google APIs, AngularJS, NodeJS, and Java) are used, and close contact is kept with some excellent people at Google to make things work. He has also reviewed the books HTML5 Canvas Cookbook by Packt Publishing and Dart in Action by Manning Publications Co. I’m very honored and grateful that I was contacted to review this book. Savio Jose gave me the opportunity to review the book. It always feels good to be part of the next big thing on the Web (HTML5, CSS3, and JavaScript) in this way and for this particular topic. The future of web applications looks very promising. www.PacktPub.com Support files, eBooks, discount offers and more You might want to visit www.PacktPub.com for support files and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@packtpub.com for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt’s online digital book library. Here, you can access, read and search across Packt’s entire library of books. Why Subscribe? ff Fully searchable across every book published by Packt ff Copy and paste, print and bookmark content ff On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access. Table of Contents Preface 1 Chapter 1: Responsive Elements and Media 5 Introduction 5 Resizing an image using percent width 6 Responsive images using the cookie and JavaScript 8 Making your video respond to your screen width 10 Resizing an image using media queries 13 Changing your navigation with media queries 14 Making a responsive padding based on size 19 Making a CSS3 button glow for a loading element 21 Chapter 2: Responsive Typography 27 Introduction 27 Creating fluid, responsive typography 28 Making a text shadow with canvas 29 Making an inner and outer shadow with canvas 31 Rotating your text with canvas 33 Rotating your text with CSS3 34 Making 3D text with CSS3 36 Adding texture to your text with text masking 38 Styling alternating rows with the nth positional pseudo class 39 Adding characters before and after pseudo elements 41 Making a button with a relative font size 42 Adding a shadow to your font 44 Curving a corner with border radius 46 ii Table of Contents Chapter 3: Responsive Layout 49 Introduction 49 Responsive layout with the min-width and max-width properties 49 Controlling your layout with relative padding 52 Adding a media query to your CSS 55 Creating a responsive width layout with media queries 59 Changing image sizes with media queries 64 Hiding an element with media queries 66 Making a smoothly transitioning responsive layout 68 Chapter 4: Using Responsive Frameworks 79 Introduction 79 Using the Fluid 960 grid layout 80 Using the Blueprint grid layout 84 Fluid layout using the rule of thirds 88 Trying Gumby, a responsive 960 grid 93 The Bootstrap framework makes responsive layouts easy 99 Chapter 5: Making Mobile-first Web Applications 105 Introduction 105 Using the Safari Developer Tools' User Agent switcher 106 Masking your user agent in Chrome with a plugin 109 Using browser resizing plugins 112 Learning the viewport and its options 113 Adding tags for jQuery Mobile 116 Adding a second page in jQuery Mobile 119 Making a list element in jQuery Mobile 122 Adding a mobile, native-looking button with jQuery Mobile 129 Adding a mobile stylesheet for mobile browsers only using media queries 135 Adding JavaScript for mobile browsers only 137 Chapter 6: Optimizing Responsive Content 139 Introduction 139 Responsive testing using IE's Developer Tools 140 Browser testing – using plugins 143 Development environments – getting a free IDE 149 Virtualization – downloading VirtualBox 152 Getting a browser resizer for Chrome 156 iii Table of Contents Chapter 7: Unobtrusive JavaScript 161 Introduction 161 Writing "Hello World" unobtrusively 161 Creating a glowing "submit" button with the event listener 165 Making a button stand out when you hover over it 169 Resizing an element with unobtrusive jQuery 173 Masking a password with unobtrusive JavaScript 177 Using an event listener to animate an image shadow 179 Index 185 iv Table of Contents Preface HTML5 and CSS3 Responsive Web Design Cookbook gives developers a new toolbox for staying connected with this new skillset. Using the clear instructions given in the book, you can apply and create responsive applications and give your web project the latest design and development advantages for mobile devices. Using real-world examples, this book presents practical how-to recipes for site enhancements with a lighthearted, easy-to-understand tone. Gain a real understanding of Responsive Web Design and how to create an optimized display for an array of devices. The topics in this book include responsive elements and media, responsive typography, responsive layouts, using media queries, utilizing modern responsive frameworks, developing mobile-first web applications, optimizing responsive content, and achieving unobtrusive interaction using JavaScript and jQuery. Each recipe features actual lines of code that you can apply. What this book covers Chapter 1, Responsive Elements and Media, covers the creation of elements that optimize to mobile devices or desktop computers. Chapter 2, Responsive Typography, teaches you about using fluid typography, creating cool text effects, and creating text that stands out on your screen through the HTML5 canvas and CSS3. Chapter 3, Responsive Layout, teaches you how to create responsive layouts that you can really use in your projects. You will learn about using viewport and media queries to make your web project respond to different viewport sizes and types. Chapter 4, Using Responsive Frameworks, teaches you how to use new frameworks to deploy responsive sites with the latest responsive methods and interactions quickly and reliably, and how to turn old static frameworks into responsive ones. Chapter 5, Making Mobile-first Web Applications, teaches you how to make mobile web versions of your web application, which are optimized to be mobile-first, with jQuery Mobile, and how to optimize for the desktop viewport. Preface 2 Chapter 6, Optimizing Responsive Content, teaches you about getting and using all the tools you need to build and test your responsive web project. Chapter 7, Unobtrusive JavaScript, teaches you how to write JavaScript that lives out of your web page so that you can have thoughtful, responsive interactions for different devices. What you need for this book You will need an IDE (integrated development environment); NetBeans or Eclipse is recommended (there are instructions on how to get one inside), image editing software such as Photoshop or GIMP, a web host, and a local web server such as Apache or a local hosting application such as XAMPP or MAMPP. Who this book is for This book, for all of today’s wireless Internet devices, is for web developers seeking innovative techniques that deliver fast, intuitive interfacing with the latest mobile Internet devices. Conventions In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning. Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: “ The height: auto property acts to preserve the aspect ratio of the image.” A block of code is set as follows: 
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold: 
Your CSS should include a class for your paragraph and one for your image and an image wrapper. Float the paragraph to the left and give it a width of 60%, and the image wrapper with a width of 40%. p.text { float:left; Chapter 1 7 width:60%; } div.img-wrap{ float:right; width:40%; } This creates a fluid layout, but does not yet do anything to create a responsive image. The image will stay at a static width of 300px until you add the following CSS. Then, add a new class to the CSS for the image. Assign it a max-width value of 100%. This allows the width to adjust to the browser width changes. Next, add a dynamic height property to the class. img.responsive { max-width: 100%; height: auto; } This creates an image that responds to the browser window's width with an optimized version of that image for the audience. Downloading the example code You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub. com/support and register to have the files e-mailed directly to you. How it works… The responsive property of the image CSS forces it to take 100 percent of its parent element. When the parent element's width changes, the image changes to fill in that width. The height: auto property acts to preserve the aspect ratio of the image. See also ff The Responsive images using the cookie and JavaScript recipe ff The Making a responsive padding based on size recipe Responsive Elements and Media 8 Responsive images using the cookie and JavaScript A responsive image's width can be delivered through complicated server logic. Sometimes because of the requirements you cannot achieve the desired results through the easiest method. The percent-width method relies on the client side for image resizing of a large image file. This method provides a server-side delivery of the properly sized image you request. It may reduce the server load and bandwidth and help you with long loading, if you are concerned with slow loading affecting the performance of your website. Getting ready These methods require your server to perform some sort of logic function on it. Firstly, it requires PHP on your server. It also requires you to create three different sized versions of the image and serve them to the client as requested. How to do it… The JavaScript is simple. It creates a cookie based on your device's screen dimensions. When the client makes a request to the server for an image, it fires the PHP code to deliver the appropriate image. Now, on your server, create an images folder in the web directory and create a PHP file (index.php) with the following code in it: 0) { $theExt = pathinfo($img, PATHINFO_EXTENSION); // for Low resolution screen if ($screen_width>= 1024) { $output = substr_replace($img, '-med', -strlen($theExt)-1, } // for Medium resolution screen else if ($screen_width<= 800) { $output = substr_replace($img, '-low', -strlen($theExt)-1, 0); } // check if file exists if (isset($output) &&file_exists($output)) { $img = $output; } } // return the image file; readfile($img); } ?> Now with your image-editing software, open your large image and create two smaller versions of it. If the original version is 300px, then make the next two copies 200px and 100px. Then, name them robot.png, robot-med.png, and robot-low.png respectively. Upload these three images into the images folder. Last, but not least, put the following HTML file in your server's document root: Responsive Images 
Responsive Elements and Media 10 You can see the recipe in action in the following screenshot: While this method is limited to delivering a specific image for each screen size, and is not fluidly dynamic, it does provide the same functionality on the server side as a CSS media query. You can style the served image with CSS or animate it with JavaScript. It can be used with a combination of methods to provide responsive content. The code for this recipe was originally created by the clever folks at http://www.html.it/ articoli/responsive-images-con-i-cookie/. How it works… The HTML file first creates a cookie describing your device's screen dimensions. When the image element calls the PHP file it works like an include statement in PHP. The PHP file first checks for the file to exist, then reads the cookie for the screen width, and delivers the appropriate-sized version of the image. Making your video respond to your screen width The streaming of video can also be responsive. You can easily embed an HTML5 video in your page and make it responsive. The video tag easily supports using a percent width. However, it requires that you have the video source on your website's host. If you have this available, this is easy. However, using a video-hosting site, such as YouTube or Vimeo, has many advantages over hosting it yourself. First, there is the bandwidth issue, you may have bandwidth or disk space limits on your hosting server. Additionally, video-hosting sites make the upload conversion to a usable web video surprisingly easy, compared to using only your own resources. Getting ready The video-hosting sites allow you to embed an iFrame or object code snippet in your page to stream the video on your site. This won't work inside the video tag. So, to make it responsive, there is a more complex, but still easy method. How to do it… Wrap the video-source snippet in an HTML containing the div element and give it a 50 to 60 percent padding on the bottom and relative positions. Then give its child element, the video iFrame object, a 100% width and 100% height, and an absolute position. This makes the iFrame object completely fill in the parent element. The following is the HTML code that uses an iframe tag to get a video from Vimeo: The following is the HTML code using the older YouTube object with markup: Both video types use the same CSS: .video-wrap { position:relative; padding-bottom: 55%; padding-top: 30px; height: 0; overflow:hidden; } .video-wrap iframe, .video-wrap object, .video-wrap embed { position:absolute; top:0; width:100%; height:100%; } You might not want the video to take up the entire width of the page. In this case, you can limit the width of the video using width and max-width. Then, wrap the video-wrap element with the another div element and assign a fixed width value and max-width:100%. .video-outer-wrap { width: 500px; max-width:100%; } This recipe will work on all modern browsers. Chapter 1 13 How it works… This method is called Intrinsic Ratios for Videos, created by Thierry Koblentz on A List Apart. You wrap the video inside an element that has an intrinsic aspect ratio, and then give the video an absolute position. This locks the aspect ratio, while allowing the size to be fluid. Resizing an image using media queries The media query is another useful and highly customizable method for responsive images. This is different than responsive fluid width achieved by the percent-width method. Your design may require some specific image widths for different screen size ranges and a fluid width would break your design. Getting ready This method only requires one image, and makes the client's browser resize the image instead of the server. How to do it… The HTML code is simple, using the standard image tag, create an image element, as follows: 
To start with a simple version, create a media query that will detect the browser window's size and deliver a larger image for browser screens larger than 1024px, and a smaller image for smaller browser windows. First the media query, it looks for the media type screen, and then the screen size. When the media query is satisfied the browser will render the CSS inside the brackets. @media screen and ( max-width: 1024px ) {…} @media screen and ( min-width: 1025px ) {…} Now, add a class to your image tag. The class will respond differently in different media queries, as shown in the following code line: Adding the CSS class to each media query with a different size will make the browser render the desired image size to each differently sized browser window. The media query can coexist with other CSS classes. Then, outside of the media queries, add a CSS class for the image with height:auto. This will work for both media queries with only adding one line of CSS. @media screen and ( max-width: 1024px ) { img.responsive { width: 200px; } Responsive Elements and Media 14 } @media screen and ( min-width: 1025px) { img.responsive { width: 300px;} } img.responsive { height: auto; } To make the image respond to multiple ranges you can combine the max-width and min-width media queries. To specify an image size for browser windows, sized between 1024px and 1280px, add a media query for screen, 1024px as min-width, and 1280px as max-width. @media screen and ( max-width: 1024px ) { img.responsive { width: 200px; } } @media screen and ( min-width:1025px ) and ( max-width: 1280px ) { img.responsive { width: 300px; } } @media screen and ( min-width: 1081px ) { img.responsive { width: 400px; } } img.responsive { height: auto; } You can specify many different image sizes for many different browser window sizes with the media query method. How it works... The media query of CSS3 gives your CSS logical conditions based on the browser's viewport properties, and can render different styles based on the browser's window properties. This recipe takes advantage of this by setting a different image width for many different browser's window sizes. Thus delivering a responsive image size, you can control with a high degree of granularity. Changing your navigation with media queries The media query can do more than just resizing images. You can use the media query to deliver a much more dynamic web page to your viewers. You can display a responsive menu based on different screen sizes using media queries. Getting ready To make a responsive menu system, using two different menus we will display a dynamic menu for three different browser window sizes. Chapter 1 15 How to do it… For the smaller browser windows, and especially for mobile devices and tablets, create a simple select menu that only takes up a small amount of vertical space. This menu uses an HTML form element for the navigation options that fires a JavaScript code to load the new page on selection. For the larger browser window sizes, create a simple ul list element that can be styled through CSS. This menu will receive a different layout and look from the different media queries. This menu is added to the same page following the select menu: To make the menu responsive, create a media query for the target browser window sizes. For browser windows smaller than 800px, the CSS will display only the select form inside the div element with the small-menu class, for all larger browser windows, the CSS will display the ul list inside the div element with the large-menu class. This creates an effect where the page will shift between menus when the browser window crosses width of 801px. @media screen and ( max-width: 800px ) { .small-menu { display:inline; } .large-menu { display:none; } Responsive Elements and Media 16 } @media screen and ( min-width: 801px ) and ( max-width: 1024px ) { .small-menu { display:none; }. .large-menu { display:inline; } } @media screen and ( min-width: 1025px ) { .small-menu { display:none; } .large-menu { display:inline; } } For the larger screen sizes, you can use the same ul list and use the media query even further to deliver a different menu by simply switching out the CSS and using the same HTML. For the medium-sized menu, use CSS to display the list items as a horizontal list, as shown in the following code snippet: .large-menu ul{ list-style-type:none; } .large-menu ul li { display:inline; } This turns the list into a horizontal list. We want this version of the navigation to appear on the medium-sized browser windows. Place it inside the media query ranging between 801px and 1024px, as shown in the following code snippet: @media screen and ( min-width: 801px ) and (max-width: 1024px ) { .small-menu { display:none; } .large-menu { display:inline; } .large-menu ul { list-style-type:none; } .large-menu ul li { display:inline; } } @media screen and (min-width: 1025px ) { .small-menu { display:none; } Chapter 1 17 .large-menu { display:inline; } } To further utilize the responsive navigation elements in the best way possible, we want the menu list version to move to a different layout location when the screen's width changes. For the middle width, 801px to 1024px, the menu stays on top of the page and has a 100% width. When the screen is wider than 1025px, the menu will float to the left-hand side of its parent element. Add to the 801px to 1024px media query a 100% width to the large-menu class, and to the 1025px media query, add a 20% width and a float:left value to the large-menu class. To fill out the page we will also add a paragraph of text wrapped in a div element. You can go back to the Lorem Ipsum text generator to create filler text (http://lipsum.com/). In the medium-width media query give the element containing the paragraph a 100% width. In the largest media query, give the element containing the paragraph a width of 80% and float it to the right-hand side of its parent element. Responsive Elements and Media 18 And your style should look as shown in following code snippet: Chapter 1 19 The final result is a page with three different versions of the navigation. Your audience will be amazed when given an optimized version of the menu for each particular browser window size. You can see the navigation elements in all their glory in the following screenshot: How it works… Each version of the navigation utilizes the media query CSS3 property to maximize the space available for the menu and the content. In the smallest window, below 1024px, the navigation is packed neatly inside a select form element. The medium window, ranging from 1025px to 1280px, the navigation is inline and spans across the top of the page, and is followed by the content. Finally, in the widest browser widths, the menu floats on the left-hand side and takes only 20 percent of the horizontal screen space, while the content is maximized on the remaining 80 percent (right-hand side) of the wide-browser window. This technique requires more planning and effort, but is well worth it to deliver the best possible viewing to your audience. Making a responsive padding based on size To complement a responsive width image element, relative padding can be added. With a static width padding, the image padding may appear too thick in smaller browser windows and overcrowd any other elements nearby, or may push the image off the screen. Responsive Elements and Media 20 Getting ready A good place to start is with some understanding of the calculation of the box model properties. The total width an object takes is its actual width plus its padding, border, and margin on both sides, or 2 x (margin + border + padding) + content = total width. How to do it… For an image that is 200px wide in its normal non-responsive state, your typical padding may be 8px, therefore using the previous box model, the formula can be framed as follows: 2 x ( 0 + 0 + 8px ) + 200px = 216px To find the percentage of padding, divide the padding by the total width, 8 / 216 = 0.037% rounded to 4%. We created this CSS and HTML earlier when we created the responsive percent-width image. Add to the image class a padding of 4%. To help you see the actual padding width change as you change the browser window's size, add a background color (background-color: #cccccc;) to your image CSS. Chapter 1 21 How it works… The image padding set at 100 percent will stick to the edge of its parent element. As the parent element size changes, the image padding adjusts accordingly. If you have done your box model math properly, your layout will successfully respond to your browser window's changing width. Making a CSS3 button glow for a loading element Your website, like many others, may cater to impatient people. If your site has a submitable form, your users may find themselves clicking the "submit" button a number of times impatiently if your page does not load the new content quick enough. This can be a problem when it causes multiple form submissions with the same data. Getting ready You can stop this behavior by adding some simple visual cues that tell the user something is happening behind the scenes and to be a little patient. If it's a little bit flashy, it might even bring a little sunshine into their otherwise hurried lives. This recipe does not require any images, we are going to create a handsome gradient submit button using CSS only. You may want to pause and go get a cup of coffee, as this is the longest recipe in this chapter. How to do it… You can start by creating a form with some text boxes and a submit button. Then, make the form really cool, use the HTML5 placeholder property for the label. Even with the placeholders, the form is pretty boring. Note that this is not yet supported in Internet Explorer 9. My Form
Responsive Elements and Media 22 By adding CSS properties we can start giving the button some life: input[type="submit"] { color: white; padding: 5px; width: 68px; height: 28px; border-radius: 5px; border: 1px; font-weight: bold; border: 1px groove #7A7A7A; } This is illustrated in the following screenshot: The button can become even more shiny when we add a CSS3 gradient effect. To accomplish this, there must be a different line of CSS for each browser rendering engine: Opera, Internet Explorer, WebKit (Chrome and Safari), and Firefox. You can add as many gradient shifts as you like, simply by adding a color phase and the % location from the top, each shift separated by a comma, as shown in the following code snippet: This effect is illustrated in the following screenshot: Another effect can be added to the button by CSS, the hover effect. With this property, when the pointer moves over the button, it looks like it is being pressed in. The following CSS will help you add that dark border to the button: input[type="submit"]:hover { border: 2px groove #7A7A7A; } This is displayed in the following screenshot: Responsive Elements and Media 24 Using CSS3 Box Shadows and jQuery we can make a simple animation of a pulsing halo around the Submit button after you pushed it. Create an event listener with jQuery that listens for the button's click event, and on that click event a series of class changes on the form button element. The partial-fade class will be added by the script to the button element. Don't forget to add a link in your head tag to the jQuery source: Then, insert the following script after the form closes: To finish making the button glow when you click it, add the new class partial-fade, to your CSS file and give it a CSS3 Box Shadow Property, and change the border properties. Now, the Submit button will give a flash of blue when pressed. The following screenshot shows the final product: Whew! This button was a lot of work for such a small detail, but the details like this will really help make a great-looking website. This happens to be one of my favorite details to surprise my audience with. How it works… The CSS3 background gradient is an easy way to make a great-looking button consistently across browsers. The gradient is complicated and each browser currently requires its own line for CSS. You can control the gradient breakpoints by adding the percentage and colors manually. Adding box shadow, borders, and jQuery make fun effects on the button when the event is fired. 2 Responsive Typography In this chapter, you will learn about: ff Creating fluid, responsive typography ff Making a text shadow with canvas ff Making an inner and outer shadow with canvas ff Rotating your text with canvas ff Rotating your text with CSS3 ff Making 3D text with CSS3 ff Adding texture to your text with CSS3 text masking ff Styling alternating rows with the nth positional pseudo class ff Adding characters before and after pseudo elements ff Making a button with a relative font size ff Adding a shadow to your font ff Curving a corner with border radius Introduction This chapter deals mostly with how to make responsive typography. You will learn recipes for optimizing your text for various types of device, as well as methods to embellish your typography. The technologies involved are simply CSS3 and HTML5's canvas element with JavaScript. With responsive typography, you can apply a number of exciting effects to your text. When finished with this chapter, you should be armed with a number of techniques that will get you started on the road to making amazing responsive websites. These recipes cover the basics, but when combined together with some creativity, they will enable you to do some fantastic production. Responsive Typography 28 Creating fluid, responsive typography This recipe is a simple example of responsive typography. It will demonstrate the use of the new size unit REM. REM means Root EM. This simply means that the size of the font is relative to the root's font size, not the parent, as with the EM unit. Getting ready Without any further discussion, let's jump into this recipe. Go get some filler text from my favorite Ipsum generator (http://ipsum.com). Generate at least one paragraph and copy the text into your clipboard. How to do it... Now, paste the filler text into your HTML document and wrap it in a paragraph tag. Give the paragraph element class= "a", then make a copy and assign the new paragraph class="b", as shown in the following code snippet:
Eventually, you can have many comments and a good looking working layout built simply with only relative padding. The CSS to make this work is surprisingly easy. Simply add the classes: .content, .comments, and .comment. In the content class add some side padding, and in the comment add heavier padding to the left. .content {padding:0 5% 0 5%;} aside {padding:0 10% 0 20%} .comment {padding:0 0 0 10%} This is illustrated in the following screenshot: Chapter 3 55 How it works… The relative padding attribute responds to page width changes by adjusting its own width. Adding a media query to your CSS In this recipe, we will explore the awesome power of the media query by rendering a simple web page with every permutation and device available in the universe. Okay, I'm exaggerating a little, I admit. But we will create a simple web page that will respond to several browser window sizes, devices, and other possible presentation methods. Getting ready Solely for the purpose of this recipe, go out and purchase one of each of the devices and variations described here. You'll need a new high definition TV, a smart phone, a not-so-smart phone, and at least one printer. No way? Okay, but I'm just trying to help you and the economy. That being said, of course it will be impossible to truly test every media query, but do what you can. There are a surprising number of possibilities. But in most real-life scenarios, you are unlikely to need or care to use most of these. We will at least try to cover the most commonly used media queries. I will skip over those that I think are unnecessary to you. You can easily access information about these if you find yourself in a project with requirements to create presentations for one of these obscure devices. You never know! The WC3 has all of the detailed information and descriptions of these if you need them at http://www.w3.org/TR/css3-mediaqueries/. I will exclude the examples and just for your reference include numerous devices with specific color limitations, including monochrome, print, TV, and handheld. The media queries you will need most likely are screen and print. How to do it… Create a simple HTML page with a h1 title, and an element wrapping around an image, and a paragraph of text. Get some Ipsum filler text if you don't have any text lying around. It will look just like the following: Loremipsum dolor sit amet…
Loremipsum dolor sit amet
I think, therefore I am
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: “However, what I really want is a large image, so I click on Search tools, and then on Any Size, which I change to Large.”. Warnings or important notes appear in a box like this. Tips and tricks appear like this. Reader feedback Feedback from our readers is always welcome. Let us know what you think about this book— what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of. To send us general feedback, simply send an e-mail to feedback@packtpub.com, and mention the book title via the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors. Customer support Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase. Preface 4 Downloading the example code You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you. Errata Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support. Piracy Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy. Please contact us at copyright@packtpub.com with a link to the suspected pirated material. We appreciate your help in protecting our authors, and our ability to bring you valuable content. Questions You can contact us at questions@packtpub.com if you are having a problem with any aspect of the book, and we will do our best to address it. 1 Responsive Elements and Media In this chapter, you will learn about: ff Resizing an image using percent width ff Responsive images using the cookie and JavaScript ff Making your video respond to your screen width ff Resizing an image using media queries ff Changing your navigation with media queries ff Making a responsive padding based on size ff Making a CSS3 button glow for a loading element Introduction The responsiveness website design and media is one of the most exciting things to happen to web development since ASCII art appeared on bulletin boards back when I was a school boy. The new cool features of HTML5, CSS3, and jQuery have brought new life to the old web in ways that have brought back the fun and really gets the Web audiences excited for using your applications. This chapter contains several recipes that will help you create responsive HTML elements and different media. Some recipes are easy and some are more challenging. All of the code used for the responsive web design elements is provided inside the book, therefore nothing inside will be impossible to accomplish. Each and all of the responsive web design recipes will help you optimize your website's presentation to create an amazing responsive web experience for your audience no matter what device type or size you are using. Responsive Elements and Media 6 Resizing an image using percent width This method relies on client-side coding for resizing a large image. It serves only one image to the client and asks it to render the image according to the size of the browser's window. This is usually the preferable method when you are confident that the clients have the bandwidth to download the image without causing the page to load slowly. Getting ready First you will need an image. To find a high-quality image, use Google Image Search. A search for robots, for example, the search gives me 158,000,000 results, which is pretty good. However, what I really want is a large image, so I click on Search tools, and then click on Any Size, which I change to Large. I still have 4,960,000 images to choose from. The image should be resized to match the largest scale viewable. Open it in your image-editing software. If you don't have an image-editing software already, there are many free ones, go get one. Gimp is a powerful image-editing software and it's open source, or free to download. Go to http://www.gimp.org to get this powerful open source image-editing software. How to do it… Once you have your image-editing software, open the image in it and change the image's width to 300px. Save your new image and then move or upload the image to your web directory. Your HTML should contain your image and some text to demonstrate the responsive effect. If you do not have time to write your life story, you can go back to the Internet and get some sample text from an Ipsum generator. Go to http://www.lipsum.com and generate a paragraph of Ipsum text.Loremipsum dolor sit amet…
Loremipsum dolor sit amet
Responsive Elements and Media 10 You can see the recipe in action in the following screenshot: While this method is limited to delivering a specific image for each screen size, and is not fluidly dynamic, it does provide the same functionality on the server side as a CSS media query. You can style the served image with CSS or animate it with JavaScript. It can be used with a combination of methods to provide responsive content. The code for this recipe was originally created by the clever folks at http://www.html.it/ articoli/responsive-images-con-i-cookie/. How it works… The HTML file first creates a cookie describing your device's screen dimensions. When the image element calls the PHP file it works like an include statement in PHP. The PHP file first checks for the file to exist, then reads the cookie for the screen width, and delivers the appropriate-sized version of the image. Making your video respond to your screen width The streaming of video can also be responsive. You can easily embed an HTML5 video in your page and make it responsive. The video tag easily supports using a percent width. However, it requires that you have the video source on your website's host. If you have this available, this is easy. However, using a video-hosting site, such as YouTube or Vimeo, has many advantages over hosting it yourself. First, there is the bandwidth issue, you may have bandwidth or disk space limits on your hosting server. Additionally, video-hosting sites make the upload conversion to a usable web video surprisingly easy, compared to using only your own resources. Getting ready The video-hosting sites allow you to embed an iFrame or object code snippet in your page to stream the video on your site. This won't work inside the video tag. So, to make it responsive, there is a more complex, but still easy method. How to do it… Wrap the video-source snippet in an HTML containing the div element and give it a 50 to 60 percent padding on the bottom and relative positions. Then give its child element, the video iFrame object, a 100% width and 100% height, and an absolute position. This makes the iFrame object completely fill in the parent element. The following is the HTML code that uses an iframe tag to get a video from Vimeo: To start with a simple version, create a media query that will detect the browser window's size and deliver a larger image for browser screens larger than 1024px, and a smaller image for smaller browser windows. First the media query, it looks for the media type screen, and then the screen size. When the media query is satisfied the browser will render the CSS inside the brackets. @media screen and ( max-width: 1024px ) {…} @media screen and ( min-width: 1025px ) {…} Now, add a class to your image tag. The class will respond differently in different media queries, as shown in the following code line: Adding the CSS class to each media query with a different size will make the browser render the desired image size to each differently sized browser window. The media query can coexist with other CSS classes. Then, outside of the media queries, add a CSS class for the image with height:auto. This will work for both media queries with only adding one line of CSS. @media screen and ( max-width: 1024px ) { img.responsive { width: 200px; } Responsive Elements and Media 14 } @media screen and ( min-width: 1025px) { img.responsive { width: 300px;} } img.responsive { height: auto; } To make the image respond to multiple ranges you can combine the max-width and min-width media queries. To specify an image size for browser windows, sized between 1024px and 1280px, add a media query for screen, 1024px as min-width, and 1280px as max-width. @media screen and ( max-width: 1024px ) { img.responsive { width: 200px; } } @media screen and ( min-width:1025px ) and ( max-width: 1280px ) { img.responsive { width: 300px; } } @media screen and ( min-width: 1081px ) { img.responsive { width: 400px; } } img.responsive { height: auto; } You can specify many different image sizes for many different browser window sizes with the media query method. How it works... The media query of CSS3 gives your CSS logical conditions based on the browser's viewport properties, and can render different styles based on the browser's window properties. This recipe takes advantage of this by setting a different image width for many different browser's window sizes. Thus delivering a responsive image size, you can control with a high degree of granularity. Changing your navigation with media queries The media query can do more than just resizing images. You can use the media query to deliver a much more dynamic web page to your viewers. You can display a responsive menu based on different screen sizes using media queries. Getting ready To make a responsive menu system, using two different menus we will display a dynamic menu for three different browser window sizes. Chapter 1 15 How to do it… For the smaller browser windows, and especially for mobile devices and tablets, create a simple select menu that only takes up a small amount of vertical space. This menu uses an HTML form element for the navigation options that fires a JavaScript code to load the new page on selection. For the larger browser window sizes, create a simple ul list element that can be styled through CSS. This menu will receive a different layout and look from the different media queries. This menu is added to the same page following the select menu: To make the menu responsive, create a media query for the target browser window sizes. For browser windows smaller than 800px, the CSS will display only the select form inside the div element with the small-menu class, for all larger browser windows, the CSS will display the ul list inside the div element with the large-menu class. This creates an effect where the page will shift between menus when the browser window crosses width of 801px. @media screen and ( max-width: 800px ) { .small-menu { display:inline; } .large-menu { display:none; } Responsive Elements and Media 16 } @media screen and ( min-width: 801px ) and ( max-width: 1024px ) { .small-menu { display:none; }. .large-menu { display:inline; } } @media screen and ( min-width: 1025px ) { .small-menu { display:none; } .large-menu { display:inline; } } For the larger screen sizes, you can use the same ul list and use the media query even further to deliver a different menu by simply switching out the CSS and using the same HTML. For the medium-sized menu, use CSS to display the list items as a horizontal list, as shown in the following code snippet: .large-menu ul{ list-style-type:none; } .large-menu ul li { display:inline; } This turns the list into a horizontal list. We want this version of the navigation to appear on the medium-sized browser windows. Place it inside the media query ranging between 801px and 1024px, as shown in the following code snippet: @media screen and ( min-width: 801px ) and (max-width: 1024px ) { .small-menu { display:none; } .large-menu { display:inline; } .large-menu ul { list-style-type:none; } .large-menu ul li { display:inline; } } @media screen and (min-width: 1025px ) { .small-menu { display:none; } Chapter 1 17 .large-menu { display:inline; } } To further utilize the responsive navigation elements in the best way possible, we want the menu list version to move to a different layout location when the screen's width changes. For the middle width, 801px to 1024px, the menu stays on top of the page and has a 100% width. When the screen is wider than 1025px, the menu will float to the left-hand side of its parent element. Add to the 801px to 1024px media query a 100% width to the large-menu class, and to the 1025px media query, add a 20% width and a float:left value to the large-menu class. To fill out the page we will also add a paragraph of text wrapped in a div element. You can go back to the Lorem Ipsum text generator to create filler text (http://lipsum.com/). In the medium-width media query give the element containing the paragraph a 100% width. In the largest media query, give the element containing the paragraph a width of 80% and float it to the right-hand side of its parent element. Loremipsum dolor sitamet, consecteturadipiscingelit…
ipsum dolor sit amet, consecteturadi…
ipsum dolor sit amet, consecteturadipiscingelit…
My Form
Responsive Elements and Media 22 By adding CSS properties we can start giving the button some life: input[type="submit"] { color: white; padding: 5px; width: 68px; height: 28px; border-radius: 5px; border: 1px; font-weight: bold; border: 1px groove #7A7A7A; } This is illustrated in the following screenshot: The button can become even more shiny when we add a CSS3 gradient effect. To accomplish this, there must be a different line of CSS for each browser rendering engine: Opera, Internet Explorer, WebKit (Chrome and Safari), and Firefox. You can add as many gradient shifts as you like, simply by adding a color phase and the % location from the top, each shift separated by a comma, as shown in the following code snippet: This effect is illustrated in the following screenshot: Another effect can be added to the button by CSS, the hover effect. With this property, when the pointer moves over the button, it looks like it is being pressed in. The following CSS will help you add that dark border to the button: input[type="submit"]:hover { border: 2px groove #7A7A7A; } This is displayed in the following screenshot: Responsive Elements and Media 24 Using CSS3 Box Shadows and jQuery we can make a simple animation of a pulsing halo around the Submit button after you pushed it. Create an event listener with jQuery that listens for the button's click event, and on that click event a series of class changes on the form button element. The partial-fade class will be added by the script to the button element. Don't forget to add a link in your head tag to the jQuery source: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
ultricies ut viverra massa rutrum. Nunc pharetra, ipsum ut ullamcorper placerat,
Next, create a style for the base HTML font-size property, and then one for the static sized paragraph to compare the font size changes—similar to an experiment's control group: html{font-size:12px;} p.b{font-size:1rem;} Next create two @media queries, one for orientation:portrait, and the second one for orientation:landscape. In the orientation:portrait media query, style the "a" class paragraph element with a font-size value of 3rem. And in the orientation:landscape media query, style the "a" class paragraph with the font-size value of 1rem. @media screen and (orientation:portrait){ p.a{font-size:3rem;} } @media screen and (orientation:landscape){ p.a{font-size:1rem;} } Chapter 2 29 Now when you resize your browser window from landscape to portrait mode, you will see the font size of the first paragraph goes from a ratio of 1:1 to the base size, to 3:1 of the base size. While this seems very simple, this recipe can be varied and built on to create a number of impressive responsive typography tricks. How it works... When your browser makes a request, the CSS3 @media query returns some conditional styles based on viewport's width. It loads or builds (rebuilds) on the fly for changes to the viewport's size. While not many in your audience are going to spend much time resizing your website in their browser, it is easy to spend too much time worrying about how your website shifts from one size to the next. See also ff The Making a button with a relative font size recipe Making a text shadow with canvas HTML5 brings a new element to web design, the
Add Media Query to your CSS
Pellent esque el eifend facilisis odio ac ullam corper. Nullam ut enim ut massa tincidunt luctus… ...
Next, we start the CSS for these items. Add some basic CSS and the following media queries: body{ margin: 0; padding: 0; } Chapter 3 69 footer {width: 100%;} .clear {clear: both;} @media screen and (max-width: 1280px) { header, .content {width: 100%;} } @media screen and (min-width: 1281px) { header { float: left; width: 60%; } .content { float: right; width: 40%; } } In this basic layout, the header and .content rows both occupy 100% of the page width, while the page is under 1280px. When the page is larger, they occupy the respective 60%/40% split and the float left and right. Next let's build the menus. This menu will employ a responsive trick of using a media query to hide and show two different menus. Essentially, we will build two different menus, and then use CSS to display the optimized one for each screen. The smallest version will use a multi-select drop-down menu, while the larger menu contains two inline lists. Here's what the HTML looks like inside the top-wrap element: classes 
And of course the magic is in the CSS. Let's use some tricks to make the search form hover in the same spot. First give the outer div element a width of 100%, then the search element will get an absolute position and few different properties under different media queries. This combination will keep the search form floating above the middle of the img area. Keep in mind that we are adding new CSS to the media queries. The following CSS code reflects only the additions, not what was already there. It gets rather long if I show the entire CSS expanding each time. At the end, I will include the entire CSS as it should be in its final state. .img-search {width: 100%;} .search {position: absolute; } .top-menu { height: 33px; background-color: #ccc; } .logo img {height: 87px; float: left;} .top-menu nav li {display: inline-block;} .large-menu ul {margin: 0 5px;} .large-menu li {display: inline;} @media screen and (max-width: 600px) { .search { margin-top: 87px; left: 22%;} } Responsive Layout 72 @media screen and (min-width: 601px) and (max-width: 1280px) { .search { margin-top: 144px; left: 40%; } } @media screen and (min-width: 1281px) { .search { margin-top: 144px; left: 22%; } } The .img-search image element will receive a dynamic width of 100%, and auto height. And that's it for the large image search field. Give the next element, .flip-tab, a width of 100%, and any height or other properties you want. You won't have to worry about this again: Look Down Here
Search or Like Us Locally
- San FranciscoLike
- Los AngelesLike
- AustinLike Responsive Layout 74
- HoustonLike
Loremipsumdolor sitamet, consecteturadipiscingelit. Nunc non felisutmetusvestibulumcondimentumuteueros.Nam id ipsumnibh. Praesent sit ametvelit...