September’s Best Resources for CSS3

Cascading Style Sheets Level 3 or CSS3 for short is the next stage CSS. CSS3 can really improve efficiency, both in your development time and page performance. The latest versions of the modern web browsers such as Chrome, Firefox, Safari, and Opera support CSS3.
Microsoft has released recently the first beta version of Internet Explorer 9 (a WinXp version is missing though); Louis Lazaris has put together a nice list with CSS3 properties support in IE9.
Here are the best CSS3 coding techniques and tutorials of September 2010, 33 fresh resources to help keeping up with new technologies.
Enjoy this list of CSS3 demos and experiments, don’t forget to check out the previous CSS3 resources round-ups in case that you missed any.

1. CSS3 Hover Image Gallery

A sleek image gallery that takes advantage of CSS3 animation, shadows, and the “transform” property to instantly add a smooth hover effect to its images, whereby the image enlarges and moves closer to the user.

2. 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. It’s not fully cross-browser compatibile, but it’s still a nifty way to make use of CSS3 to cut down your reliance on scripting.

3. CSS3 tutorial for display products and its description

Learn how to use CSS3 to display some extra information when hovering an image. This effect can be used for displaying the price of any product in a catalogue or personal details etc.

4. Smooth Fading Image Captions with Pure CSS3

Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. Full example and code download included.

5. Add Animated Image Captions on Hover with CSS3 (No Javascript)

This effect can be used by both WordPress and Blogger users. The transition effect of the caption only visible in Webkit browser like Google Chrome.

6. CSS3 thumbnail photo gallery tutorial

Using CSS3, we can create beautiful fast loading thumbnail gallery which shows the bigger image on hovering.

7. Quick Demo: Webkit CSS3 Mask with SVG

SVG can be applied as a mask by using properties mask-image (background) or mask-box-image (border-image). In this demo, I use -webkit-mask-box-image so the mask image (SVG) stretches to fit on avatar images in various sizes.

8. CSS3 ‘Image Slide’ menu

This menu uses transitions which are currently supported in Safari, Chrome, Opera and Firefox v4 beta to produce a sliding action when hovering the image ‘tabs’. With virtually no extra styling and simple code this produces an effect that has only been possible using many lines of jQuery/javascript.

9. A Sleek Navigation Menu with CSS3

Learn how to make an menu with rounded corners, a background gradient and a simple hover effect using only CSS3.

10. CSS3 ‘Rising Tabs – Animation’

Hover over the text beneath the image to see a rising information panel which can contain text, links and images. This action rivals javascript/jQuery versions and is accomplished using only a few lines of ‘style’.

11. BonBon – Sweet CSS3 buttons

There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons.

12. CSS3 buttons

This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possible markup. These buttons look best in Chrome and Safari.

13. umbrUI

umbrUI is a demo of HTML input elements made with CSS3. So far they include a range slider, checkbox and radio button. I’m pretty happy with the outcome. They just use minimal markup, no JavaScript and thanks to the Pictos Font Icons, no images.

14. CSS3 Text-Based Jelly Buttons

This tutorial demonstrates a relatively simple application of CSS3, creating a text-based, “jelly bean” button that will demonstrate the promise – and the pitfalls – of using an emerging website design technology.

15. CSS3 Powered Social Share Tabs (a la sexy bookmarks)

Learn how to make a social sharing tab array powered by CSS3, similar to that of the sexy bookmarks WP plugin, with a nice transitional movement.

16. CSS3 ‘Social Networking Menu’

Hover over the ‘network’ graphic to reveal a circle of networking icons which, when hovered increase in size slightly. Using CSS3 for Safari, Chrome, Opera and Firefox v4 beta the icons will fade into view and the enlarging/shrinking of the icons will be smooth.

17. Creating List Icons with Pure CSS3

18. Progressive Decoration with CSS3 Multiple Backgrounds

Multiple background images are mostly proposed as a way of implementing the ‘sliding door‘ technique for elastic or flexible layouts without the need for additional markup.

19. An (Almost) Complete Guide to CSS3 Multi-column Layouts

One of the defining features of print design is the ubiquity of multi-column layouts. And there are a couple of good reasons why this is the case. Read this article for more details.

20. CSS3 Border Images for Beautiful, Flexible Boxes

One CSS3 property that’s been overlooked is the border-image property. The irony here is that what makes this property so useful, is exactly what makes it extremely confusing.

21. CSS3 :Target

“:traget” One of the new pseudo classes implemented in CSSS 3. Combined with CSS animation. It is very cool and easy to feature to implement.

22. Forward Thinking Form Validation

CSS3’s basic UI module provides several pseudo-classes to help us style those validation states and change a field’s appearance based on the user’s actions. Let’s take a look at combining the two to create a CSS-based form validator that has fairly broad browser support.

23. CSS3 Tutorial: 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.

24. Adding Stroke to Web Text

Fonts on the web are essentially vector based graphics. Learn how to draw a stroke around the individual characters (works in WebKit).

25. Text Rotation with CSS3

26. A CSS3 Modal Box without javascript

This is an article written in french. Use Google’s service to translate the page to your preferred language.

27. CSS3 Card Trick: A Fun CSS3 Experiment

This tutorial is based on a simple animated experiment that showcases just one of the amazing things you can create using CSS. No images and no scripting were used; everything’s done using HTML and CSS.

28. Guess the Stars

Guess the Stars is a little game demo using some 3D perspective, animation and reflections. They are just flat images from IMDb that get rendered with CSS3 into DVD cases. Unfortunately it only works in Safari.

29. Be hypnotized with pure CSS3 (creating an animated css3 spiral)

Experiment on how to create an animated pure css3 spiral.

30. CSS3 Ribbons

CSS3 title Ribbon. Works in IE9, FF4, C6, O10.

31. CSS3 Triangle Gradients

The pseudo :after selector is used to draw a box rotated 45º inside a box that has it’s clip property set to only show 50% of the box, so all you see is the side of a rotated box(aka a triangle).

32. CSS3: An Experiment

This is an experiment on how to make some pure CSS social media icons. Is not recommended to use them in a live project as a large portion of your visitors would not see the full effect.

33. The Reddit Alien in CSS

No images, no canvas, just some CSS. Best viewed in a modern browser.