If you want to design websites or modify your existing website design, then you need to have at least a basic knowledge of Cascading Style Sheets (CSS). Thankfully, CSS is a very easy language to get to a grip on, however you may find it takes a little more time to master it.

Today we would like to share with you 40 resources that will help you on your CSS journey. We have listed great CSS references and CSS blogs for learning more about the language; not to mention compatibility tables to help you remember how certain browsers handle certain CSS elements. We have also included services that help you generate code and cheat sheets for easy reference of selectors, properties and pseudo-classes. So let’s get to it, shall we?

CSS Reference

1. W3C CSS3 Basic User Interface Module

It’s perhaps not the most user friendly reference available, however the official CSS3 specifications from the World Wide Web Consortium lists everything you ever need to know about CSS.

2. Dochub

A user friendly list of every CSS property you can think of. Simply click on the property on the left hand column to load a summary and example in the main content area.

3. SitePoint CSS Reference

As one of the largest webmaster communities on the web, Sitepoint doesn’t disappoint with a great reference for learning CSS. Each property has details of the version it was introduced in, the browser versions it is compatible with and useful examples of how the properties can be applied.

Where the resource really comes into it’s own is the unique play area that each property has. A unique example is given for each property and you can change the HTML and CSS code and see what the outcome will be in real time. It really makes understanding a property you have little experience with that much easier.

4. CSS Dog

A dedicated CSS website that has useful reference pages for CSS properties, CSS shorthand properties and CSS3 selectors.

5. HTML5 CSS Properties

A list of all valid properties of CSS 2.1. Short descriptions, possible values, examples and related properties of each property are all given.

6. Mozilla CSS Reference

An alphabetical list of all CSS properties, pseudo-classes and elements, @-rules, and selectors. The CSS version of each property is listed along with its browser compatibility. It’s well presented and very easy to use.

7. CSS Easy

Finding it difficult to understand how CSS layouts work? You may find CSS Easy useful. Instead of simply listing CSS properties and selectors, CSS Easy encourages you to view code of each layout and examine the HTML and CSS in more detail to help understand how the layout was created.

8. CSS Properties and Values

A one-page reference that lists CSS properties and values with further information about the property on the right hand side of the page.

9. CSS3 Click Chart

Learn dozens of CSS3 tricks by clicking on the property you want to reproduce and viewing the code at the bottom of the page. The browser support for each property, description and link to the World Wide Web Consortium information page are referenced too.

9. Meiert CSS Properties

A CSS property table that is updated regularly. Properties are listed alphabetically and linked to the corresponding W3 information page. The table also details what CSS version the property works with and its initial value.

10. CSS3 Previews

Whilst the preview only lists around a dozen or so properties, each property has a long detailed explanation, examples of how it works and browser compatibility details.

11. CSS Reference

A list of CSS properties from W3 divided into categories. Valid values, short examples and details of whether the property is inherited are all noted.

12. CSS3 Color Names

A list of the 147 colour names that are defined in the CSS3 colour specification. Colours are listed in alphabetical order and an example is shown for reference.

13. CSS 3 Selectors Explained

A long detailed article of CSS3 selectors. The article was written around 5 years ago however you should still find it useful.

Compatibility Tables

14. CSS3 Browser Compatibility Table

A browser compatibility table for CSS3 selectors and properties on Mac and Windows.

15. CSS3 Compatibility table

Shows what version of Internet Explorer, FireFox, Opera, Safari and Google Chrome each CSS3 selector works with.

16. When Can I Use

A fantastic browser compatibility table that shows you what CSS3 elements are supported on desktop and mobile browsers. It includes a large list of filter options such as browser, version, language and more.

CSS Tutorials

17. CSS Basics

A fantastic resource for beginners that will give you a basic understanding of how CSS works. The course is divided into 18 chapters, covering everything from CSS classes to lists and pseudo elements. The whole course can be downloaded in PDF form too.

18. CSS Play

Written by experienced programmer Stuart Nicholls and his wife Fran, CSS Play is a great place to understand how menus, layouts, boxes and other CSS tricks work. You need to view the source of each page to understand how each CSS example works.

19. CSS Tricks

Arguably the best CSS blog online, CSS Tricks is a beautifully designed website from developer Chris Coyier that posts new CSS tricks and techniques every few days.

20. 456 Berea Street

Don’t let the average design full you, 456 Berea Street is a fantastic resource that has close to 400 CSS tutorials.

21. CSS Tutorial

A tutorial website that is geared towards beginners. It walk beginners step by step through the basics of CSS. It also has over 50 video tutorials and several podcasts too.

CSS cheat sheets

22. Veign CSS3 Cheat Sheet

A large CSS3 cheat sheet that organises properties by type. Values for each property are displayed to the right hand side of them. One of the most popular CSS3 cheat sheets available online.

23. Pxleyes Cheat Sheet

Available in landscape (horizontal) and portrait (vertical) mode, this useful cheat sheet shows a selected list of the most useful properties and selectors. It also has a box that displays where content, padding, borders and margins go (very useful for beginners).

24. Sencha CSS3 Cheat Sheet

Shows the new properties that have been added to CSS3. A good resource if you are comfortable with previous versions of CSS and want a cheat sheet for all new additions.

25. CSS Shorthand Cheat Sheet

A user-friendly cheat sheet that is aimed at beginners. 8 topics are covered including margin and padding, backgrounds and fonts.

26. CSS Cheat Sheet (V2)

One of the best CSS cheat sheets available. It displays a box model and lists of the most popular syntax, properties and units by category. Despite cries from a lot of fans, it has not been updated to from CSS2.1 to CSS3.

27. GoSquared CSS2 and CSS3 Cheat Sheets

The CSS2 cheat sheet shows the most popular syntax and properties and a useful box model. Rather than being a replacement, the CSS3 cheat sheet lists all new CSS features so should be used in conjunction with the original.

28. Core CSS (Part 2 & Part 3)

A good series of CSS reference cards. Part 1 covers CSS rationale and use, syntax rules, inheritance and more. Part 2 discusses element selectors, ID selectors, descendent selectors, attribute selectors and combining selectors. Part 3 discusses the CSS visual model, box model, problems with floats and positioning.

Whereas other cheat sheets try and cram everything into one page, the Core CSS series of reference cards aim to explain common problems in more detail.

29. BlueprintCSS Cheat Sheet

A great cheat sheet that users of the BlueprintCSS Framework will find useful. The second page shows a grid for designing layouts, file structures and tools and resources.

30. YUI Library

A cheat sheet for the YUI Library CSS framework. It mainly focuses on grids and fonts.

31. CSS Shorthand Cheat Sheet

Shows properties and example values for margin and padding, borders, backgrounds, fonts, lists and colours.

32. CSS Font Size Reference

The ultimate cheat sheet for styling fonts using CSS. Ems, points and pixels are all shown for easy reference.

33. CSS Shorthand Codes Cheat Sheet

Includes a cheat sheet for shorthand codes, XHTML documents, form tags and an example style.css template. Unfortunately, you need to sign up in order to download the file.

CSS Generators & Testing

34. CSS3 Rule Generator

The Cross-Browser CSS3 Rule Generator that changes the elements on the right hand side as you modify the CSS code on the main page.

35. CSS3 Selectors Test

A test area that runs small tests on CSS selectors to see if they are compatible on your browser.

36. CSS3 Tools

A range of different CSS generator tools that helps you create gradients, transforms, shadows and text strokes.

37. CSS3 Generator

Several different CSS generators in 1. The service allows you to customise text shadows, font faces, columns and more.

38. CSS3 Gradient Generator

The easiest way of creating CSS3 gradients. You can select up to 3 colours in the colour picker. The direction of the gradient and whether the CSS code uses hexadecimal or RGB code can all be altered.

