W3Avenue

As CSS3 specifications slowly progress through various stages of development; we see more and more features being implemented in web browsers with every new release. This has provided web developers with an opportunity to experiment, play and even use some of these features today.

CSS3 adds many useful new features, enabling you to create stunning presentation and design. But it also brings new challenges, specially due to different level of support for different features in different web browser.

To help you quickly learn and overcome some of these challenges, we have compiled this list of resources providing useful tips, tricks and techniques.

Browser Support

One of the biggest challenge you will face when trying to implement CSS3 in your projects is different level of browser support. Your knowledge about which feature is supported in which web browser is therefore critical. Here are some resources that will help you identify new features and their current level of support in various web browsers:

• When Can I Use
  Browser compatibility tables for features in CSS3, HTML5, SVG and other upcoming web technologies.
• Browser Support Checklist
  Uses Modernizr library to determine what “advanced” features your browser supports, including CSS3 features and selector supports.
• CSS3 Selectors Test
  Automatically run a large number of small tests which will determine if your browser is compatible with number of CSS selectors.

You can also programmatically check for CSS3 features using Modernizr – a really useful JavaScript library that detects native availability of HTML5/CSS3 features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities. If you prefer using MooTools, you can use MooModernizr (MooTools port of Modernizr).

If you are new CSS or CSS3, you may also want to get yourself familiar with vendor specific extensions. Vendor specific extensions are used by browser vendors to add new properties (which may or may not become a standard). In order to work with CSS3 today, you have to use these extensions. You can learn more about these from following resources:

• Vendor Specific Properties
• Vendor Specific Extensions to CSS3

New Features

Following list of resources illustrate basic use of some of the new features in CSS. For clarity and easy reference to official specifications, we have divided these resources into sections just like CSS3 specification is divided into various module.

Selectors

CSS3 provide several new selectors, providing you with more powerful ways to style elements in your web page. Checkout these resources to find out more.

• CSS3 Selectors Explained
  Provides great introduction to CSS3 Selectors
• Overview of CSS3 Structural pseudo-classes
  Provides brief description and usage of various pseudo-classes in CSS3.

Backgrounds and Borders Module

This module describes background colors and images and border style. New features enable provide us the ability to stretch a background image, use images for the borders, create round corners of a box and add a box shadow outside the border.

• Multiple Backgrounds
  Explains how to add multiple backgrounds to an element using “background-image” property.
• Background Size
  Illustrates how to specify the size of the background images using “background-size” property.
• Gradient Borders & Rounded Corners
  Illustrates adding gradient borders using “border-color” and creating rounded corners by using “border-*-radius” property.
• Border Radius
  Explores “border-radius” property.
• Using Images For Border
  Illustrates using images as border using “border-image” property.
• Shadow Effect on Elements
  Illustrates adding shadow effects on elements using “box-shadow” property.

Multi-Column Layout Module

Multi-Column Layout proposes new properties to flow content into flexibly-defined columns.

• Multiple Columns
  Illustrate how to create multiple columns using “column-width, column-gap, column-count, column-rule” properties.
• Multiple Columns Using CSS3
  Introduction to CSS3 multiple columns feature.

Color Module

Specifies color related aspects of CSS, including transparency and the various notations for the <color> value type.

• Transparency of an Element
  Illustrates adding transparency to elements using “opacity” property.
• RGBA Color Values
  Illustrates use of RGBA that include ‘alpha’ to specify opacity to RGB color.
• HSL & HSLA Color Values
  Illustrates use of HSL & HSLA color values.
• CSS3 Color Names
  All 147 color names and their values in alphabetical order.

Web Fonts Module

Provides syntax for describing fonts: their name, their style, which characters they cover and also where to download them from. Adding such descriptions to a style sheet allows a designer to be more precise in font selection and, if the browser supports font downloading, to use fonts that people are unlikely to have installed, including fonts created by the designer.

• Embedding a Font Face
  Illustrates how to embed a font using @font-face at-rule.

Text Module

This module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, text decoration and text transformation.

• Word Wrap
  Illustrates how words can be broken and wrap onto the next line using “word-wrap” property.
• Shadow Effects
  Illustrates how to add shadow to text using “text-shadow” property. (NOTE: This feature was part of CSS2 specifications, but was never implemented by any browser except Safari, and is now finally being implemented along with other CSS3 features)

Basic User Interface Module

Contains features for styling some interactive, dynamic aspects of Web pages: the look of form elements in their various states and more cursors and colors to describe GUIs that blend well with the user’s desktop environment.

• Resizing, Box Sizing & Outline
  Introduction to User Interface using “resize“, “box-sizing“, “outline“, and “outline-offset” properties.
• Box Sizing
  Illustrates how “box-sizing” property works and why it is useful.
• The CSS3 ‘box-sizing’ Concept
  Explains ‘box-sizing’ property which brings the opportunity for the user to choose between several box models.

Transitions Module

Defines a property to animate the transitions between pseudo-classes. During a given delay, certain property values gradually change from the old value to the new, rather than instantaneously, as in level 2.

• Transition Timing Functions
  Investigates the “transition-duration” and “transition-timing-function” properties which control, respectively, the duration and speed at which a transition is carried out.

2D Transforms Module

CSS 2D Transforms allows elements rendered by CSS to be transformed in two-dimensional space.

• CSS3 Transform
  Explains how to use “transform” property to rotate, skew and scale an object.

Tips, Tricks & Techniques

Best way to learn anything CSS3 is to try it yourself. The next best approach is to learn by examining how others are using it. Here is a list of some useful CSS3 related articles, examples, tips and tutorials:

