10 New CSS3 Tutorials – December

This is our first real roundup of CSS techniques, although we wrote some articles about CSS tools. This time we choose to concentrate on some fresh and useful CSS3 tutorials.
Our definition of new and fresh CSS3 tutorials includes publication during actual period – and in our specific case the period is between October 1 and December 1 this year.

Note: Chris Coyier investigates in an article a number of different techniques for accomplishing fluid width equal height columns: Fluid Width Equal Height Columns

Cashrevelations.com presents a selection of new and fresh CSS3 techniques – 10 brand new CSS tutorials released during the period of October 1 until December 1 this year. All these interesting CSS3 techniques are presented with demo.

10 New & Fresh CSS3 Tutorials – December 2010

1. CSS3 Mega Drop-Down Menu
In this pedagogic tutorial by Guillaume Marty you will learn how to build a cross-browser, awesome and impressive CSS only drop-down mega menu, using nice CSS3 features – an effective solution to display a lot of content while keeping a clean layout.
View Demo

2. Flip Effect by Using CSS3
In this tutorial by Sam De Decker (aka DemiNoodle) you will learn how to create a stylish flip effect just by using the transform property – when the card is hovered, a webkit transform of rotateY is added, which rotates the object 180 degrees on the Y axis.
View Demo

3. CSS3 Animated Dropdown Navigation
In this tutorial by Eric Bannatyne you will learn how to build a pure and simple CSS3 animated dropdown menu. One advantage with this method is that you don’t need a browser that supports CSS3 transitions, your menu will work perfectly fine anyway.
View Demo

4. 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.
View Demo

5. CSS3 Slideup Boxes
In this video tutorial (screencast) by Chris Coyier you will learn how to create a few very simple CSS3 transitions to create a “slideup” box effect. Hover with your mouse, and the title slides out of the way and a descriptive box of information jockeys its way into place.
View Demo

6. Natural Object-Rotation With CSS3 3D
In this tutorial by Dirk Weber you will learn how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. Works in Chromium or Safari – the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad.
View Demo

7. CSS3 Floating Follow Tab With Rollover Effects
In this easy to follow tutorial by Matt Doyle you will learn how to use CSS3 to create a stylish and non-intrusive, translucent Newsletter, RSS, Twitter and Facebook tab with nicely rounded corners, gradient background and drop shadow.
View Demo

8. Reveal Extra Content With CSS3 Transitions
This is a nice source code by Jason Weaver that allows you to create a function to reveal some extra content with CSS3 transitions. Each post in the loop has the featured image, post title, comment count and “read more” link.
View Demo

9. CSS3 Box-Shadow Rolled Corners
This is a source code by Paul Farning that allows you to create box-shadow rolled corners with some CSS3. The box-shadow property isn’t entirely flexible enough to really create the effect, but with a couple layers it can be approximated in some browsers.
View Demo

10. Mimic Equal Columns With CSS3 Gradients
In this quick tutorial (with video in HD format) by Jeffrey Way you will learn how to in an easy way create some mimic equal columns with CSS3 gradients – with zero images. As usual with Nettuts+, you can also download all the source files of this tutorial.
View Demo

The different CSS3 tutorials presented here in this article are not in any particular order – and Cashrevelations is not by any means affiliated with anyone of the tutorial authors.

Related Posts :

iCheck - New jQuery Plugin

jQuerin Grid Builder

Landing Page Help

Initializr - HTML5 Template Generator