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.
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.
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:
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.
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.
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 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.
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.
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.
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)
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.
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.
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
- 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
- Clever Lists with CSS3 Selectors
- Pure CSS Opacity and How to Have Opaque Children
- CSS3 Two Column List Layout
- Tooltips With CSS3
- Hidden Messages
- jQuery Style Menu With CSS3
- 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.
- YUI Selector Utility
The YUI CSS3 Selector Utility, providing a compact shorthand for collecting, filtering, and testing HTMLElements.
- CSS3 Animations and Their jQuery Equivalents
- jQuery Solution for Cross Border Border Image
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.
Here is a list of even more resources to feed your appetite for CSS3 related information.
- 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
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: