HTML AND CSS

. A footer element, according to the spec, represents a footer for the section of content that is its nearest ancestor. The “section” of content could be the entire document, or it could be a section, article, or aside element. Often a footer will contain copyright information, lists of related links, author informaation and similar content that you normally think of as coming at the end of a block of content. However, much like aside and header, a footer element is not defined in terms of its position on the page; hence, it does not have to appear at the end of a section, or at the bottom of a page. Most likely it will, but this is not required. For example, information about the author of a blog post might be displayed above the post instead of below it, and still be considered footer information. How did HTML5’s creators decide which new elements to include? You might wonder how the creators of the language came up with new semantic elements. After all, you could feasibly have dozens more semantic elements—why not have a comment element for user-submitted comments, or an ad element specifically for advertisements? The creators of HTML5 ran tests to search through millions of web pages to see what kinds of elements were most commonly being used. The elements were deciide based on the id and class attributes of the elements being examined. The results helped guide the introduction of a number of new HTML semantic elements. Thus, instead of introducing new techniques that might be rejected or go unused, the editors of HTML5 are endeavoring to include elements that work in harmony with what web page authors are already doing. In other words, if it’s common for most web pages to include a div element with an id of header, it makes sense to include a new element called header. HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 30Structuring The HTML5 Herald Now that we’ve covered the basics of page structure and the elements in HTML5 that will assist in this area, it’s time to start building the parts of our page that will hold the content. Let’s start from the top, with a header element. It makes sense to include the logo and title of the paper in here, as well as the tagline. We can also add a nav element for the site navigation. After the header, the main content of our site is divided into three columns. While you might be tempted to use section elements for these, stop and think about the content. If each column contained a separate “section” of information (like a sports section and an entertainment section), that would make sense. As it is, though, the separation into columns is really only a visual arrangement—so we’ll use a plain old div for each column. Inside those divs, we have newspaper articles; these, of course, are perfect candidates for the article element. The column on the far right, though, contains three ads in addition to an article. We’ll use an aside element to wrap the ads, with each ad placed inside an article element. This may seem odd, but look back at the description of article: “a selfconttaine composition […] that is, in principle, independently distributable or reusabble. An ad fits the bill almost perfectly, as it’s usually intended to be reproduced across a number of websites without modification. Next up, we’ll add another article element for the final article that appears below the ads. That final article will not be included in the aside element that holds the three ads. To belong in the aside, the article would need to be tangentially related to the page’s content. This isn’t the case: the article is part of the page’s main content, so it would be wrong to include it in the aside. Now the third column consists of two elements: an aside and an article, stacked one on top of the other. To help hold them together and make them easier to style, we’ll wrap them in a div.We’re not using a section, or any other semantic markup, because that would imply that the article and the aside were somehow topically related. They’re not—it’s just a feature of our design that they happen to be in the same column together. Something seriously cool has happened in web development! 31 Markup, HTML5 StyleWe’ll also have the entire upper section below the header wrapped in a generic div for styling purposes. Finally, we have a footer in its traditional location, at the bottom of the page. Becaaus it contains a few different chunks of content, each of which forms a selfconttaine and topically related unit, we’ve split them out into section elements. The author information will form one section, with each author sitting in their own nested section. Then there’s another section for the copyright and additional information. Let’s add the new elements to our page, so that we can see where our document stands: index.html (excerpt)

Figure 2.2 shows a screenshot that displays our page with some labels indicating the major structural elements we’ve used. Figure 2.2. The HTML5 Herald, broken into structural HTML5 elements We now have a structure that can serve as a solid basis for the content. Something seriously cool has happened in web development! 33 Markup, HTML5 StyleWrapping Things Up That’s it for this chapter. We’ve learned some of the basics of content structure in HTML5, and we’ve started to build our sample project using the knowledge we’ve gained. In the next chapter, we’ll have a more in-depth look at how HTML5 deals with different types of content. Then, we’ll continue to add semantics to our page when we deal with more new HTML elements. HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 34Chapter7 CSS3 Gradients and Multiple Backgrounds In Chapter 6, we learned a few ways to add decorative styling features—like shadows and rounded corners—to our pages without the use of additional markup or images. The next most common feature frequently added to websites that used to require images is gradients. CSS3 provides us with the ability to create native radial and linear gradients, as well as include multiple background images on any element. With CSS3, there’s no need to create the multitudes of JPEGs of years past, or add nonsemantic hooks to our markup. Browser support for gradients and multiple backgrounds is still evolving, but as you’ll see in this chapter, it’s possible to develop in a way that supports the latest versions of all major browsers—including IE9. We’ll start by looking at CSS3 gradients—but first, what are gradients? Gradients are smooth transitions between two or more specified colors. In creating gradients, you can specify multiple in-between color values, called color stops. Each color stop is made up of a color and a position; the browser fades the color from each stop to the next to create a smooth gradient. Gradients can be utilized anywhere abackground image can be used. This means that in your CSS, a gradient can be theoretically employed anywhere a url() value can be used, such as background-image, border-image, and even list-style-type, though for now the most consistent support is for background images. By using CSS gradients to replace images, you avoid forcing your users to download extra images, support for flexible layouts is improved, and zooming is no longer pixelated the way it can be with images. There are two types of gradients currently available in CSS3: linear and radial. Let’s go over them in turn. Linear Gradients Linear gradients are those where colors transition across a straight line: from top to bottom, left to right, or along any arbitrary axis. If you’ve spent any time with image-editing tools like Photoshop and Fireworks, you should be familiar with linear gradients—but as a refresher, Figure 7.1 shows some examples. Figure 7.1. Linear gradient examples Similar to image-editing programs, to create a linear gradient you specify a direction, the starting color, the end color, and any color stops you want to add along that line. The browser takes care of the rest, filling the entire element by painting lines of color perpendicular to the line of the gradient. It produces a smooth fade from one color to the next, progressing in the direction you specify. When it comes to browsers and linear gradients, things get a little messy. WebKit first introduced gradients several years ago using a particular and, many argued, convoluted syntax. After that, Mozilla implemented gradients using a simpler and HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 148more straightforward syntax. Then, in January of 2011, the W3C included a proposed syntax in CSS3. The new syntax is very similar to Firefox’s existing implementatiionin fact, it’s close enough that any gradient written with the new syntax will work just fine in Firefox. The W3C syntax has also been adopted byWebKit, though, at the time of writing it’s only in the nightly builds, and yet to make its way into Chrome and Safari; they are still using the old-style syntax. For backwards compatibiilit reasons, those browsers will continue to support the old syntax even once the standard form is implemented. And Opera, with the release of version 11.10, supports the new W3C standard for linear gradients. All the current implementations use vendor prefixes (-webkit-, -moz-, and -o-). WebKit Nightly Builds TheWebKit engine that sits at the heart of Chrome and Safari exists independently as an open source project at http://www.webkit.org/. However, new features implemmente in WebKit take some time to be released in Chrome or Safari. In the meantime, it’s still possible to test these features by installing one of the nightly builds, so-called because they’re built and released on a daily basis, incorporating new features or code changes from a day’s work by the community. Because they’re frequently released while in development, they can contain incomplete features or bugs, and will often be unstable. Still, they’re great if you want to test new features (like the W3C gradient syntax) that are yet to make it into Chrome or Safari. Visit http://nightly.webkit.org/to obtain nightly builds of WebKit for Mac or Windows. That still leaves us with the question of how to handle gradients in IE and older versions of Opera. Fortunately, IE9 and Opera 11.01 and earlier support SVG backgrouundsand it’s fairly simple to create gradients in SVG. (We’ll be covering SVG in more detail in Chapter 11.) And finally, all versions of IE support a proprietary filter that enables the creation of basic linear gradients. Confused? Don’t be. While gradients are important to understand, it’s unnecessary to memorize all the browser syntaxes. We’ll cover the new syntax, as well as the soon-to-be-forgotten old-style WebKit syntax, and then we’ll let you in on a little secret: there are tools that will create all the required styles for you, so there’s no need to remember all the specifics of each syntax. Let’s get started. There’s one linear gradient in The HTML5 Herald, in the second advertisement block shown in Figure 7.2 (which happens to be advertising this very book!). You’ll Something seriously cool has happened in web development! 149 CSS3 Gradients and Multiple Backgroundsnote that the gradient starts off dark at the top, lightens, then darkens again as if to create a road under the cyclist, before lightening again. Figure 7.2. A linear gradient in The HTML5 Herald To create a cross-browser gradient for our ad, we’ll start with the new standard syntax. It’s the simplest and easiest to understand, and likely to be the only one you’ll need to use in a few years’ time. After that, we’ll look at how the olderWebKit and Firefox syntaxes differ from it. The W3C Syntax Here’s the basic syntax for linear gradients: background-image: linear-gradient( … ); Inside those parentheses, you specify the direction of the gradient, and then provide some color stops. For the direction, you can provide either the angle along which the gradient should proceed, or the side or corner from which it should start—in which case it will proceed towards the opposite side or corner. For angles, you use values in degrees (deg). 0deg points to the right, 90deg is up, and so on counterclockkwise For a side or corner, use the top, bottom, left, and right keywords. After specifying the direction, provide your color stops; these are made up of a color and a percentage or length specifying how far along the gradient that stop is located. That’s a lot to take in, so let’s look at some gradient examples. For the sake of illustraatio we’ll use a gradient with just two color stops: #FFF (white) to #000 (black). HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 150To have the gradient go from top to bottom of an element, as shown in Figure 7.3, you could specify any of the following (our examples are using the -moz-prefix, but remember that -webkit-and -o-support the same syntax): background-image: -moz-linear-gradient(270deg, #FFF 0%, #000 100%); background-image: -moz-linear-gradient(top, #FFF 0%, #000 100%); background-image: -moz-linear-gradient(#FFF 0%, #000 100%); Figure 7.3. A white-to-black gradient from the top center to the bottom center of an element The last declaration works because top is the default in the absence of a specified direction. Because the first color stop is assumed to be at 0%, and the last color stop is assumed to be at 100%, you could also omit the percentages from that example and achieve the same result: background-image: -moz-linear-gradient(#FFF, #000); Now, let’s put our gradient on an angle, and place an additional color stop. Let’s say we want to go from black to white, and then back to black again: background-image: -moz-linear-gradient(30deg, #000, #FFF 75%, #000); We’ve placed the color stop 75% along the way, so the white band is closer to the gradient’s end point than its starting point, as shown in Figure 7.4. Something seriously cool has happened in web development! 151 CSS3 Gradients and Multiple BackgroundsFigure 7.4. A gradient with three color stops You can place your first color stop somewhere other than 0%, and your last color stop at a place other than 100%. All the space between 0% and the first stop will be the same color as the first stop, and all the space between the last stop and 100% will be the color of the last stop. Here’s an example: background-image: -moz-linear-gradient(30deg, #000 50%, #FFF 75%, ➥#000 90%); The resulting gradient is shown in Figure 7.5. Figure 7.5. A gradient confined to a narrow band by offsetting the start and end color stops You don’t actually need to specify positions for any of the color stops. If you omit them, the stops will be evenly distributed. Here’s an example: HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 152background-image: -moz-linear-gradient(45deg, #FF0000 0%, #FF6633 20%, #FFFF00 40%, #00FF00 60%, #0000FF 80%, #AA00AA 100%); background-image: -moz-linear-gradient(45deg, #FF0000, #FF6633, #FFFF00, #00FF00, #0000FF, #AA00AA); Either of the previous declarations makes for a fairly unattractive angled rainbow. Note that we’ve added line breaks and indenting for ease of legibility—they are not essential. Colors transition smoothly from one color stop to the next. However, if two color stops are placed at the same position along the gradient, the colors won’t fade, but will stop and start on a hard line. This is a way to create a striped background effect, like the one shown in Figure 7.6. Figure 7.6. Careful placement of color stops can create striped backgrounds Something seriously cool has happened in web development! 153 CSS3 Gradients and Multiple BackgroundsHere are the styles used to construct that example: background-image: -moz-linear-gradient(45deg, #000000 30%, #666666 30%, #666666 60%, #CCCCCC 60%, #CCCCCC 90%); At some point in the reasonably near future, you can expect this updated version of the syntax to be the only one you’ll need to write—but we’re not quite there yet. The Old WebKit Syntax As we’ve mentioned, the latest development version of WebKit has adopted the W3C syntax; however, most current releases of WebKit-based browsers still use an older syntax, which is a little more complicated. Because those browsers still need to be supported, let’s quickly take a look at the old syntax, using our first white-tobllac gradient example again: background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), ➥to(#000000)); Rather than use a specific linear-gradient property, there’s a general-purpose -webkit-gradient property, where you specify the type of gradient (linear in this case) as the first parameter. The linear gradient then needs both a start and end point to determine the direction of the gradient. The start and end points can be specified using percentages, numeric values, or the keywords top, bottom, left, right, or center. The next step is to declare color stops of the gradients. You can include the originattin color with the from keyword, and the end color with the to keyword. Then, you can include any number of intermediate colors using the color-stop() function to create a color stop. The first parameter of the color-stop() function is the position of the stop, expressed as a percentage, and the second parameter is the color at that location. Here’s an example: HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 154background-image: -webkit-gradient(linear, left top, right bottom, from(red), to(purple), color-stop(20%, orange), color-stop(40%, yellow), color-stop(60%, green), color-stop(80%, blue)); With that, we’ve recreated our angled rainbow, reminiscent of GeoCities circa 1996. It’s actually unnecessary to specify the start and end colors using from and to. As from(red) is the equivalent to color-stop(0, red), we could also have written: background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, red), color-stop(20%, orange), color-stop(40%, yellow), color-stop(60%, green), color-stop(80%, blue), color-stop(100%, purple)); If you don’t declare a from or a 0% color stop, the color of the first color stop is used for all the area up to that first stop. The element will have a solid area of the color declared from the edge of the container to the first specified color stop, at which point it becomes a gradient morphing into the color of the next color stop. At and after the last stop, the color of the last color stop is used. In other words, if the first color stop is at 40% and the last color stop is at 60%, the first color will be used from 0% to 40%, and the last color will be displayed from 60% to 100%, with the area from 40% to 60% a gradient morphing between the two colors. As you can see, this is more complicated than the Mozilla syntax. Fortunately, tools exist to generate all the required code for a given gradient automatically. We’ll be looking at some of them at the end of this section, but first, we’ll see how to use both syntaxes to create a cross-browser gradient for The HTML5 Herald. The good news is that since the old WebKit syntax uses a different property name (-webkitgraddien instead of -webkit-linear-gradient), you can use both syntaxes sidebbyside without conflict. In fact, the old syntax is still supported in the newer WebKit, so the browser will just use whichever one was declared last. Something seriously cool has happened in web development! 155 CSS3 Gradients and Multiple BackgroundsPutting It All Together Now that we have a fairly good understanding of how to declare linear gradients, let’s declare ours. If your designer included a gradient in the design, it’s likely to have been created in Photoshop or another image-editing program. You can use this to your advantage; if you have the original files, it’s fairly easy to replicate exactly what your designer intended. If we pop open Photoshop and inspect the gradient we want to use for the ad (shown in Figure 7.7), our gradient is linear, with five color stops that simply change the opacity of a single color (black). Figure 7.7. An example linear gradient in Photoshop You’ll note via the Photoshop screengrab that the color starts from 40% opacity, and that the first color stop’s location is at 37%, with an opacity of 0%. We can use this tool to grab the data for our CSS declaration, beginning with the W3C syntax declaration for Firefox, Opera 11.10, and newer WebKit browsers: css/styles.css (excerpt) #ad2 { ⋮ background-image: -moz-linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 156rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); background-image: -webkit-linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); background-image: -o-linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); } We want the gradient to run from the very top of the ad to the bottom, so we set the angle to 270deg (towards the bottom). We’ve then added all the color stops from the Photoshop gradient. Note that we’ve omitted the end point of the gradient, becaaus the last color stop is at 98%—everything after that stop will be the same color as the stop in question (in this case, black at 0% opacity, or full transparency). Now let’s add in the old WebKit syntax, with the unprefixed version last to futureprroo the declaration: css/styles.css (excerpt) #ad2 { ⋮ background-image: -webkit-gradient(linear, from(rgba(0,0,0,0.4)), color-stop(37%, rgba(0,0,0,0)), color-stop(83%, rgba(0,0,0,0)), color-stop(92%, rgba(0,0,0,0.16)), color-stop(98%, rgba(0,0,0,0))); Something seriously cool has happened in web development! 157 CSS3 Gradients and Multiple Backgroundsbackground-image: -webkit-linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); background-image: linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); } We now have our gradient looking just right in Mozilla, Opera, and WebKit-based browsers. Linear Gradients with SVG We still have a few more browsers to add our linear gradient to. In Opera 11.01 and earlier—and more importantly, IE9—we can declare SVG files as background images. By creating a gradient in an SVG file, and declaring that SVG as the background image of an element, we can recreate the same effect we achieved with CSS3 gradients. SV what? SVG stands for Scalable Vector Graphics. It’s an XML-based language for defining vector graphics using a set of elements—like what you use in HTML to define the structure of a document.We’ll be covering SVG in much more depth in Chapter 11, but for now we’ll just skim over the basics, since all we’re creating is a simple gradient. An SVG file sounds scary, but for creating gradients it’s quite straightforward. Here’s our gradient again, in SVG form: HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 158images/gradient.svg (excerpt) Looking at the SVG file, you should notice that it’s quite similar to the syntax for linear gradients in CSS3. We declare the gradient type and the orientation in the linearGradient element; then add color stops. The orientation is set with start and end coordinates, from x1, y1 to x2, y2. The color stops are fairly self-explanatory, having an offset between 0 and 1 determining their position and a stop-color for their color. After declaring the gradient, we then have to create a rectangle (the rect element) and fill it with our gradient using the style attribute. So, we’ve created a nifty little gradient, but how do we use it on our site? Save the SVG file with the .svg extension. Then, in your CSS, simply declare the SVG as your background image with the same syntax, as if it were a JPEG, GIF, or PNG: css/styles.css (excerpt) #ad2 { ⋮ background-image: url(../images/gradient.svg); ⋮ } The SVG background should be declared before the CSS3 gradients, so browsers that understand both will use the latter. Many browsers are even smart enough not Something seriously cool has happened in web development! 159 CSS3 Gradients and Multiple Backgroundsto download the SVG if it’s overwritten by another background-image property later on in your CSS. The major difference between our CSS linear gradients and the SVG version is that the SVG background image won’t default to 100% of the height and width of the container the way that CSS gradients do. To make the SVG fill the container, declare the height and width of your SVG rectangle as 100%. Linear Gradients with IE Filters For Internet Explorer prior to version 9, we can use the proprietary IE filter syntax to create simple gradients. The IE gradient filter doesn’t support color stops, gradient angle, or, as we’ll see later, radial gradients. All you have is the ability to specify whether the gradient is horizontal or vertical, as well as the “to” and “from” colors. It’s fairly basic, but if you need a gradient on these older browsers, it can provide the solution. The filter syntax for IE is: filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, ➥startColorstr='#COLOR', endColorstr='#COLOR); /* IE6 & IE7 */-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType= ➥0,startColorstr='#COLOR', endColorstr='#COLOR')"; /* IE8 */The GradientType parameter should be set to 1 for a horizontal gradient, or 0 for a vertical gradient. Since the gradient we’re using for our ad block requires color stops, we’ll skip using the IE filters. The ad still looks fine without the gradient, so it’s all good. Filters Kinda Suck As we’ve mentioned before, IE’s filters can have a significant impact on performannce so use them sparingly, if at all. Calculating the display of filter effects takes processing time, with some effects being slower than others. SVGs can have a similar—albeit lesser—effect, so be sure to test your site in a number of browsers if you’re using these fallbacks. HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 160Tools of the Trade Now that you understand how to create linear gradients and have mastered the intriccacie of their convoluted syntax, you can forget almost everything you’ve learned. There are some very cool tools to help you create linear gradients without having to recreate your code four times for each different browser syntax. John Allsop’s http://www.westciv.com/tools/gradients/is a tool that enables you to create gradients with color stops for both Firefox andWebKit. Note that there are separate tabs for Firefox and WebKit, and for radial and linear gradients. The tool only creates gradients with hexadecimal color notation, but it does provide you with copy-and-paste code, so you can copy it, and then switch the hexadecimal color values to RGBA or HSLA if you prefer. Damian Galarza’s http://gradients.glrzad.com/provides for both color stops and RGB. It even lets you set colors with an HSL color picker, but converts it to RGB in the code. It does not provide for alpha transparency, but since the code generated is in RGB, it’s easy to update. This gradient generator is more powerful than the Westciv one, but may be a bit overwhelming for a newbie. Finally, Paul Irish’s http://css3please.com/allows you to create linear gradients, though it has no support for color stops. You may wonder why it’s even worth mentioning—but it is, because it’s the only one of the tools mentioned that provides the filter syntax for IE alongside the other gradient syntaxes. Plus, as well as gradiennts it can give you cross-browser syntax for lots of other features as well, like shadows and rounded corners. Radial Gradients Radial gradients are circular or elliptical gradients. Rather than proceeding along a straight axis, colors blend out from a starting point in all directions. Radial gradients are supported in WebKit and Mozilla (beginning with Firefox 3.6). While Opera 11.10 has begun supporting linear gradients, it does not provide support for radial gradients; however, as with linear gradients, radial gradients can be created in SVG, so support can be provided to Opera and IE9. Radial gradients are entirely unsupported in IE8 and earlier—not even with filters. Something seriously cool has happened in web development! 161 CSS3 Gradients and Multiple BackgroundsThe W3C Syntax Let’s start with a simple circular gradient to illustrate the standard syntax: background-image: -moz-radial-gradient(#FFF, #000); background-image: -moz-radial-gradient(center, #FFF, #000); background-image: -moz-radial-gradient(center, ellipse cover, ➥#FFF, #000); The above three declarations are functionally identical, and will all result in the gradient shown in Figure 7.8. At the minimum, you need to provide a start color and an end color. Alternatively, you can also provide a position for the center of the gradient as the first parameter, and a shape and size as the second parameter. Figure 7.8. A simple, centered radial gradient Let’s start by playing with the position: background-image: -moz-radial-gradient(30px 30px, #FFF, #000); This will place the center of the gradient 30 pixels from the top and 30 pixels from the left of the element, as you can see in Figure 7.9. As with background-position, you can use values, percentages, or keywords to set the gradient’s position. HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 162Figure 7.9. A gradient positioned off center Now let’s look at the shape and size parameter. The shape can take one of two values, circle or ellipse, with the latter being the default. For the size, you can use one of the following values: closest-side The gradient’s shape meets the side of the box closest to its center (for circles), or meets both the vertical and horizontal sides closest to the center (for ellipses). closest-corner The gradient’s shape is sized so it meets exactly the closest corner of the box from its center. farthest-side Similar to closest-side, except that the shape is sized to meet the side of the box farthest from its center (or the farthest vertical and horizontal sides in the case of ellipses). farthest-corner The gradient’s shape is sized so that it meets exactly the farthest corner of the box from its center. contain A synonym for closest-side. Something seriously cool has happened in web development! 163 CSS3 Gradients and Multiple Backgroundscover A synonym for farthest-corner. According to the spec, you can also provide a second set of values to explicitly define the horizontal and vertical size of the radial gradient. This is currently only supported inWebKit, though support should be added to Firefox in the near future. For now, though, you should probably stick to the above constraints if you want to create the same gradient in all supporting browsers. The color stop syntax is the same as for linear gradients: a color value followed by an optional stop position. Let’s look at one last example: background-image: -moz-radial-gradient(30px 30px, circle ➥farthest-side, #FFF, #000 30%, #FFF); This will create a gradient like the one in Figure 7.10. Figure 7.10. A radial gradient with a modified size and shape, and an extra color stop The Old WebKit Syntax To create the example in Figure 7.10 using the old-style WebKit syntax currently supported in Safari and Chrome, you’d need to write it as follows: background-image: -webkit-gradient(radial, 30 30, 0, 30 30, 100%, ➥from(#FFFFFF), to(#FFFFFF), color-stop(.3,#000000)) HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 164The same -webkit-gradient property used earlier for linear gradients is used for radial gradients; the difference is that we pass radial as the first parameter. The next four parameters are the respective position and radius of two circles, with the gradient proceeding from the inner circle to the outer circle. Just to make it more confusing, these values are defined in pixels, but without the px unit. You can also specify the values as percentages, in which case you do need to include the % symbol. You should be starting to see why the W3C opted for a version of the Mozilla syntax rather than this one. Furthermore, your inner circle doesn’t need to be centered in your outer circle. If the first point is equal to the second point, the gradient will be symmetrical like the one in Figure 7.10. If they differ, however, your inner circle will be off-center, so the gradient will be asymmetrical. If your inner circle’s center is outside the boundary of your outer circle, instead of having a circle off-center inside another circle, you’ll have a very odd triangle gradient effect, as Figure 7.11 illustrates. Figure 7.11. The older WebKit radial gradient syntax allowed for some interesting effects Here’s the code used to create that gradient: background-image:-webkit-gradient(radial, 200 200, 100, 100 100, 40, from(#FFFFFF), to(#000000)); As with the linear gradients, you can insert more colors with the color-stop functiion The syntax for color stops is the same for both linear and radial gradients. You’ll generally want to create gradients that look the same in older versions of Chrome and Safari as they do in newer versions of those browsers and Firefox, so Something seriously cool has happened in web development! 165 CSS3 Gradients and Multiple Backgroundsyou should limit yourself to the kinds of gradients that can be replicated using the W3C syntax. However, if you do find yourself building specifically for WebKit browsers (for mobile platforms, for example), it can be useful to know that these additional options exist. As mentioned earlier, the old syntax will continue to be supported in WebKit browsers for the foreseeable future. Putting it All Together Let’s take all we’ve learned and implement a radial gradient for The HTML5 Herald. You may yet to have noticed, but the form submit button has a radial gradient in the background. The center of the radial gradient is outside the button area, towards the left and a little below the bottom, as Figure 7.12 shows. Figure 7.12. A radial gradient on a button in The HTML5 Herald’s sign-up form We’ll want to declare at least three background images: an SVG file for Opera and IE9, the olderWebKit syntax for Chrome and Safari, and the -moz-vendor prefixed version for Firefox. You can also declare the newerWebKit vendor prefixed version (currently only in the WebKit nightly builds), as well as the non-prefixed version: css/styles.css (excerpt) input[type=submit] { ⋮ background-color: #333; /* SVG for IE9 and Opera */background-image: url(../images/button-gradient.svg); /* Old WebKit */background-image: -webkit-gradient(radial, 30% 120%, 0, 30% 120%, 100, color-stop(0,rgba(144,144,144,1)), color-stop(1,rgba(72,72,72,1))); /* W3C for Mozilla */background-image: -moz-radial-gradient(30% 120%, circle, rgba(144,144,144,1) 0%, rgba(72,72,72,1) 50%); /* W3C for new WebKit */HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 166background-image: -webkit-radial-gradient(30% 120%, circle, rgba(144,144,144,1) 0%, rgba(72,72,72,1) 50%); /* W3C unprefixed */background-image: radial-gradient(30% 120%, circle, rgba(144,144,144,1) 0%, rgba(72,72,72,1) 50%); } The center of the circle is 30% from the left, and 120% from the top, so it’s actually below the bottom edge of the container. We’ve included two color stops for the color #484848 (or rgb(72,72,72)) and #909090 (or rbg(144,144,144)). And here’s the SVG file used as a fallback, though we’ll stop short of explaining it here, as the syntax is fairly explanatory and we’ll be covering SVG in Chapter 11: button-gradient.svg (excerpt) Something seriously cool has happened in web development! 167 CSS3 Gradients and Multiple BackgroundsRepeating Gradients Sometimes you’ll find yourself wanting to create a gradient “pattern” that repeats over the background of an element. While linear-repeating gradients can be created by repeating the background image (with background-repeat), there’s no equivalent way to easily create repeating radial gradients. Fortunately, CSS3 comes to the rescue with both a repeating-linear-gradient and a repeating-radial-gradient syntax. The vendor-prefixed repeating-linear-gradient syntax is supported in Firefox 3.6+, Safari 5.0.3+, Chrome 10+, and Opera 11.10+. Gradients with repeating-linear-gradient and repeating-radial-gradient have the same syntax as the nonrepeating versions. Supported in Firefox 3.6, Chrome 10, and the WebKit nightly build (hence, Safari 6), here are examples of what can be created with just a few lines of CSS (again using only the -webkit-prefixed syntax for brevity): .repeat_linear_1 { background-image: -webkit-repeating-linear-gradient(left, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0.1) 30%); }.repeat_radial_2 { background-image: -webkit-repeating-radial-gradient(top left, circle, rgba(0,0,0,0.9), rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 20%); }.multiple_gradients_3 { background-image: -webkit-repeating-linear-gradient(left, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0.1) 30%), -webkit-repeating-radial-gradient(top left, circle, rgba(0,0,0,0.9), rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 20%); } The resulting gradients are shown in Figure 7.13. HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 168Figure 7.13. A few examples of repeating gradients Multiple Background Images You probably noticed that our advertisement with the linear gradient is incomplete: we’re missing the bicycle. Prior to CSS3, adding the bicycle would have required placing an additional element in the markup to contain the new background image. In CSS3, there’s no need to include an element for every background image; it provides us with the ability to add more than one background image to any element, even to pseudo-elements. To understand multiple background images, you need to understand the syntax and values of the various background properties. The syntax for the values of all the background properties, including background-image and the shorthand background property, are the same whether you have one background image or many. To make a declaration for multiple background images, simply separate the values for each individual image with a comma. For example: background-image: url(firstImage.jpg), url(secondImage.gif), url(thirdImage.png); This works just as well if you’re using the shorthand background property: background: url(firstImage.jpg) no-repeat 0 0, url(secondImage.gif) no-repeat 100% 0, url(thirdImage.png) no-repeat 50% 0; Something seriously cool has happened in web development! 169 CSS3 Gradients and Multiple BackgroundsThe background images are layered one on top of the other with the first declaration on top, as if it had a high z-index. The final image is drawn under all the images preceding it in the declaration, as if it had a low z-index. Basically, think of the images as being stacked in reverse order: first on top, last on the bottom. If you want to declare a background color—which you should, especially if it’s light-colored text on a dark-colored background image—declare it last. It’s often simpler and more readable to declare it separately using the background-color property. As a reminder, the shorthand background property is short for eight longhand background properties. If you use the shorthand, any longhand background property value that’s omitted from the declaration will default to the longhand property’s default (or initial) value. The default values for the various background properties are listed below: ■ background-color: transparent; ■ background-image: none; ■ background-position: 0 0; ■ background-size: auto; ■ background-repeat: repeat; ■ background-clip: border-box; ■ background-origin: padding-box; ■ background-attachment: scroll; Just like for a declaration of a single background image, you can include a gradient as one of several background images. Here’s how we do it for our advertisement. For brevity, only the unprefixed version is shown. The bicycle image would be incluude similarly in each background-image declaration: css/styles.css (excerpt) #ad2 { ⋮ background-image: url(../images/bg-bike.png), linear-gradient(top, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 170rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98%); background-position: 50% 88%, 0 0; } Note that we’ve put the bicycle picture first in the series of background images, since we want the bicycle to sit on top of the gradient, instead of the other way around. We’ve also declared the background position for each image by putting them in the same order as the images were declared in the background-image property. If only one set of values was declared—for example, background-position: 50% 88%;—all images would have the same background position as if you’d declared background-position: 50% 88%, 50% 88%;. In this case, the 50% 80% positions the bicycle, which was declared first, and the 0 0 (or left top) positions the gradient. Because a browser will only respect one background-image property declaration (whether it has one or many images declared), the bicycle image must be included in each background-image declaration, since they’re all targeting different browsers. Remember, browsers ignore CSS that they fail to understand. So if Safari doesn’t understand -moz-linear-gradient (which it doesn’t), it will ignore the entire property/value pair. The heading on our sign-up form also has two background images. While we could attach a single extra-wide image in this case, spanning across the entire form, there’s no need! With multiple background images, CSS3 allows us to attach two separate small images, or a single image sprite twice with different background positions. This saves on bandwidth, of course, but it could also be beneficial if the heading needed to stretch; a single image would be unable to accommodate differently sized elements. This time, we’ll use the background shorthand: background: url(../images/bg-formtitle-left.png) left 13px no-repeat, url(../images/bg-formtitle-right.png) right 13px no-repeat; Something seriously cool has happened in web development! 171 CSS3 Gradients and Multiple BackgroundsThe background Shorthand When all the available background properties are fully supported, the following two statements will be equivalent: div { background: url("tile.png") no-repeat scroll center ➥bottom /cover rgba(0, 0, 0, 0.2); }div { background-color: rgba(0,0,0,0.2); background-position: 50% 100%; background-size: cover; background-repeat: no-repeat; background-clip: border-box; background-origin: padding-box; background-attachment: scroll; background-image: url(form.png); } Currently, though, since only some browsers support all the values available, we recommend including color, position, repeat, attachment, and image in your shorthand declaration, with clip, origin, and size following, or avoiding the shorthand altogether. You must declare the shorthand before the longhand properties, as any value not explicitly declared in the shorthand will be treated as though you’d declared the default value. Background Size The background-size property allows you to specify the size you want your backgrooun images to have. In theory, you can include background-size within the shorthand background declaration by adding it after the background’s position, separated with a slash (/). As it stands, no browser understands this shorthand; in fact, it will cause them to ignore the entire background declaration, since they see it as incorrectly formatted. As a result, you’ll want to use the background-size property as a separate declaration instead. Support for background-size is as follows: ■ Opera 11.01+: background-size (unprefixed) HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 172■ Safari and Chrome: current versions support unprefixed, but older versions requuir -webkit-background-size ■ Firefox: -moz-background-size for 3.6, background-size for 4+ ■ IE9: background-size As you can see, adoption of the unprefixed version of this syntax was very quick; it’s a simple property with a straightforward implementation that was unlikely to change. This is a great example of why you should always include the unprefixed version in your CSS. If declaring the background image size in pixels, be careful to avoid the image distortting define either the width or the height, not both, and set the other value to auto. This will preserve the aspect ratio of your image. If you only include one value, the second value is assumed to be auto. In other words, both these lines have the same meaning: background-size: 100px auto, auto auto; background-size: 100px, auto auto; As with all background properties, use commas to separate values for each image declared. If we wanted our bicycle to be really big, we could declare: -webkit-background-size: 100px, cover; -moz-background-size: 100px, cover; -o-background-size: 100px, cover; background-size: 100px auto, cover; By declaring just the width of the image, the second value will default to auto, and the browser will determine the correct height of the image based on the aspect ratio. The default size of a background image is the actual size of the image. Sometimes the image is just a bit smaller or larger than its container. You can define the size of your background image in pixels (as shown above) or percentages, or you can use the contain or cover key terms. The contain value scales the image while preserving its aspect ratio; this may leave uncovered space. The cover value scales the image so that it completely covers the Something seriously cool has happened in web development! 173 CSS3 Gradients and Multiple Backgroundselement. This can result in clipping the image if the element and its background image have different aspect ratios. Screen Pixel Density, or DPI The background-size property comes in handy for devices that have different pixel densities, such as the newest generation of smartphones. For example, the iPhone 4 has a pixel density four times higher than previous iPhones; however, to prevent pages designed for older phones from looking tiny, the browser on the iPhone 4 behaves as though it only has a 320×480px display. In essence, every pixel in your CSS corresponds to four screen pixels. Images are scaled up to compensate, but this means they can sometimes look a little rough compared to the smoothness of the text displayed. To deal with this, you can provide higher-resolution images to the iPhone 4. For example, if we were providing a high-resolution image of a bicycle for the iPhone, it would measure 74×90px instead of 37×45px. However, we don’t actually want it to be twice as big! We only want it to take up 37×45px worth of space. We can use background-size to ensure that our high-resolution image still takes up the right amount of space: -webkit-background-size: 37px 45px, cover; -moz-background-size: 37px 45px, cover; -o-background-size: 37px 45px, cover; background-size: 37px 45px, cover; In the Background That’s all for CSS3 backgrounds and gradients. In the next chapter, we’ll be looking at transforms, animations, and transitions. These allow you to add dynamic effects and movement to your pages without relying on bandwidth-and processor-heavy JavaScript. HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 174Chapter11 Canvas, SVG, and Drag and Drop The HTML5 Herald is really becoming quite dynamic for an “ol’ timey” newspaper! We’ve added a video with the new video element, made our site available offline, added support to remember the user’s name and email address, and used geolocation to detect the user’s location. But there’s still more we can do to make it even more fun. First, the video is a little at odds with the rest of the paper, since it’s in color. Second, the geolocation feature, while fairly speedy, could use a progress indicator that lets the user know we haven’t left them stranded. And finally, it would be nice to add just one more dynamic piece to our page. We’ll take care of all three of these using the APIs we’ll discuss in this chapter: Canvas, SVG, and Drag and Drop. Canvas With HTML5’s Canvas API, we’re no longer limited to drawing rectangles on our sites. We can draw anything we can imagine, all through JavaScript. This can imprrov the performance of our websites by avoiding the need to download images off the network.With canvas, we can draw shapes and lines, arcs and text, gradients and patterns. In addition, canvas gives us the power to manipulate pixels in imagesand even video. We’ll start by introducing some of the basic drawing features of canvas, but then move on to using its power to transform our video—taking our modern-looking color video and converting it into conventional black and white to match the overall look and feel of The HTML5 Herald. The Canvas 2D Context spec is supported in: ■ Safari 2.0+ ■ Chrome 3.0+ ■ Firefox 3.0+ ■ Internet Explorer 9.0+ ■ Opera 10.0+ ■ iOS (Mobile Safari) 1.0+ ■ Android 1.0+ A Bit of Canvas History Canvas was first developed by Apple. Since they already had a framework—Quartz 2D—for drawing in two-dimensional space, they went ahead and based many of the concepts of HTML5’s canvas on that framework. It was then adopted by Mozilla and Opera, and then standardized by the WHATWG (and subsequently picked up by the W3C, along with the rest of HTML5). There’s some good news here. If you aspire to do development for the iPhone or iPad (referred to jointly as iOS), or for the Mac, what you learn in canvas should help you understand some of the basics concepts of Quartz 2D. If you already develop for the Mac or iOS and have worked with Quartz 2D, many canvas concepts will look very familiar to you. Creating a canvas Element The first step to using canvas is to add a canvas element to the page: canvas/demo1.html (excerpt) Sorry! Your browser doesn’t support Canvas. HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 266The text in between the canvas tags will only be shown if the canvas element is not supported by the visitor’s browser. Since drawing on the canvas is done using JavaScript, we’ll need a way to grab the element from the DOM. We’ll do so by giving our canvas an id: canvas/demo1.html (excerpt) Sorry! Your browser doesn’t support Canvas. All drawing on the canvas happens via JavaScript, so let’s make sure we’re calling a JavaScript function when our page is ready.We’ll add our jQuery document ready check to a script element at the bottom of the page: canvas/demo1.html (excerpt) The canvas element takes both a width and height attribute, which should also be set: canvas/demo1.html (excerpt) Sorry! Your browser doesn’t support Canvas. Finally, let’s add a border to our canvas to visually distinguish it on the page, using some CSS. Canvas has no default styling, so it’s difficult to see where it is on the page unless you give it some kind of border: css/canvas.css (excerpt) #myCanvas { border: dotted 2px black; } Something seriously cool has happened in web development! 267 Canvas, SVG, and Drag and DropNow that we’ve styled it, we can actually view the canvas container on our page —Figure 11.1 shows what it looks like. Figure 11.1. An empty canvas with a dotted border Drawing on the Canvas All drawing on the canvas happens via the Canvas JavaScript API. We’ve called a function called draw() when our page is ready, so let’s go ahead and create that function.We’ll add the function to our script element. The first step is to grab hold of the canvas element on our page: canvas/demo1.html (excerpt) Getting the Context Once we’ve stored our canvas element in a variable, we need to set up the canvas’s context. The context is the place where your drawing is rendered. Currently, there’s only wide support for drawing to a two-dimensional context. The W3C Canvas spec defines the context in the CanvasRenderingContext2D object. Most methods we’ll be using to draw onto the canvas are methods of this object. HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 268We obtain our drawing context by calling the getContext method and passing it the string "2d", since we’ll be drawing in two dimensions: canvas/demo1.html (excerpt) function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); } The object that’s returned by getContext is a CanvasRenderingContext2D object. In this chapter, we’ll refer to it as simply “the context object” for brevity. WebGL WebGL is a new API for 3D graphics being managed by the Khronos Group, with a WebGL working group that includes Apple, Mozilla, Google, and Opera. By combining WebGL with HTML5 Canvas, you can draw in three dimensions. WebGL is currently supported in Firefox 4+, Chrome 8+, and Safari 6. To learn more, see http://www.khronos.org/webgl/. Filling Our Brush with Color On a regular painting canvas, before you can begin, you must first saturate your brush with paint. In the HTML5 Canvas, you must do the same, and we do so with the strokeStyle or fillStyle properties. Both strokeStyle and fillStyle are set on a context object. And both take one of three values: a string representing a color, a CanvasGradient, or a CanvasPattern. Let’s start by using a color string to style the stroke. You can think of the stroke as the border of the shape you’re going to draw. To draw a rectangle with a red border, we first define the stroke color: canvas/demo1.html (excerpt) function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.strokeStyle = "red"; } Something seriously cool has happened in web development! 269 Canvas, SVG, and Drag and DropTo draw a rectangle with a red border and blue fill, we must also define the fill color: canvas/demo1.html (excerpt) function draw() { ⋮ context.fillStyle = "blue"; } We can use any CSS color value to set the stroke or fill color, as long as we specify it as a string: a hexadecimal value like #00FFFF, a color name like red or blue, or an RGB value like rgb(0, 0, 255).We can even use RGBA to set a semitransparent stroke or fill color. Let’s change our blue fill to blue with a 50% opacity: canvas/demo1.html (excerpt) function draw() { ⋮ context.fillStyle = "rgba(0, 0, 255, 0.5)"; } Drawing a Rectangle to the Canvas Once we’ve defined the color of the stroke and the fill, we’re ready to actually start drawing! Let’s begin by drawing a rectangle.We can do this by calling the fillRect and strokeRect methods. Both of these methods take the X and Y coordinates where you want to begin drawing the fill or the stroke, and the width and the height of the rectangle.We’ll add the stroke and fill 10 pixels from the top and 10 pixels from the left of the canvas’s top left corner: canvas/demo1.html (excerpt) function draw() { ⋮ context.fillRect(10,10,100,100); context.strokeRect(10,10,100,100); } This will create a semitransparent blue rectangle with a red border, like the one in Figure 11.2. HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 270Figure 11.2. A simple rectangle—not bad for our first canvas drawing! The Canvas Coordinate System As you may have gathered, the coordinate system in the canvas element is different from the Cartesian coordinate system you learned in math class. In the canvas coordiinat system, the top-left corner is (0,0). If the canvas is 200 pixels by 200 pixels, then the bottom-right corner is (200, 200), as Figure 11.3 illustrates. Figure 11.3. The canvas coordinate system goes top-to-bottom and left-to-right Variations on fillStyle Instead of a color as our fillStyle, we could have also used a CanvasGradient or a CanvasPattern. Something seriously cool has happened in web development! 271 Canvas, SVG, and Drag and DropWe create a CanvasPattern by calling the createPattern method. createPattern takes two parameters: the image to create the pattern with, and how that image should be repeated. The repeat value is a string, and the valid values are the same as those in CSS: repeat, repeat-x, repeat-y, and no-repeat. Instead of using a semitransparent blue fillStyle, let’s create a pattern using our bicycle image. First, we must create an Image object, and set its src property to our image: canvas/demo2.html (excerpt) function draw() { ⋮ var img = new Image(); img.src = "../images/bg-bike.png"; } Setting the src attribute will tell the browser to start downloading the image—but if we try to use it right away to create our gradient, we’ll run into some problems, because the image will still be loading. So we’ll use the image’s onload property to create our pattern once the image has been fully loaded by the browser: canvas/demo2.html (excerpt) function draw() { ⋮ var img = new Image(); img.src = "../images/bg-bike.png"; img.onload = function() { }; } In our onload event handler, we call createPattern, passing it the Image object and the string repeat, so that our image repeats along both the X and Y axes. We store the results of createPattern in the variable pattern, and set the fillStyle to that variable: HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 272canvas/demo2.html (excerpt) function draw() { ⋮ var img = new Image(); img.src = "../images/bg-bike.png"; img.onload = function() { pattern = context.createPattern(img, "repeat"); context.fillStyle = pattern; context.fillRect(10,10,100,100); context.strokeRect(10,10,100,100); }; } Anonymous Functions You may be asking yourself, “what is that function statement that comes right before the call to img.onload?” It’s an anonymous function. Anonymous functions are much like regular functions except, as you might guess, they don’t have names. When you see an anonymous function inside of an event listener, it means that the anonymous function is being bound to that event. In other words, the code inside that anonymous function will be run when the load event is fired. Now, our rectangle’s fill is a pattern made up of our bicycle image, as Figure 11.4 shows. Figure 11.4. A pattern fill on a canvas Something seriously cool has happened in web development! 273 Canvas, SVG, and Drag and DropWe can also create a CanvasGradient to use as our fillStyle. To create a CanvasGradient, we call one of two methods: createLinearGradient(x0, y0, x1, y1) or createRadialGradient(x0, y0, r0, x1, y1, r1); then we add one or more color stops to the gradient. createLinearGradient’s x0 and y0 represent the starting location of the gradient. x1 and y1 represent the ending location. To create a gradient that begins at the top of the canvas and blends the color down to the bottom, we’d define our starting point at the origin (0,0), and our ending point 200 pixels down from there (0,200): canvas/demo3.html (excerpt) function draw() { ⋮ var gradient = context.createLinearGradient(0, 0, 0, 200); } Next, we specify our color stops. The color stop method is simply addColorStop(offset, color). The offset is a value between 0 and 1. An offset of 0 is at the starting end of the gradient, and an offset of 1 is at the other end. The color is a string value that, as with the fillStyle, can be a color name, a hexadecimal color value, an rgb() value, or an rgba() value. To make a gradient that starts as blue and begins to blend into white halfway down the gradient, we can specify a blue color stop with an offset of 0 and a purple color stop with an offset of 1: canvas/demo3.html (excerpt) function draw() { ⋮ var gradient = context.createLinearGradient(0, 0, 0, 200); gradient.addColorStop(0,"blue"); gradient.addColorStop(1,"white"); context.fillStyle = gradient; context.fillRect(10,10,100,100); context.strokeRect(10,10,100,100); } HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 274Figure 11.5 is the result of setting our CanvasGradient to be the fillStyle of our rectangle. Figure 11.5. Creating a linear gradient with Canvas Drawing Other Shapes by Creating Paths We’re not limited to drawing rectangles—we can draw any shape we can imagine! Unlike rectangles and squares, however, there’s no built-in method for drawing circles, or other shapes. To draw more interesting shapes, we must first lay out the path of the shape. Paths create a blueprint for your lines, arcs, and shapes, but paths are invisible until you give them a stroke! When we drew rectangles, we first set the strokeStyle and then called fillRect. With more complex shapes, we need to take three steps: lay out the path, stroke the path, and fill the path. As with drawing rectangles, we can just stroke the path, or fill the path—or we can do both. Let’s start with a simple circle: canvas/demo4.html (excerpt) function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); } Something seriously cool has happened in web development! 275 Canvas, SVG, and Drag and DropNow we need to create an arc. An arc is a segment of a circle; there’s no method for creating a circle, but we can simply draw a 360° arc. We create it using the arc method: canvas/demo4.html (excerpt) function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(50, 50, 30, 0, Math.PI*2, true); } The arguments for the arc method are as follows: arc(x, y, radius, startAngle, endAngle, anticlockwise). x and y represent where on the canvas you want the arc’s path to begin. Imagine this as the center of the circle that you’ll be drawing. radius is the distance from the center to the edge of the circle. startAngle and endAngle represent the start and end angles along the circle’s circumfeerenc that you want to draw. The units for the angles are in radians, and a circle is 2π radians. We want to draw a complete circle, so we will use 2π for the endAngle. In JavaScript, we can get this value by multiplying Math.PI by 2. anticlockwise is an optional argument. If you wanted the arc to be drawn counterclocckwis instead of clockwise, you would set this value to true. Since we are drawing a full circle, it doesn’t matter which direction we draw it in, so we omit this argument. Our next step is to close the path, since we’ve now finished drawing our circle. We do that with the closePath method: canvas/demo4.html (excerpt) function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 276context.arc(100, 100, 50, 0, Math.PI*2, true); context.closePath(); } Now we have a path! But unless we stroke it or fill it, we’ll be unable to see it. Thus, we must set a strokeStyle if we would like to give it a border, and we must set a fillStyle if we’d like our circle to have a fill color. By default, the width of the stroke is 1 pixel—this is stored in the lineWidth property of the context object. Let’s make our border a bit bigger by setting the lineWidth to 3: canvas/demo4.html (excerpt) function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(50, 50, 30, 0, Math.PI*2, true); context.closePath(); context.strokeStyle = "red"; context.fillStyle = "blue"; context.lineWidth = 3; } Lastly, we fill and stroke the path. Note that this time, the method names are different than those we used with our rectangle. To fill a path, you simply call fill, and to stroke it you call stroke: canvas/demo4.html (excerpt) function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(100, 100, 50, 0, Math.PI*2, true); context.closePath(); context.strokeStyle = "red"; context.fillStyle = "blue"; context.lineWidth = 3; context.fill(); context.stroke(); } Something seriously cool has happened in web development! 277 Canvas, SVG, and Drag and DropFigure 11.6 shows the finished circle. Figure 11.6. Our shiny new circle To learn more about drawing shapes, the Mozilla Developer Network has an excellent tutorial.1 Saving Canvas Drawings If we create an image programmatically using the Canvas API, but decide we’d like to have a local copy of our drawing, we can use the API’s toDataURL method to save our drawing as a PNG or JPEG file. To preserve the circle we just drew, we could add a new button to our HTML, and open the canvas drawing as an image in a new window once the button is clicked. To do that, let’s define a new JavaScript function: canvas/demo5.html (excerpt) function saveDrawing() { var canvas = document.getElementById("myCanvas"); window.open(canvas.toDataURL("image/png")); } Next, we’ll add a button to our HTML and call our function when it’s clicked: 1 https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes HTML5 & CSS3 for the Real World (www.sitepoint.com) HTML5 & CSS3 for the Real World 278canvas/demo5.html (excerpt) Sorry! Your browser doesn’t support Canvas. ⋮