BubbleStream

Charles Wyke-Smith

Visual Stylin' with CSS3

Synopsis

Visual Stylin' with CSS3 shows the latest CSS techniques for creating modern web sites. It covers how to use code, rather than graphic elements, to create rounded corners, text and box shadows, and opacity. There are example of animated transitions and transformations, and many other digital design techniques. It is easy to copy the examples and use them in your own work. I used many of the techniques in this book as I concurrently designed Bublish.
Visual Stylin' with CSS3 shows the latest CSS techniques for creating modern web sites. It covers how to use code, rather than graphic elements, to create rounded corners, text and box shadows, and opacity. There are example of animated transitions and transformations, and many other digital design techniques. It is easy to copy the examples and use them in your own work. I used many of the techniques in this book as I concurrently designed Bublish.

Author Biography

Author Insight

Designing for the Modern Web - Fallbacks

Modern Web browsers are far more powerful than most user realize, with extensive capabilities to provide rich multimedia experiences that include video, audio, local storage and the capability to display visual effects that match the best page layout programs. Older browser, however, cannot support many of these new features, so in the excerpt I discuss strategies called fallbacks that ensure users of modern browsers get the full experience of your site's design, while users of older browser get a less rich, but still acceptable, experience.

Book Excerpt

Visual Stylin' with CSS3

Browser FallbacksCSS3 is changing the look of the Web, but not all features are supported by all browsers, so we have to provide fallbacks. Fallbacks are alternative code that we provide for browsers that do not support certain features. With CSS, sometimes fallbacks are not required (because the non-CSS3 effect is considered acceptable, such as regular square corners instead of rounded ones), or a fallback can easily be written, such as a regular border styling for IE in place of a border image. Occasionally, a more complex solution that also involves JavaScript is needed. You have to decide on the importance of a particular CSS3 feature if it is not well-supported and the fallback is complex.You can provide fallbacks to browsers that need them on a case-by-case basis using Modernizr. This JavaScript file adds classes to the head tag of each page as it loads in the user's browser, identifying which HTML5 and CSS3 features that browser supports. Using these classes, you can provide alternative CSS based on the browser's support of a particular feature.Using Modernizr completely eliminates the question: “What browsers should we support?". The new question becomes: ”Do we need to provide an alternative solution for browsers that don't support this feature?”. The answer is often “No”, but if it's “Yes”, then Modernizr lets you provide that alternative as needed.With all this in mind, I'll cover the CSS3 features that provide the most benefits for the overall look of your designs, and that also have levels of support in modern browsers that make them usable today.