50 Outstanding CSS3 Tutorials
Almost all modern browsers support CSS3. In this post, we present 50 best css3 tutorials for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.
CSS3 Tutorials 2010
We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. A button that is scaleable meaning that we can make it a variety of sizes and colours with ease.
2. Creating Dynamic Buttons With CSS3
Creating buttons with CSS becomes a lot more comfortable. The
following example demonstrates how to create nice looking, dynamic
buttons that are fully scaleable using the new CSS3 properties
border-radius, box-shadow and RGBa.
3. How to Create Inset Typography with CSS3
In this tutorial, we’ll create inset type, a popular text treatment,
using CSS. If you follow Six Revisions closely, you’re probably
thinking: “Jacob already wrote a Photoshop tutorial on how to do that.”
4. Use CSS3 to Create a Dynamic Stack of Index Cards
We will create a dynamic stack of index
cards solely with HTML and CSS3 and use such CSS3 features as transform
and transition (for the dynamic effects) and @font-face, box-shadow and
border-radius (for the styling).
5. Box-shadow
The box-shadow property allows designers to easily implement multiple
drop shadows (outer or inner) on box elements, specifying values for
color, size, blur and offset.
We take a basic list of links and turn them into an awesome OS X dock of icons.
These overlays use a number of new CSS properties, some of which are simple like
border-radius and using RGBa colors.
8. CSS3 Background-Clip & @Font-Face
With no clear purpose or plan, I’ve resolved to experiment with CSS3
on a regular basis. Some of these note-posts may be more useful and
practical than others, but the only way to know for sure is to learn by
doing. 
I had a lot of fun dabbling in CSS3 on a recent post, but had to hold
back a bit to keep things looking presentable in most browsers. To
carry out the DIN typeface I chose into the header, I used a transparent
png with the letters knocked out to achieve that subtle yellow to blue
fade animation.
10. How To Design A Sexy Button Using CSS
11. Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3
This custom dialog box is one of the scripts in that website and I
think it will be quite useful for all of us. The reason I have this
custom dialog box is to overcome the inconsistencies across different
browsers. It uses CSS3 to style everything and it looks really nice!
12. BounceBox Notification Plugin With jQuery & CSS3
Earlier this week, while working on ZineScripts‘ coupon code system, I
found the need to be able to dynamically create and present a message
box to Zine’s visitors. The usual routine would include digging through
jQuery’s plugin repository and ending up with using a lightbox
alternative, but I decided to take the time and build an one-off
notification solution, which I am sharing with you today.
13. Create a Vibrant Digital Poster Design with CSS3
CSS has come a long way in recent years, and with new browser support
for a hand full of CSS3 properties we can begin to replicate design
styles directly in the browser that beforehand were recently only
possible in our design applications. Follow this walkthrough of the
making of Circlicious, a vibrant and abstract digital poster design made
purely of HTML and CSS.
14. CSS3 Box-Shadow with Inset Values – The Aqua Button ReReVisited!
This is my third article on CSS3 No Image Aqua Buttons.
15. Roll Your Own Google Buttons
Google has a new focus on webkit-specific properties thanks to their
new Chrome browser, which uses a branch of the same rendering engine
Safari uses. This has actually allowed them to target the Google
homepage to the webkit engine, probably after some sort of browser
detection.
16. How To Create Depth And Nice 3D Ribbons Only Using CSS3
In this last period on PV.M Garage we have described many trends of
the modern Web Design and many techniques for creating stunning and
impressive web sites.
17. Fun with CSS3 and mootools
These examples came about when experimenting with the extend property
in MooTools. By extending the styles class I could add CSS3 properties
into the Core MooTools framework and do CSS3 animations.
Today I’m going to show you how to put the CSS gradient feature in a good practical use. 
20. Cool Sprites – Free overlapped CSS menu using CSS Sprites
22. Border-image: using images for your border
Another exciting new border feature of CSS3 is the property
border-image. With this feature you can define an image to be used
instead of the normal border of an element. This feature is actually
split up into a couple of properties: border-image and
border-corner-image.
23. Halftone Navigation Menu With jQuery & CSS3
Today we are making a CSS3 & jQuery halftone-style navigation
menu, which will allow you to display animated halftone-style shapes in
accordance with the navigation links, and will provide a simple editor
for creating additional shapes as well.
24. Coding a Rotating Image Slideshow w/ CSS3 and jQuery
Today we are going to use jQuery and CSS3 rotations, along with the
jQuery rotate plugin, to create a beautiful slideshow. You can use it to
spice up your web sites, product pages and other projects with some
CSS3 magic.
26. Sweet AJAX Tabs With jQuery 1.4 & CSS3
Today we are making an AJAX-powered tab page with CSS3 and the newly
released version 1.4 of jQuery, so be sure to download the zip archive
from the button above and continue with step one.
27. Creating a Realistic Looking Button with CSS3
I had previously created the Cadmus “post” button in Photoshop and it
was essentially three images for the different states. I wanted to use
this style for all our buttons, but doing it with single images is not a
good idea. So I set about creating the same style of the buttons with
CSS3.
28. Making Better Select Elements with jQuery and CSS3
This is why, today we are building a script that is going to take an
ordinary select element, and replace it with a better looking, markup
powered version, while keeping all the functionality intact.
29. Making a Sleek Feed Widget With YQL, jQuery & CSS3
Today we are making a sleek feed widget, that will fetch any feed and
display it in your blog sidebar. You can set it up to show the latest
posts from the different categories of your blog, your latest stumbles,
or even people mentioning you on twitter.
30. Making a Photoshoot Effect With jQuery & CSS
We are creating a photo shoot effect with our just-released
PhotoShoot jQuery plug-in. With it you can convert a regular div on the
page into a photo shooting stage simulating a camera-like feel. Using
this plug-in, we give visitors the ability to take shots of the
background image.
31. CSS3 Animated Bubble Buttons
This week we are creating 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. Four color
themes and three sizes are also available by assigning additional class
names.
32. CSS3 Minimalistic Navigation Menu
So today we are making something practical – a simple CSS3 animated
navigation menu, which degrades gracefully in older browsers and is
future-proofed to work with the next generation of browsers.
33. 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 animation using pure
CSS3.
34. Beautiful Photo Stack Gallery with jQuery and CSS3
In this tutorial we are going to create a nice and fresh image
gallery. The idea is to show the albums as a slider, and when an album
is chosen, we show the images of that album as a beautiful photo stack.
In the photo stack view, we can browse through the images by putting the
top most image behind all the stack with a slick animation.
35. Contextual Slideout Tips With jQuery & CSS3
Knowing the importance of HTML standards, we are making a set of
contextual slideout tips with jQuery & CSS3, which are ideal for
product pages and online tours. As a bonus, they are SEO friendly, so
all the content is visible to search engines.
36. HTML5 and CSS3 Without Guilt
Not every HTML5 or CSS3 feature has widespread browser support,
naturally. To compensate for this, enterprising developers have created a
number of tools to let you use these technologies today, without
leaving behind users who still live in the stone age.
37. Display social icons in a beautiful way using CSS3
I wanted to take this concept and bring it to the next level using
CSS3 transitions. The goal was to slowly fade-in and fade-out the
opacity changing, and animate the position of the tooltip a little bit.
With that in mind, I was able to create a beautiful social media icons
display using CSS3.
38. 10 CSS3 Properties you Need to be Familiar with
The key is to first determine whether or not you’re okay with a
slightly different presentation from browser to browser. Are you okay
with, say, IE displaying 90 degree corners, rather than slick rounded
ones? That’s up to you to decide. However, always remember that websites
needn’t look identical in every browser. At the conclusion of this
article, we’ll work on a fun final project.
39. Animated wicked CSS3 3d bar chart
Do you remember the Wicked CSS3 3d bar chart that I placed online a
couple of weeks ago? Paul Irish left a comment, requesting for an
example with transitions. My reply was that I was already working on
that, and today I’m proud to release the animated wicked CSS3 3d bar
chart.
40. Carbon Fiber Signup Form With PHP, jQuery and CSS3
Today we are making a carbon fiber – style form, build using
progressive enhancement. This means that we first ensure that the form
works well without JavaScript and fancy CSS support (think of IE6 here)
and later move on by layering over cool styling, AJAX and jQuery magic.
41. Build Awesome Practical CSS3 Buttons
What once required background images and icons can now be created
with plain-old CSS. Because modern browsers have access to things like
box shadow, gradients, rounded corners, text-shadows, and font-face, we
can finally take advantage of this and remove any need for images, when
creating visual elements, such as buttons! I’ll show you how in today’s
video tutorial.
42. Colorful Sliders With jQuery & CSS3
In this tutorial we are using jQuery and the new transformation
features brought by CSS3 to create a three dimensional dynamic slider
effect. The techniques presented here – for creating sliders, and CSS
dynamic resizable bars, can be used together or in part for powering all
sorts of jQuery goodness.
43. CSS3 animations and their jQuery equivalents
At the same time, I wanted to see if those animations with CSS3 could
be created with jQuery too (especially for those browser that don’t
support CSS3 animations yet). So today, I present you Five examples of
CSS3 animations and their jQuery equivalents.
44. Coding a CSS3 & HTML5 One-Page Website Template
Today we are making a HTML5 web template, using some of the new
features brought by CSS3 and jQuery, with the scrollTo plug-in. As HTML5
is still a work in progress, you can optionally download a XHTML
version of the template here.
45. How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
46. Introducing the CSS3 Multi-Column Module
47. Getting to Work with CSS3 Power Tools
CSS3 is one of the coolest new web technologies available to web
developers right now. Using some of its many features, it is possible to
reproduce the effects that you might have previously done in Photoshop,
with CSS code that is more maintainable, faster to load, and hip with
the latest trends. Read on to learn about the power tools available to
you and how to combine them to produce the ultimate graphical effects.
48. Subtle CSS3 Typography that you’d Swear was Made in Photoshop
49. How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery
In this tutorial, we’ll take a look and see what we can achieve with
HTML5 and CSS3 when it comes to the staple of current web sites: the
humble drop-down navigation menu. We’ll also use jQuery to handle the
effects and add the finishing touches for us.
50. Design a Prettier Web Form with CSS 3
By following this tutorial you will not only end up with a lightweight and beautiful form, you’ll also learn and understand new CSS3 techniques, such as box-shadow, gradients, opaque colors, and rounded corners.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
