Join 18,800+ Readers

25 Useful CSS3 Techniques and Tutorials

by brantwilson

on March 9, 2010

in CSS Resources

Css3 have a capacity to revolutionize the way we design/develop website. css3 is intoducing loads of new and exciting features. Most of the browsers such as Firefox, Safari already support some of the CSS3 properties

It is essential today for a web designer to know about CSS3 and there are many tutorials and resources for the CSS3. Below i’ve listed 25 Useful CSS3 Techniques and Tutorials to get you started with CSS3, hope you find this collection useful

1.) Create a Dynamic Stack of Index Cards using CSS3

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).
25 Awesome CSS3 Techniques

2.) CSS3 Analogue Clock

Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time
25 Awesome CSS3 Techniques

3.) Awesome Overlays with CSS3

The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.
25 Awesome CSS3 Techniques

4.) CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile

What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo? After a few initial tests, the answer to both of those questions was a very solid “yes”. A solid “friggin’ right” if in Cape Breton.
25 Awesome CSS3 Techniques

5.) Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.
25 Awesome CSS3 Techniques

6.) Create Depth And Nice 3D Ribbons Only Using CSS3

We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.
25 Awesome CSS3 Techniques

7.) Sweet AJAX Tabs With jQuery 1.4 & CSS3

This post is a tutorial of making an AJAX-powered tab page with CSS3 and the newly released jQuery 1.4.
25 Awesome CSS3 Techniques

8.) Sweet tabbed navigation bar using CSS3

Although I don’t understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we’re using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.
25 Awesome CSS3 Techniques

9.) 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. And, of course, it uses CSS3 to style everything.
25 Awesome CSS3 Techniques

10.) Building Coverflow With CSS Transforms

I was able to create a coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.
25 Awesome CSS3 Techniques

11.) CSS3 Hover Tabs without JavaScript

With the new techniques in CSS3 and clever applications of existing CSS it is increasingly stepping on the toes of JavaScript. Which to be honest isn’t necessarily a bad thing. I thought I’d try my hand at something so here is a basic CSS tabbed content section that changes on hover.
25 Awesome CSS3 Techniques

12.) Going Nuts with CSS Transitions

I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.
25 Awesome CSS3 Techniques

13.) Fun with CSS3 and Mootols

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.
25 Awesome CSS3 Techniques

14.) Sliding Vinyl with CSS3

We take a standard album cover, a little HTML, and some CSS3 transitions and transforms to create a sliding vinyl effect for showing off the music you love.
25 Awesome CSS3 Techniques

15.) CSS3 animations and their jQuery equivalents

This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don’t forget to check the demo/download the source code to view how everything is working under the hood.
25 Awesome CSS3 Techniques

16.) 3D Cube using new CSS transformations

The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object.
25 Awesome CSS3 Techniques

17.) Super Awesome Buttons with CSS3 and RGBA

One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we’ve cooked up an example with some super awesome, scalable buttons.
25 Awesome CSS3 Techniques

18.) Shadows and CSS3

I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one.
I learned this technique from Dan Cederholm’s Handcrafted CSS book, so if you’re able I’d recommend just going out and grabbing that, as he explains it much more elegantly and thoroughly than I ever could.
25 Awesome CSS3 Techniques

19.) The CSS3 :not() selector

There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!
25 Awesome CSS3 Techniques

20.) Working With RGBA Colour

CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.
25 Awesome CSS3 Techniques

21.) Editable CSS3 Image Gallery

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).
25 Awesome CSS3 Techniques

22.) CSS Polaroid Photo Gallery

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.
25 Awesome CSS3 Techniques

23.) Rounded Corners with CSS3

As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.
25 Awesome CSS3 Techniques

24.) 11 Classic CSS Techniques Made Simple with CSS3

We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.
25 Awesome CSS3 Techniques

25.) How to bring CSS3 features into your design

Top web browser (such as Firefox 3.5 and Safari 4) have introduce some cool features you can already use. Now, with just a few lines of css you can do things you used to do with images and javascript.
25 Awesome CSS3 Techniques

Dzienblog Rss Feed

Powered by Shutterstock

About brantwilson

Brant Wilson is a staff writer for the DesignMag network. Brant enjoys all things design and development, dogs, and candy. Brant is passionate about training freelancers. Learn how you can earn $125+ freelancing. Start learning for free now! Connect with Brant on google+