39. CSS Generator

A crude looking CSS generator that gives you the code for the alignment of text and backgrounds, table borders and margins and padding.

40. Ultimate CSS Gradient Generator

A user-friendly CSS gradient generator that has dozens of great looking preset gradients. You can choose the direction of the gradient and there is an option to add IE9 support too.

We hope you’ve enjoyed this list of CSS websites and resources. What’s your favourite useful CSS resource? Please feel free to share it with us in the comments area.

(rb)

  

Over the last few years there has been great collections of quality free HTML & CSS templates published on Noupe such as 50 Free High-Quality and “New” (X)HTML/CSS Templates (2009) and 40+ Elegant Free CSS/(X)HTML Templates (2010).

There have been some great free templates released over the last year so we thought it would be appropriate to share some of these great new designs with you all. In web development, it’s important to move with the times and embrace the latest changes. As such, all of the templates listed in this article were designed using HTML5 and CSS3; both of which will help future proof your website and make them more accessible.

The Templates

1. HTML5 Theme

A minimal looking grey and pink design that comes packaged with an Ajax powered PHP contact form.

Info & Download | Demo

2. OWMX-1

A beautiful clean two column design that would be perfect for a blog.

Info & Download

3. DesignStudio

A grunge styled website that is suitable for a portfolio or a blog.

Info & Download | Demo

4. SilverBlog

A great looking clean blog template that has been also ported to WordPress.

Info & Download | Demo

5. Clean Red

A clean HTML5 powered template that could be used for a portfolio or blog. The download includes the original Photoshop PSD file.

Info & Download | Demo

6. CoffeeCols

A magazine style template that features rounded corners and comes packaged with an inner template too.

Info & Download | Demo

7. Design Company Website

A beautiful corporate style website that features its own gallery page. It also supports custom fonts.

Info & Download

8. Minimalism

A simple corporate style design that has beautiful typography.

Info & Download | Demo

9. Serenity

A one column template that features an image slider on the home page.

Info & Download | Demo

10. Vibrant Professional Web Design

A bright and colourful corporate style template.

Info & Download

11. DaFrontPage

A news style magazine template that has a 3 column layout.

Info & Download | Demo

12. High Five

A beautiful free template that could be used for a blog or portfolio website. The original Photoshop PSD file is included in the download file.

Info & Download | Demo

13. Business Project

A black and green corporate style template that features a jQuery slider on the home page.

Info & Download | Demo

14. Single-Page Portfolio

A fantastic single-page portfolio template that comes packaged with the original Photoshop PSD files.

Info & Download | Demo

15. Studio One

Another great template from CSS Heaven, this corporate style template features a jQuery slider on the home page and includes a portfolio section.

Info & Download | Demo

16. Memoir

A Japanese inspired free template that would be perfect for a personal blog.

Info & Download | Demo

17. Simple Style 7

A fixed width 5 page template that uses Google fonts.

Info & Download | Demo

18. Night Club

A well designed template that was created specifically for night clubs. The photoshop PSD file can be downloaded if you sign up to the TemplateMonster newsletter.

Info & Download | Demo

19. Small Business

A small business template that also includes an about and services page.

Info & Download | Demo

20. Cooking Site

A tremendous recipe template that has a featured post slider on the home page.

Info & Download | Demo

21. VividPhoto

A beautiful photography template from Pritesh Gupta that allows visitors to browse images at the bottom of the page.

Info & Download | Demo

22. Shinra

A fresh corporate style that uses Google fonts and comes with contact, gallery and portfolio templates.

Info & Download | Demo

23. One Page Portfolio

A simple backwards compatible one page portfolio template.

Info & Download | Demo

24. ArchiteXture

A simple 2 column template that would be suitable for a small business website.

Info & Download | Demo

25. ElegantPress

A clean template that’s packed full of features. It includes a jQuery slider on the home page, built in contact form, lightbox for images, jQuery gallery and a jQuery portfolio.

Info & Download | Demo

26. SocialStream

A useful template for social media fans that allows you to display a live stream of your Facebook or Twitter activity.

Info & Download | Demo

27. OnlineSolutions

A 3 column orange template that is suitable for a business website.

Info & Download | Demo

28. Touch The Future

An elegant free template design that includes a tutorial that explains how the theme was designed.

Info & Download | Demo

29. FreshIdeas

A simple black and yellow 2 column template.

Info & Download | Demo

30. Restaurant

Beautiful typography and a good looking jQuery slider on the home page make this a great template for a restaurant website.

Info & Download | Demo

31. HTML5 Admin Template

An advanced HTML5 admin template that can be used for creating a feature rich dashboard for your admin area.

Info & Download | Demo

32. HTML5 Admin

Another great HTML powered admin template that can be used as a template for your own project.

Info & Download | Demo

33. 52framework

Includes a simple HTML5 page, feature full HTML5 page and form, grid and CSS frameworks.

Info & Download | Demo

34. One-Page Template

A great looking blue one page template that uses jQuery to slide to different sections of the page.

Info & Download | Demo

35. Lifebook

A simple yet fun blogging template that features rounded corners.

Info & Download | Demo

36. PKE Meter

Create your own iPhone app website using this useful free template. The HTML5 code and graphical design are explained in full to help you understand the template better.

Info & Download | Demo

37. HTML5 Starter Pack

Contains photoshop designs, reusable CSS classes, javascript and more to help you create your own HTML5 powered website.

Info & Download

38. HTML5 template

A simple HTML template that comes in one column, two column and three column variations.

Info & Download | Demo

39. Nova

An HTML5 template that comes with 5 page templates, featured post slider, contact form and an image and video gallery.

Info & Download | Demo

40. Kroft

Includes 6 background images, 6 page templates, homepage slideshow and social media integration. The photoshop PSD file can also be downloaded.

Info & Download | Demo

In Closing

That just about finishes things off, but before we go, we wanted to get ask for your feedback. Hopefully you found something in the collection that got you excited. If so, what was it? What’s your favourite HTML5 and CSS3 powered template, even if it wasn’t included in this list? Feel free to use the comment section to fill us in.

(rb)

  

As we all know, a lot of complicated CSS code snippets had to be used back then when you simply wanted to achieve a rounded corner, and even had to use JavaScript for simple animations. But since the coming out of CSS3, life has become a lot easier.

In this post we provide you with a great collection you can always turn back to; whether you’re a pro and haven’t seen that particular tutorial yet, or a beginner who has newly discovered their love for CSS3. Either way, please feel free to mention tutorials that were missed out and would like to share with others.

Awesome Cufonized Fly-out Menu with jQuery and CSS3
In this tutorial you can learn how to create a full page cufonized menu that has two nice features:

Subtle CSS3 Typography That You’d Swear was Made in Photoshop
Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby!

CSS3 Minimalistic Navigation Menu
Here is a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers:

CSS3 Background-Clip: Text
To carry out the DIN typeface, a transparent PNG with letters was used to achieve that subtle yellow to blue fade animation: Click on the image to read more:

Create a Vibrant Digital Poster Design with CSS3
Follow this walkthrough of the making of Circlicious — a vibrant and abstract digital poster design made purely of HTML and CSS:

How to create a kick-ass CSS3 progress bar
In this tutorial you can learn how to create a fancy progress bar using CSS3 and jQuery, without using Flash or even images:

Colourful Rating System
In this tutorial you are going to follow a relatively simple jQuery tutorial. Rating systems are used on a lot on websites, for example on how to rate a certain product, article or comment:

Create Animated Price Grid Using CSS3
In this tutorial, an animated Price grid will be created with only the help of CSS3. No jQuery, No Images, No Flash at all:

