Separation of content from presentation has numerous advantages, some of which include: improvements in content accessibility, flexibility and control over presentation, share formatting across multiple pages, and reduce complexity and repetition in the structural content. This is why CSS was developed and all of this is achievable to a certain extend through current level of CSS. However numerous new features will be incorporated in CSS3, empowering web developers to take web design even further.
Although CSS3 specifications are still under development, some of its features have been incorporated in latest web browsers. This has provided web developers with an opportunity to experiment and play with some of the new features well in advance. W3Avenue has compiled a list of resources that will get you up to speed and bring you closer to the cutting edge of CSS development.
New Features & Browser Support
Following resources will help you identify new features and their current level of support in various web browsers:
- The Official Source to Follow the Development of CSS3
- Compatibility Tables: When Can I Use, Web Browser CSS Support, QuirksMode – CSS and Browser Compatibility
- Firefox 3.5 for Developers
- Web standards supported by Opera’s Core
- Safari CSS Reference
Download Latest Web Browsers
You may need latest release of more than one of these web browsers to test CSS3 features:
Tips – Introduction To New Features
Following list of resources illustrate basic use of some of the new features in CSS. CSS3 has been divided into various module, we have therefore categorized these resources under their respective module for clarity and reference to official specifications.
Selectors
Selectors are used to select elements in an HTML or XML document, in order to attach (style) properties to them.
- 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
Describes background colors and images and the style of borders. New functionality includes the ability to stretch the background image, to use images for the borders, to round the corners of the box and to 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 (Opera & WebKit based browsers). - Gradient Borders & Rounded Corners
Illustrates adding gradient borders using “border-color” (Mozila based browser) and creating rounded corners by using “border-*-radius” property (Mozila & WebKit based browsers). - Border Radius
Explores “border-radius” property(Mozila & WebKit based browsers). - Using Images For Border
Illustrates using images as border using “border-image” property (Mozila & WebKit based browsers). - Shadow Effect on Elements
Illustrates adding shadow effects on elements using “box-shadow” property (Mozila & WebKit based browsers).
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 (Mozila & WebKit based browsers). - 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
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 (Mozila & WebKit based browsers). (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(WebKit based browsers).
Tricks – Fake It Till You Make It!
After exploring some of the new features, you may want to use them in your projects right away. Unfortunately it will be a while before web developers can safely use CSS3 in their projects. But here is a list of various attempts/tricks mostly using JavaScript to achieve some of these effects today.
- JavaScript (jQuery) Implementation of the CSS Template Layout Module
- Font Face in IE: Making Web Fonts Work
- Pure CSS Opacity and How to Have Opaque Children
- RGBA Today
- Simple CSS3 Rounded Corners With Support For IE
- jQuery Corners – Cross Browser Solution for Rounded Corners
- jQuery Solution for Cross Border Border Image
- CSS Multiple, Layered Backgrounds with jQuery
- jQuery Plugin – Drop Shadow Effects
- Cross Browser Text Shadow
Techniques – Glimpse Into The Future
Following list of resources demonstrate various techniques; exposing what you will be able to achieve using new features in CSS.
- A Look at Some of the New Selectors Introduced in CSS3
- Fun with :target (CSS3)
- Super Slick jQuery Menu With CSS3
- Super Awesome Buttons with CSS3 and RGBA
- Text-Shadow Exposed: Make Cool and Clever Text Effects with CSS text-shadow
- Animation Using CSS Transforms
- Matrix Animation With WebKit CSS3
- Apple’s Navigation Bar Using Only CSS
- 3D Cube Using CSS Transformations
- Fun with 3D CSS and Video
- Auto Scrolling Parallax Effect without JavaScript
- Clever Lists with CSS3 Selectors
- CSS3 Two Column List Layout
- Futurebox, Lightbox Without the JavaScript
- Old School Clock with CSS3 and jQuery
- CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile
- Tooltips With CSS3
- Styling Forms with Attribute Selectors
- The Shadow effect in CSS3
- Progressive Enhancement with CSS3
- Hidden Messages
- jQuery Style Menu With CSS3
- Creating a Polaroid Photo Viewer with CSS3 and jQuery
- CSS text-shadow Fun: Realtime Lighting Demo
- Overriding The Default Text Selection Color With CSS
- Enhance Internal Page Links
- Rotate3Di – jQuery Effect Plugin
- HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
Additional Resources, Tools & Utilities
Here is a list of even more resources to feed your appetite for CSS3 related information.
Articles
- CSS Recipes for WebKit
- Take Your Design To The Next Level With CSS3
- Zen Elements CSS3 Series
- 5 Techniques to Acquaint You With CSS3
- Graceful Degradation or Progressive Enhancement
- Introduction to CSS3
- Using CSS3 – Screencast by Chris Coyier
- Get The Best Out of CSS3
- The Potential of Web Typography: @font-face and Firefox 3.5
Sites
- CSS3.Info
Online resource covering CSS3 - Webfonts
The website dedicated to webfonts & @font-face embedding - A List Apart: Topics: Code: CSS
Tools & Utilities
- CSS 3 Cheat Sheet
Downloadable PDF file containing complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. - Modernizr
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies. - MooModernizr (MooTools 1.2)
Detects CCS3 capabilities in browsers & provides tests for a variety of CSS3/HTML features. - 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. - 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. - YUI Selector Utility
The YUI Selector Utility brings CSS3 Selector syntax to JavaScript, providing a compact shorthand for collecting, filtering, and testing HTMLElements.
Please feel free to suggest any addition, correction or updates in your comments. You may also want to look at:
Thanks for this Information. Cheers!
A nice collection for learning some CSS3 and I’m glad to see some of our articles got in there too. Some of these sources I hadn’t come across before so some more reading for me too! :)
Thanks for sharing and keep up the great work!
Alex | @ZenElements
Useful collection. As next generation HTML and CSS is getting the speed, tips and tricks on using CSS3 will really helps the developers.
Good list. Thank you very much.
Great list guys some really useful resources in there. Thanks for trackback BTW!
Great compilation of CSS3 resources. Will look to develop using CSS3 soon.
it’s a useful tutorial… very good.
Great roundup with awesome articles, well done.
I’ve writting a couple of good CSS3 articles too, you might want to check them.
Keep up the great work!
I can’t wait till all browsers will have this enabled and then I will feel like I can use css3 more often.
Very helpful collection of CSS3-stuff! If you want some more don’t miss the following two CSS3-Tutorials Website-Navigation ( based on Border-Radius ) or Sliding Navigation without JavaScript ( based on the CSS3-Animation feature )!