Mobile HTML5: Chapter Files


Back to Top

Chapter 1

Setting the Stage to Learn Mobile HTML5, CSS3, and JS APIs

SDKs, Emulators and Simulators

Online Tools, Device Labs and Testing Tools

Browser / OS statistics

Back to Top

Chapter 2

Upgrading to HTML5

Back to Top

Chapter 3

Elements That Are New in HTML5

Back to Top

Chapter 4

HTML5 Web Forms

Examples of the new and old <input> types

Other Form Features

Special Links

Back to Top

Chapter 5

SVG, Canvas, Audio, and Video





Back to Top

Chapter 6

Other HTML5 APIs

Going Offline


Web Workers



Back to Top

Chapter 7

Upgrading to CSS3

Back to Top

Chapter 8

Expanding Options with CSS3 Values

Back to Top

Chapter 9

CSS3: Modules, Models, and Images



How would you make the speech bubble tail occur on the right or the left of the content, instead of below it?

The code for the rounded corners is in the chapter files

These equivalent gradients will create a rainbow with red on top, fading into orange, yellow, green, blue, then purple equally over the height of the element, as seen in the chapter files.

There is a link to an explanation of old webkit linear gradients in the chapter files.

By using alpha transparency instead of solid colors, we are able to create the iPhone native application look, as demonstrated in the chapter files.

While it is important to understand how to create linear gradients, which is why we went into great detail above, sometimes it is easier to use a tool. The chapter files have links to resources, tools, and gradient libraries, to help you get up and running.

If you put a very wide negative horizontal offset on a text shadow, you may inadvertently cover the preceding text (there is an example in the chapter files).

Drop shadows will always be drawn behind the box, as if it had a lower z-index, and do not show through alpha transparent boxes (unlike alpha transparent text, where the shadows show through), as shown in the chapter files.

Back to Top

Chapter 10

CSS3: Transforms, Transitions, andAnimations

This may be a lot to grasp, so let's go over the various transition values. There are no screenshots in this section, since "effects" are hard to perceive in print. However, there are examples in the chapter files.

Back to Top

Chapter 11

CSS Features in Responsive Web Design

The above code snippet1 will create a multicolumn layout in a large device, and display in a single column on a device (or parent) narrower than 480 px + 4 ems, as shown in Figure 11-1, with examples in the chapter files.

At this point, you hopefully have a good understanding of how to create a border image. There are a few tools to help you along. There are links to these tools and the demo of our button, arrow, and stamp in the chapter files.

If you look at the chapter files, you'll notice that the divs are now flowing horizontally, as if we had floated them left, except that no matter how much content you add to e Check out the chapter files for the more up-to-date property and value syntaxes. Note that the order is set on the <aside>, making it appear first, as seen in the example in the chapter files.

dditional HTTP request, the savings of bytes can be worth it. In the chapter example, the original high DPI PNG was 551 KB. Converting the PNG to a JPEG with no transparency brought the image to 88 KB, and the monotone luminance mask is only 4 KB, for a total of 92 KB: a huge savings over the transparent PNG.

Back to Top

Chapter 12

Designing Mobile Applications

Design Patterns

The chapter files provide links to resources listing some of the current mobile browser pitfalls.


Back to Top

Chapter 13

Targeting Mobile Devices and Touch


Other links

Going Native

Back to Top

Chapter 14

Mobile Performance

Back to Top


Back to Top