Related Posts Slide Out Boxes with jQuery and CSS3
In this tutorial, a fixed list is created at the right side of the screen with some thumbnails sticking out:

Halftone Navigation Menu with jQuery & CSS3
In this tutorial you will find out how to create a CSS3 and jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links:

How to Create A Multi-Step Signup Form With CSS3 and jQuery
In this tutorial, a simple multi-step signup form using CSS3 and jQuery will be created. To spice things up a bit, we will include a progress bar with the form, so the users will be able to see the percentage of form completion:

Coding a Rotating Image Slideshow w/ CSS3 and jQuery
In this tutorial you are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow:

Animated Navigation Menu with CSS3
In this tutorial you will be shown how to create an animated navigation menu with CSS3:

Create Ajax Loading Animation with CSS3
Normally, frontend developers use GIF animations for Ajax data loading. But now CSS3 animation properties allow us to achieve the same Ajax loading animation effect, without GIF animation required:

Slick CSS3 Animated Image Caption
This is an experiment to create an animated image caption. You might have seen enough of this effect all over the web, but here we’re trying to achieve the same effect using CSS3 Transitions:

Create Animated Landscape using Pure CSS3
In this tutorial you’ll see how you can create a landscape effect with pure CSS3 technology:

Sticky Notes with CSS3
In thios tutorial you can see how sticky notes with CSS3 can be created:

How To Create a Sexy Vertical Sliding Panel Using jQuery and CSS3
In this tutorial you can find out how to create a sexy vertical sliding panel using jQuery and CSS3:

Display Social Icons in a Beautiful Way Using CSS3
The goal here was to slowly fade-in and fade-out the opacity changing, and animate the position of the tooltip a little bit:

Animated Wicked CSS3 3D Bar Chart
In this tutorial you can learn how to create a beautiful 3D bar chart::

3D Animation Using Pure CSS3
The perspective property is what we need to create the 3D effect. Using transform and transition, we can create 3D animations using pure CSS3:

Cross-Browser Rounded Buttons with CSS3 and jQuery
In this tutorial, a cross-browser with rounded buttons will be created with the help of CSS3 and jQuery:

Slide Down Box Menu with jQuery and CSS3
In this tutorial, a unique sliding box navigation is created. The idea is to make a box with the menu item slide out, while a thumbnail pops up:

Beautiful Photo Stack Gallery with jQuery and CSS3
In this tutorial you can learn how to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, the images of that album are shown as a beautiful photo stack:

How To Change Default Text Selection Colour
Whilst this CSS3 declaration might not be crucial to your project or design and yes it is not supported by all browsers, but it is a fantastic effect that really takes your design one step further:

Making Better Select Elements with jQuery and CSS3
Here you can find out how to build a script, one which is going to take an ordinary ‘select’ element, and replace it with a better looking, markup powered version, while keeping all the functionality intact:

CSS3 Animated Bubble Buttons
Here is a useful set of animated buttons created with the power of CSS3s multiple backgrounds and animations. No JavaScript necessary:

BounceBox Notification Plugin with jQuery & CSS3
In this tutorial you will find out how a bouncebox notification plugin can be created with jQuery & CSS3:

Use CSS3 to Create a Dynamic Stack of Index Cards
In this tutorial you can learn how to create a dynamic stack of index cards solely with the help of HTML and CSS3 features:

Interactive Image Vamp up with jQuery, CSS3 and PHP
In this tutorial, an online application for giving some funny touches to an image is created.  jQuery, jQuery UI and PHP are needed:

Contextual Slideout Tips with jQuery & CSS3
Knowing the importance of HTML standards, here is a set of contextual slideout tips with jQuery & CSS3 which are ideal for product pages and online tours:

Carbon Fiber Signup Form with PHP, jQuery and CSS3
In this tutorial you can see how you can make a carbon fiber signup form using PHP, jQuery and CSS3:

