Resources for Useful CSS3 Tutorials

    written by Ken Hattori

    Every developer knows the importance of learning CSS as well as using it effectively. CSS3 is such a large expansion of the existing coding language, that I’ve compiled a list of the most useful tutorials that a developer would need to use the language successfully.

    Reference Material Resources:

    CSS3 Reference Materials
    This site has over twenty pages describing the new CSS3 properties. One reference page lists all CCS3 properties grouped by their CSS modules, and another lists all the CSS3 properties alphabetically in a table and identifies which major browsers currently supports each CSS3 property.

    Dedicated CSS3 site
    This site is dedicated to CSS3 and contains many instructional blog posts along with a page showing the status of each CSS3 module as it progresses toward W3C recommendation. It also contains a page which allows users to preview various CSS3 features that have been implemented in browsers.

    CSS3 PDF Reference
    The 5-page pdf reference file on this link lists all CSS3 properties and selector types with the expected named values and accepted value types.

    Helpful Tutorials and Articles

    12-Steps to Create-a-Blog
    This link is a practical, one-page, 12-step tutorial that describes how to build the main page of a blog with six major elements using HTML 5 and CSS3 techniques. Among the interesting concepts demonstrated is a simple way for CSS3 to cause elements of the blog display to behave like table cells without using the html table element to markup the layout.

    Getting Acquainted with CSS3
    This page starts with basic markup and offers 5 techniques in working with objects to build up familiarity with CSS3.

    5 Largely Implemented Properties
    The focus of this link is on five new CSS3 properties that have been mostly implemented in the major browsers. It encourages developers to use CSS3 in well-defined or non-critical places.

    11 Techniques Made Simple With CSS3

    Resources for Useful CSS3 Tutorials
    The page shows code for the techniques using CSS3 as well as how they were previously done. The 11 techniques include multiple backgrounds, opacity, shadowing, columns, and animations.

    Browser Developer Articles
    This page on the developer site for the Opera browser lists over 45 of their CSS articles; many of them are focused on new CSS3 functionality. Their articles are often in-depth and quite detailed. Some of the specific features they describe are on the following links:

    8 Practical Projects
    This site has eight CSS3 tutorial pages, which have descriptions and code for making speech bubbles, creating ribbons, shadowing text or boxes, and ,pre.

    Another 8 CSS3 Projects
    Again, on this site are eight CSS3 tutorials with other practical code examples of features such as rotations, transitions, and animations.

    Speeding Page Load and More
    This link has information on how using CSS3 may speed up page load by reducing the need for images. This page also contains links to other CSS3 tutorial pages offered on this site.

    Vertical Sliding Panel with Detailed Code and Demos
    Included on this page is the HTML markup, all of the CSS, and some simple javascipt code to toggle the panel open or closed position. Also, there are operational demos and optional tweeks. Here is another detailed article on this site:

    Videos with Membership

    Resources for Useful CSS3 Tutorials
    There are many videos on this site which cover basic CSS3 properties like rounded box corners and shadows as well as complex properties like transforms, selectors, and animation. Most of these video tutorials require a paid membership.

    6 CSS3 Instructional Pages
    This link is the first of six pages on this site providing instruction on using specific CSS3 features such as multiple columns and new ways to control the background element.

    51 Minute Instructional CSS3 Video

    Resources for Useful CSS3 Tutorials
    This site also lists CSS Demos and Files on the site. Below are a few of this website’s CSS3 Demos linked from the above page.

    Various Tutorials

    Resources for Useful CSS3 Tutorials
    This is a page with links to some one-topic tutorials. Most of the recent topics are on practical uses of CSS3 such as spinning icons, cool buttons, and an image gallery with a 3D lightbox animation.

    Extensive Technical Details on CSS3 Selectors
    Included are many syntax options, attributes, and various pseudo-classes.

    Animated CSS3 Menu

    Resources for Useful CSS3 Tutorials
    This page has HTML and CSS, no javascript needed, for building animated menus.

    7 Various CSS3 Instruction Pages
    There are seven CSS3 tutorial pages on this site. These pages include an introduction to CSS3 and a description of how to flow an element’s content into multiple-columns.

    Super Awesome Buttons with CSS3 and RGBA
    This page is focused on the properties for scaling, shadowing, sizing, and coloring buttons with CSS3.

    The information and coded examples in the above links should enable developers to learn CSS3 quickly and to become comfortable using its new properties. While CSS3 proceeds toward W3C recommendation, it may be possible to take advantage of some CSS3 features and properties to simplify pages or reduce load times.

    Authored by

    This guest post is contributed by Ken Hattori

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

  • Tutorial Lounge says:

    September 24, 2011

    i always find css3 tutorials. thanks

  • Pixelbox Design says:

    September 25, 2011

    Good stuff, excellent, many thanks.