The Book of CSS3: A Developer's Guide to the Future of Web Design
Peter Gasston
Language: English
Pages: 308
ISBN: 1593275803
Format: PDF / Kindle (mobi) / ePub
CSS3 is the technology behind most of the eye-catching visuals on the Web today, but the official documentation can be dry and hard to follow. Luckily, The Book of CSS3 distills the heady technical language of the CSS3 specification into plain English, so you can get started on your next project right away.
With real-world examples and a focus on results, The Book of CSS3 shows you how to transform ordinary text into stunning, richly detailed web pages fit for any browser. You'll master the latest cutting-edge CSS features, like multi-column layouts, borders and box effects, and new color and opacity settings. You'll also learn how to:
* Stylize text with fully customizable outlines, drop shadows, and other effects
* Create, position, and resize unlimited background images on the fly
* Spice up static web pages with event-driven transitions and animations
* Apply 2D and 3D transformations to text and images
* Use linear and radial gradients to create smooth color transitions
* Tailor a website's appearance to smartphones and other devices
From the simplest blog layout to the most feature-rich web portal, The Book of CSS3 puts the whole wide world of web design at your fingertips. The future of web design is now—what will you create with it?
5 Reasons to Start Using CSS3 from the Author
* Device-responsive pages
The big growth area of web browsing is on smartphone and tablet devices such as Android, iPhone and iPad. New media features and page layout modules in CSS3 let you make pages which respond to the capabilities of the device that's viewing them, automatically optimizing your content for multiple screen sizes and giving your visitors a tailored experience.
* Eye candy!
CSS3 brings web documents to life without complicated JavaScript. Rotate, scale and skew page elements in both two and three dimensions, add smooth transitional animations to elements when their values change, and go even further with keyframe animations which give you fine control over the behavior of your page elements.
* A better reading experience
The web was made for reading text, but for years we've had to use a handful of fonts in a very conservative way. CSS3 brings the power to use any font you wish, to decorate the text with drop shadows and outlining, plus new ways of laying out the text such as in multiple columns, like a newspaper or magazine.
* Easier to maintain
Using CSS2.1 usually means adding images (and extra markup) to your documents in order to achieve what should be simple effects. Something as basic as adding rounded corners to an element can mean using up to four extra empty elements to accommodate the graphics required to fake the appearance. CSS3 was created to address just these problems, so you can add rounded corners, drop shadows, gradient backgrounds and much more without writing unnecessary markup or creating multiple image files -- meaning a lot less work to make and maintain your documents.
* Cleaner code
The greatly expanded range of selectors in CSS3 means you can add special formatting to links depending on their destination, loop through long tables and lists, even select form elements depending on their current state -- all without having to clutter your code with surplus class attributes.
Google Maps JavaScript API Cookbook
Building the Realtime User Experience: Creating Immersive and Interactive Websites
Build Your Own Database Driven Web Site Using PHP & MySQL
Designing Evolvable Web APIs with ASP.NET
selector makes bold every second child (the first and third paragraphs). Compare that to the result of my second example rule () in Figure 4-2. The nth-of-type(2n) selector ignores the h2 and applies a bold weight to every second instance of the three elements of type p—that is, only the second paragraph. Figure 4-1. The result of using the nth-child selector Figure 4-2. The result of using the nth-of-type selector As I mentioned before, and as you can no doubt deduce from the
only form elements are able to have states: The textarea has a disabled attribute, and the input of type checkbox has a checked attribute. No enabled attribute exists—elements that are not disabled are, by definition, classed as enabled, so an enabled pseudo-class is also available, giving you three user-state pseudo-class selectors: :checked {} :disabled {} :enabled {} To see the effect of these,
example that should make it clearer: div { border-top-right-radius: 20px 20px; } This syntax will round the top-right corner of a div element with a radius of 20px horizontally and vertically, which is a regular curve. In fact, for regular curves border-radius lets you simplify even further by leaving out either the x or the y value; if one value is not specified, both are assumed to be equal. So if you wanted to apply that radius to each corner of your element, you would use this code: div
conditions must be in place: an initial value, an end value, the transition itself, and a trigger. Here’s an example of those four conditions in a very simple transition: div { background-color: black; transition: background-color 2s; } div:hover { background-color: silver; } The div element provides the initial value (background-color: black) and the transition (background-color 2s). Don’t worry about the syntax just yet; I’ll explain everything in due course. The trigger is the :hover
No No text-align-last No No No Yes word-wrap Yes Yes Yes Yes text-wrap No No No No text-rendering No Yes No No Multiple Columns (Chapter 7) WebKit Firefox Opera IE column-count Yes (with prefix) Yes (with prefix) No No column-width Yes (with prefix) Yes (with prefix) No No column-gap Yes (with prefix) Yes (with prefix) No No column-rule Yes (with