Sexy Image Effects Similar to Flash – in Pure CSS3
Here is a very different image effect that can be achieved by not only using Flash but also CSS3:

Awesome Buttons using CSS3
Here you can check out a new look to Buttons that can be adjusted in CSS3:

Getting Clever with CSS3 Shadows
As soon as we detach a shadow from the element, itself, we can then transform the shadow in interesting and creative ways. Click on the image to find out more:

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
In this tutorial you can learn how to build a cross-browser with an awesome CSS-only drop-down mega menu, using nice CSS3 features:

Flexible, Mobile-First Layouts with CSS3
CSS3 provides a fairly rich toolset for mobile-friendly formatting, relying on the client’s browser capabilities instead of back-end templating:

CSS3 Slideup Boxes
Follow along and see how we can use a few very simple CSS3 transitions to create a “slideup” box effect:

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery
In this tutorial you can take a look and see what can be achieved with the help of HTML5 and CSS3 as well as some jQuery:

Fancy Image Hover Using CSS3
In this tutorial you can learn how to create a fancy image hover with CSS3. As you all know, we can have cool image hover effects using jQuery. By using transform and transition properties of CSS3 we can have an even better effect:

CSS3 Dropdown Menu
Here is a Mac-like multi-level dropdown menu that can be created using border-radius, box-shadow and text-shadow:

Fun with CSS3 and Mootools
These examples came about when experimenting with the ‘extend’ property in MooTools:

Colorful Sliders with jQuery & CSS3
In this tutorial you can learn how to use jQuery and the new transformation features brought to you by CSS3 to create a three dimensional dynamic slider effect:

Coding a CSS3 & HTML5 One-Page Website Template
In this tutorial you are going to make a HTML5 web template by using some of the new features brought to you by CSS3, jQuery and the ‘ScrollTo’ plug-in:

Create a Yoyo with jQuery and CSS3
Here you can learn how to create your own yoyo with the help of CSS3 and jQuery:

How to Create Depth and Nice 3D Ribbons Only Using CSS3
In this tutorial you can learn how to create nice 3D ribbons with the help of CSS3 only:

Create a Fancy Web Form with Field Hints Using Only CSS3
Here you’ll be shown how to create a fancy web form with field hints using only CSS3:

Pure CSS Social Media Icons
This is an experiment that creates social media icons using CSS and semantic HTML:

Build a Simple Portfolio Image Gallery with CSS3
Here’s how you can use CSS3 to create a Javascript-free gallery that enlarges your images on hover:

Create Beautiful CSS3 Typography
In this tutorial, you will find out how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3:

Old School Clock with CSS3 and jQuery
Here is an interesting tutorial on how to create an old school clock with the help of jQuery and CSS3 features:

Build Awesome Practical CSS3 Buttons
Here is a video tutorial that will show you how to build some awesome practical CSS3 buttons:

(ik)

  

Many exciting new functions and features are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc…

CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Not all current browsers support CSS3, but it is however possible to create equivalent effects and serve it with the power of jQuery.

This article presents 5 CSS3 techniques which can dramatically get you a stunning user interfaces and how to achieve almost the same effects using jQuery for browsers that are not compatible yet with CSS3 new features.

1. Border Radius: Create rounded corners

W3C has offered a very interesting option for borders in CSS3, of which one is border-radius. This CSS3 styling rule allows rounded corners to be set. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.

Use the followig css code to replicate the above example.

#rounded-box {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 15px;
}

Below you will find jQuery solutions and plugins that will allow you to create rounded corners without using images.

How To » jQuery Canvas Rounded Corners

jQuery Plug-in to make rounded corners on your DOM objects using element. Tested in IE7 and FF3

You can change the following Options:

• radio – (int) radius size of corners
• inColor – (color) inside color of element
• outColor – (color) outside color of corners
• borderSize – (int) border width
• borderColor – (color) color of borders

How To » jQuery Corners