• Pure CSS3 AT-AT Walker
• Pure CSS Speech Bubbles
• Opera logo With CSS
• Social Media Icons in Pure CSS
• Pure CSS3 Analogue Clock
• Realistic Looking Button with CSS3
• Super Awesome Buttons with CSS3 and RGBA
• Matrix Animation With WebKit CSS3
• Speed Up with CSS3 Gradients
• Working With RGBA Colour
• Cross Browser Pure CSS3 Horizontal Accordion
• Cross Browser Pure CSS3 Vertical Accordion
• Animated CSS3 Horizontal Menu
• Create a Fancy Image Gallery with CSS3
• Sliding Navigation without JavaScript
• Design a Prettier Web Form with CSS3
• Overriding The Default Text Selection Color With CSS
• Practical Uses of CSS3
• Tabbed Navigation Using CSS3
• Quickie CSS3 Tricks with Fallbacks
• A Look at Some of the New Selectors Introduced in CSS3
• Text Rotation with CSS
• Classic CSS Techniques Made Simple with CSS3
• Fun with :target (CSS3)
• Make Cool and Clever Text Effects with CSS text-shadow
• Animation Using CSS Transforms
• Going Nuts with CSS Transitions
• Progressive Enhancement with CSS3
• The Shadow effect in CSS3
• Simple CSS3 Rounded Corners With Support For IE
• CSS3 Dropdown Menu
• Slick Menu using CSS3
• Depth and Nice 3D Ribbons Only Using CSS3
• Apple’s Navigation Bar Using Only CSS
• Animated CSS3 Cube using 3D Transforms
• 3D Cube Using CSS Transforms
• Auto Scrolling Parallax Effect without JavaScript
• Clever Lists with CSS3 Selectors
• Pure CSS Opacity and How to Have Opaque Children
• CSS3 Two Column List Layout
• Futurebox, Lightbox Without the JavaScript
• Tooltips With CSS3
• Hidden Messages
• jQuery Style Menu With CSS3

JavaScript Solutions

Like Modernizers their are few other very useful JavaScript solutions that will come in handy, when trying to achieve something that is not yet supported in web browsers:

• CSS3 pseudo-class Selector Emulation
  ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages, start using these selectors in your style sheets and they’ll work in IE.
• CSS3 support for Internet Explorer 6, 7, and 8
  IE-CSS3 is a script to provide Internet Explorer support for several of the popular new styles available in the upcoming CSS3 standard.
• Sizzle – JavaScript Selector Library
  A pure JavaScript CSS selector engine designed to be easily dropped in to a host library. Sizzle supports virtually all CSS3 selectors – this even includes some parts that are infrequently implemented such as escaped selectors (”.foo\\+bar”), Unicode selectors, and results returned in document order.
• YUI Selector Utility
  The YUI CSS3 Selector Utility, providing a compact shorthand for collecting, filtering, and testing HTMLElements.
• ie7-js
  A JavaScript library to make MSIE behave like a standards-compliant browser.

You may also want check these resources providing JavaScript based alternative solutions for CSS3 features:

• The Future Today: CSS3 and JavaScript
• CSS3 Animations and Their jQuery Equivalents
• CurvyCorners: JavaScript Library for Creating Rounded Corners
• jQuery Solution for Cross Border Border Image
• JavaScript Implementation of the CSS Template Layout Module

CSS3 Generators

You should also checkout these really useful online tools that will assist you in learning and applying various CSS3 properties.

• CSS3 Please!
  Cross browser CSS3 rule generator, supports: border-radius, box-shadow, gradient(linear), RGBA colors, transform (rotate), transition and @font-face.
• CSS3 Generator
  Supports border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing and outline.
• CSS3 Sandbox
  Consist of CSS3 generator tools for Linear Gradients, Radial Gradients, Text Shadows, Box Shadows, Transforms and Text Stroke.
• @font-face Generator
  Easy to use CSS3 @font-face genertor from Font Squirrel.
• CSS3 Gradient Generator
  Generates linear “gradient” property for Mozilla and WebKit browsers.
• CSS Border Radius
  Generates “border-radius” property in Mozilla, WebKit and standard CSS3 syntax.
• Webkit CSS3 Generator
  Simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit.
• CSS3 Learning Tool
  Dynamically gets the vendor prefix for your browser and checks whether the property is supported with or without it.

Additional Resources

Here is a list of even more resources to feed your appetite for CSS3 related information.

• CSS3.Info
• CSS Recipes for WebKit
• Take Your Design To The Next Level With CSS3
• Zen Elements CSS3 Series
• Introduction to CSS3
• Using CSS3 – Screencast by Chris Coyier
• Webfonts: Site Dedicated to webfonts & @font-face Embedding
• Get The Best Out of CSS3
• The Potential of Web Typography: @font-face and Firefox 3.5
• A List Apart: Topics: Code: CSS

Reference

• SelectORacle
  Online tool that provides explanation of CSS2 and CSS3 selectors. Simply provide it with some selectors and it will return descriptions of what the selectors will match.
• CSS3 Cheat Sheet & Quick Reference Guide
  Provides listing of the current CSS3 specification, listing of the properties accepted values, common selector pattern reference, organized by type / module, selector Type reference and unit reference and information. (For PDF Version)
• CSS3 Pseudo Classes
  Part of SitePoint’s CSS Reference.
• CSS3 Cheat Sheet
  listing of CSS3 properties, selectors types and allowed values in PDF format.
• CSS3 Color Names
  Provides list of all 147 color names and their values in alphabetical order.

Please feel free to suggest any addition, correction or updates in your comments. You may also want to look at:

• List of Really Useful Tools for CSS Developers
• List of Really Useful JavaScript Libraries