Browser / OS statistics
Back to TopExamples of the new and old <input> types
Other Form Features
Special Links
Back to Top
CANVAS
WebGL
VIDEO, AUDIO
Going Offline
GeoLocation
Web Workers
Microdata
ARIA Back to Top
NOT COVERED IN THIS BOOK
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 TopThis 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.
Bouncing ball animation example
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. http://www.w3.org/TR/css-masking/
Back to TopDesign Patterns
The chapter files provide links to resources listing some of the current mobile browser pitfalls.
Back to Top