This jQuery plugin will easily create beautifully rounded corners. No images or obtrusive markup necessary.

2. Border Image

Another exciting new border feature of CSS3 is the property border-image. Border-image, allows an image to be used as the border of an element. Each side of the image corresponds to a side of the HTML object.

Currently “Border Image” is only implemented in the upcoming Firefox3.1 and recent releases of Safari and Chrome. Below you will find a tricky jQuery solution that will allow you to have this feature work in: Firefox 2.*, Firefox 3, Firefox 3.1, Safari 3.*, Chrome 1.0, Opera 9.*, Opera 10

and IE7.

How To » jquery.borderImage.js

jquery.borderImage is a cross-browser, partial implementation of CSS3’s border-image property. This plugin can create the same effect as border-image by creating nine slices from the image one by one, and then tile them in the background of our element.

3. Multiple Backgrounds

CSS3 allows for multiple background images on one element, this is a real time saver. To do this, you can separate backgrounds by commas, like this

#multiple-background-box {
background: url(top-bg.gif) top left no-repeat,
url(bottom-bg.gif) bottom left no-repeat,
url(middle-bg.gif) left repeat-y;
padding: 20px;
}

Since this features is not supported by most browsers yet, and you want multiple/layered backgrounds for a div tag, you would nest div tags inside of each other with the CSS to give it the background you wanted. That’s a lot of code, and doesn’t seem too effecient. The solution is to use jQuery with the Background Layers plugin.

How To » CSS Multiple Backgrounds / Background Layering with jQuery

The Background Layers plugin reduces the amount XHTML you need to write simply by adding a few lines of JavaScript, making your code much less cumbersome. The concept is similar to the use of layers in Photoshop, one background image on top of another.

The code above demonstrate laying backgrounds than to use a few sprites from the classic video game, Super Mario Bros 3.

4. Box Shadow and Text Shadow

The main goal of this property is to give designers and css coders a nice way to display a shadow behind your text. The property syntax should look like this:

h3 { text-shadow: 2px 2px 2px #333; }

A very useful article i found at Kretschmann’s website, explaing different usage of this property and including different example for using it in a nice way.

Again, this property is not supported by Firefox and IE, so we have to find ourself another way of doing it using jQuery.

How To » Drop Shadow

This plugin creates soft drop shadows behind page elements, including text and transparent images. It accepts options for the horizontal and vertical offsets, amount of blur, opacity, and color. Please look at the demo page for examples.

How To » Text-shadow in Internet Explorer

Text-shadow in Internet Explorer adds text-shadow effects to Internet Explorer. You can easily turn it on by calling textShadow();.

5.Transparency & Opacity

The most widely implemented feature of CSS3 up till now is opacity. ‘opacity’ sets the value to how opaque an elements. An element with opacity value 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value inbetween will determine how opaque (or transparent) the element is. Check out this interesting post by Zen Elements explaining how to use it.

The above opacity example is set in another layer containing a completely random, never seen before background and each layer uses the following CSS:

div.L1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.L2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.L3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.L4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }

How To » Element gradient

It allows you to define a gradient fill and have an element filled with a gradient. You can set the direction of the gradient (right-left or up-down) and the opacity of the gradient easily.

  

With version three of CSS, many exciting features will be implemented. CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Many time-saving rules are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image ,multi-column layout, etc…

Although only the most modern browsers currently support these effects, it’s still fun to see what’s around the corner!

In this post we will take a look at some interesting properties of CSS3 that you can put into practice in your website designs today.

CSS3 Color Module

CSS3 supports more color and a wider range of color definitions. The new colors that CSS3 support are HSL, CMYK, HSLA and RGBA. This powerpoint explains in details the CSS3 colors and how use them.

Gradient Borders

You can have gradient border using the -moz-border-radius / -webkit-border property.

Border Image

Sometimes usual CSS border properties are not enough. If want to use images for borders, CSS3 supports border image through border-image and border-corner-image property.

