50 Outstanding CSS3 Tutorials
The Web Dev Zone is brought to you in partnership with Mendix. Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.
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.
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.
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.
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.”
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).
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.
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!
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.
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.
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.
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.
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.
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
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
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.
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
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
themes and three sizes are also available by assigning additional class
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.
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.
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.
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.
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.
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
Today we are making a carbon fiber – style form, build using
progressive enhancement. This means that we first ensure that the form
and later move on by layering over cool styling, AJAX and jQuery magic.
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
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.
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.
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.
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.
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.