New possible uses of CSS appear every day, and you shouldn’t miss any of them. This eBook “Mastering CSS3” features recent CSS3 techniques, a detailed overview of advanced CSS3 pseudo-classes, CSS3 Flexbox, CSS animations and 3D transforms and modern techniques for constructing page layouts, among others.
Can you really replace Photoshop with visual CSS3 techniques? Does CSS3 actually improve the speed of development and maintenance? What about common considerations for older browsers? You can be sure to gain insights from case-studies presented in this eBook.
TABLE OF CONTENTS
- CSS3 vs. CSS: A Speed Benchmark
- Why We Should Start Using CSS3 And HTML5 Today
- Connecting The Dots With CSS3
- An Introduction To CSS3 Keyframe Animations
- The New Hotness: Using CSS3 Visual Effects
- Adventures In The Third Dimension: CSS 3D Transforms
- How To Use CSS3 Pseudo-Classes
- CSS3 Flexible Box Layout Explained
- The Guide To CSS Animation: Principles And Examples
- Beercamp: An Experiment With CSS 3D
- Using CSS3: Older Browsers And Common Considerations
- Formats: PDF, EPUB, Kindle (DRM-free)
- Pages: 251 pages
- Language: English
- Released: May 2012
- Publisher: Smashing Media GmbH
- ISBN: 978-3-943075-27-4
Excerpt From Chapter 1
CSS3 vs. CSS: A Speed Benchmark — by
I believe in the power, speed and “update-ability” of CSS3. Not having to load background images as structural enhancements (such as PNGs for rounded corners and gradients) can save time in production (i.e. billable hours) and loading (i.e. page speed). At our company, we’ve happily been using CSS3 on client websites for over a year now, and I find that implementing many of these properties right now is the most sensible way to build websites.
Until today, all of that was based on an assumption: that I can produce a pixel-perfect Web page with CSS3 quicker than I can with older image based CSS methods, and that the CSS3 page will load faster, with a smaller overall file size and fewer HTTP requests. As a single use case experiment, I decided to design and code a Web page and add visual enhancements twice: once with CSS3, and a second time using background images sliced directly from the PSD. I timed myself each round that I added the enhancements, and when finished, I used Pingdom to measure the loading times.
Excerpt From Chapter 7
How To Use CSS3 Pseudo-Classes — by
CSS3 is a wonderful thing, but it’s easy to be bamboozled by the transforms and animations (many of which are vendor-specific) and forget about the nuts-and-bolts selectors that have also been added to the specification. A number of powerful new pseudo-selectors (16 are listed in the latest W3C spec) enable us to select elements based on a range of new criteria.
Sixteen new pseudo-classes have been introduced as part of the W3C’s CSS Proposed Recommendation, and they are broken down into four groups: structural pseudo-classes, pseudo-classes for the states of UI elements, a target pseudo-class and a negation pseudo-class.