October’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 October 2010, 29 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.

A big thank you to all our sponsor who make running this blog possible: DisciPlanner.

1. How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.

2. How To Create A Simple Drop Down Menu With CSS3

In this tutorial, you will learn how to create a beautiful drop down menu using CSS3. We are going to create the menu without using Javascript, only CSS properties.

3. Pure CSS3 Animated Dropdown Navigation

One common technique that is completely doable with CSS, but which still remains in the realm of jQuery and other Javascript techniques, is animated dropdown menus.

4. Horizontal drop-down menu using CSS3

This tutorial will show you how to create a clean CSS navigation menu with a professional look.

5. Pure CSS3 : Apple.com Navigation

Learn how to employ the latest web standards to fully recreate the famous Apple.com navigation in pure CSS.

6. How to Make a CSS3 Floating Follow Tab with Rollover Effects

Learn how to use CSS3 to create a nice, translucent Newsletter/RSS/Twitter/Facebook tab with rounded corners, gradient background and drop shadow. Full example and code download included.

7. Display social icons in a beautiful way using CSS3

A tutorial that explains how to display social media icons in a beautiful way using CSS3 and jQuery

8. CSS3 Animated Bubble Buttons

Learn how to create a useful set of animated buttons with the power of CSS3′s multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary.

9. Multi-Line Buttons With Compass, Sass, and CSS3

No image was used for the buttons in the image bellow. CSS3 makes it possible to achieve this effect without images. And Compass makes it easy to use these advanced CSS3 features in a concise way that works across modern browsers.

10. Zero to Fancy Buttons

Here’s a quick screencast demonstrating how you can use fancy buttons to easily generate beautiful flexible CSS3 buttons.

11. Shadow Boxing: Image-free, CSS3, Glossy Buttons

Lately it seems that CSS3 gradients are becoming increasingly popular as a styling option for buttons. They’re easily configurable without needing to leave your CSS coder, and they effortlessly stretch and resize as your button area does.

12. Primate Labs Download Button Css3 For Dribbble

13. CSS3 Submit Button

This is a tutorial to create a look-alike to IE’s native submit button.

14. Customizing web forms with CSS3 and WebKit

Learn how to use CSS3 to make form inputs that look and feel the same in all WebKit browsers across platforms.

15. Sexy CSS3 Tooltips

When building a website, there are a number of positions or functions we have to use the tooltip captions or instructions for users to use, usually we tend to use javascript to create the tool tip, there is a for example, just use css and some of the CSS3 properties to create the tooltip are great.

16. Reveal Extra Content with CSS3 Transitions

17. Making Labels with CSS3

Learn how to make flag like labels to represent the range of social networks using CSS3.

18. CSS3 box-shadow rolled corners

Rolled corners are popular. Dimension is in. The CSS3 box-shadow property isn’t entirely flexible enough to really create the effect (masked shadows please!) but with a couple layers it can be approximated in some browsers within limits.

19. An (Almost) Complete Guide to CSS3 Borders & Backgrounds

Borders and backgrounds are two of the most essential CSS elements. They are part of the groundwork that allow us to create aesthetically rich user interfaces, and help make the web a beautiful place to be.

20. Fun with -webkit-background-clip and @font-face

Learn how to recreateone of the slides from the CSSReset’s homepage in CSS3, with a full breakdown.

21. CSS3 attributes used to create 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.

22. Pure CSS3 Sliding Image Gallery

This is a cool little experiment. It’s a sliding image gallery (one that would normally require jQuery), but this one uses only CSS3. It currently really only works in Safari or Chrome, because Firefox obviously isn’t WebKit based, so it doesn’t understand -webkit-animation.

23. Recreating Tumblr’s “Updating…” page using pure CSS3 (with fallbacks for older browsers)

Using CSS3 could have a big effect on bandwidth usage. Background images used purely for design are all costly, bandwidth consuming. If we’d use plain CSS to handle all the graphics, we could save at least a few KB per page.

24. How to Create a Twitter Logo in Pure CSS3

In this tutorial we will use mostly the border-radius property in order to design the Twitter’s “T” in pure CSS! We won’t use pics or JavaScript. Only pure, beautiful, CSS3 and a bit of HTML markup!

25. Replicate Facebook’s logo without graphics using CSS3

If you consider that the graphics are about 50kb in size and the HTML + CSS is only 6kb, it might be worthwhile to use CSS logo’s almost.

Works in: Safari, Chrome, Firefox

26. Css3 Lighting

Playing around with CSS3 box-shadow inset property to simulate lighting.

27. Create a Bouncing Heart With CSS

Here’s a quick look at how the transform property can produce a bounce effect, and how it can be used to create a super cool bouncing heart.

28. Wonder Webkit

A tribute to the awesome wonder-wall by tha.ltd. And a demo of WebKitCSSMatrix. The wonder-wall effect is inspired by A tribute to the awesome wonder-wall by tha.ltd.

29. How I Learned to Walk

Using only CSS3 and very basic HTML, Andrew Hoyer constructed a simple man and made it walk. Works only in webkit browsers (beautifully in mobile safari).