CSS3 Unleashed: Tips, Tricks and Techniques

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:

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.

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.

Multi-Column Layout Module

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

Color Module

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

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.

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:

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:

CSS3 Generators

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

Additional Resources

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

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:

Stay Updated

If you found this post useful, consider subscribing to our RSS Feed! You can also stay updated by following us on Twitter and Facebook or by subscribing to our FriendFeed.

Bookmark / Share

Bookmark and Share

Read More

SIMILAR/RELATED POSTS:

PREVIOUS POST:

NEXT POST:

Reader Comments

12 Responses to “CSS3 Unleashed: Tips, Tricks and Techniques”
  1. Binoj xavier says:

    Thanks for this Information. Cheers!

  2. 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

  3. Veera says:

    Useful collection. As next generation HTML and CSS is getting the speed, tips and tricks on using CSS3 will really helps the developers.

  4. Hon tap says:

    Good list. Thank you very much.

  5. Ryan says:

    Great list guys some really useful resources in there. Thanks for trackback BTW!

  6. sasdaman says:

    Great compilation of CSS3 resources. Will look to develop using CSS3 soon.

  7. z.Yleo77 says:

    it’s a useful tutorial… very good.

  8. Marco says:

    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!

  9. I can’t wait till all browsers will have this enabled and then I will feel like I can use css3 more often.

  10. 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 )!

  11. AJ says:

    Wow lots of great stuff here. I am trying to get all the new CSS3 stuff down. So much to learn…so much excitement.

  12. I really like it to reduce the HTML-Code by using CSS3. One of my latest experiments is a CSS3 Animation based on the nostalgic “PC Game PONG”. Check it out!

Leave Comment

 
 

Stay Updated, Subscribe to RSS Feed

 
 
 
 

Blogroll

 

Sponsored Links