Rounded Corner Boxes

Andy budd shows us how to easily create rounded corners for any box using border-radius and background position.

Box Shadow

The css3 property box-shadow allows you to add a shadow effect without using images to a selected element. Currently Safari 3+ and Firefox 3.1 (Alpha) supports box-shadow.

Multiple background Images

If you want to add multiple background to a box or a paragraph, CSS3 allows multiple background images on one element.

Multiple Columns

This CSS3 module allows to create multi-column texts without adding table using -moz-column-count and -moz-column-width. If you have text in your web pages that runs too long this CSS3 tag could be really useful.

Text Shadow

Need a Photoshop like Text shadow? CSS3 text-shadow property allows to add a shadow to each letter of some text. Also, text-shadow is not new to CSS3, it was originally proposed in CSS2, but was removed from CSS 2.1.

Box-sizing and Box-model

CSS3 property box-sizing allows you to specify the behavior of the browser in calculating the width of an element and control if a box should be resizable.

CSS3 Opacity

Although, CSS opacity property has been around for while, When CSS3 rolls out there will be more use of the opacity property. You can set the transparency of box, image and text using the opacity property.

CSS3 Selectors

Are you Confused with all CSS3 new selectors? This article provides useful insights and explanation of CSS3 selectors.

Brilliant implementations of CSS3 Properties

Awesome Buttons with CSS3 and RGBA

You won’t believe that these button are created using CSS3 properties only without any images.

Render User Interface Using CSS3

Here is a creative example of CSS3. A mock up of OSX user interface using CSS3. Click on the image to see the working demo.

CSS3 Template Layout with jQuery Plugin

This plugin allows web designers to use the W3′s CSS Template Layout Module using jQuery.

View Demo

Using CSS3 RGBA for Transparency

If you are wondering how to achieve a transparent box like 24 ways, this article discusses RGBA which lets you specify a color as being translucent and how to use it.

Custom Font with CSS3

While there are other ways to embed font, using CSS3 for custom font will be much easier.

Creating a Polaroid Photo Viewer with CSS3 and jQuery

Web designer Marco Kuiper shows us how to create a Polaroid Gallery by combining CSS3 and JQuery.

View Demo

Example and Use of Box Sizing

This article discusses how to use CSS3 box sizing property.

CSS3 Corporate Fun

This menu mimics the pushed button when you hover by using CSS selectors.

CSS3 Links Creation and Usage

In CSS3 it is possible to mange links with more control and effectively. We can easily specify the values of various states of links which are link, visited, hover, and active states.

Tooltip with CSS3

This post discuess how to create a tooltip using :before (or :after) pseudo element combined with the :hover pseudo class.

View Demo

Styling Forms with Attribute Selectors

This example focuses on how to style web form using attribute selectors.

CSS Opacity

There are so many ways to use CSS transparency to create to make website user friendly website. You can control the opacity of the text or images that to create visually ecstatic content.

Using CSS3 Selectors to Apply Link Icon

Adding an icon next to your link is much easier with CSS3 Selectors.

Simple CSS3 rounded Corners with Support for IE

Although CSS3’s border-radius property is supported in the current versions of Safari and Firefox, Internet Explorer does not support it. However, using IE’s condition statement and image you can have cross browser nice rounded corner.

View Demo

The Shadow Effect in CSS3

CSS3 property -webkit-box-shadow creates shadow on any specified div. The Demo is Safari only.

View Demo

Must Read CSS3 Related Articles :

Six Questions: Eric Meyer on CSS3

5 Techniques to Acquaint You With CSS3

Push Your Web Design Into The Future With CSS3

So, which CSS3 feature are you excited about? Let us know in comment.

Author: Kawsar Ali

Kawsar Ali is a web designer, graphic designer, and wannabe photograper based in NY, U.S. He’s also the founder of Desizn Tech, a site for web designer and web developer. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.