40+ Really Useful CSS3 Techniques & Tutorials

CSS3 can improve your website to be more attractive, user friendly, and stylish, its Importance increase rapidly these days as it has many features and functions you will need in your website. CSS3 is essential for web designers and developers to learn all its exciting features, there are already been few posts on this crucial topic but still we need to put some extra efforts, So here is a collection of 40+ CSS3 tutorials and techniques which can be useful for your website.

Subtle CSS3 Typography that you’d Swear was Made in Photoshop

Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby! Let’s take a look in this video quick tip.

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.

Pure CSS speech bubbles

All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code.

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.

Working With RGBA Colour

When Tim and I were discussing the redesign of this site last year, one of the clear goals was to have a graphical style without making the pages heavy with a lot of images. When we launched, a lot of people were surprised that the design wasn’t built with PNGs. Instead we’d used RGBA colour values, which is part of the CSS3 specification.

A Glossy Button Using CSS

Last week I launched a holding page for Ecliptic Labs, an iPhone development company based in Belfast (keep an eye on them, there’s going to be some great stuff from them this year).

CSS3 Analogue Clock

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

CSS3 – Buttons – no graphics and no extra markup

This demonstration works in Firefox, Safari and Google Chrome and shows how to style buttons using just border radius, drop shadows and gradient fills. No graphics have been used in this demo and no extra markup. If you wanted to be adventurous you could also add a hover state change of gradient fill to give an illumination effect. When Opera support transitions I will add this to the demo, and when IE9 is released we will see if that too will support any CSS3 styles.

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.

5 Techniques to Acquaint You With CSS 3

CSS is a well-known, widely used language to style websites. With version three in the works, many time-saving features will be implemented. Although only the most modern browsers currently support these effects, it’s still fun to see what’s around the corner! In this tutorial I’ll show you five techniques.

CSS3 Box-Shadow Button with Inset Values (Aqua Button)

This is my third article on CSS3 No Image Aqua Buttons. The previous articles include:

1. CSS3 Gradients: No Image Aqua Button
2. CSS3 Aqua Button – Revisited for Firefox 3.6
3. And this one – Read on!

Super Awesome Buttons with CSS3 and RGBA

We love CSS at ZURB. We love it so much that we’re using the new, yet-to-be released version (CSS3) in some of our projects. In the works for nearly 10 years now, CSS3 is finally starting to see the light at the end of the tunnel as new browsers like Firefox and Safari continue to push its implementation.

Progressive Enhancement with CSS 3: A better experience for modern browsers

The latest releases of cutting-edge browsers (such as Safari 3 and Opera 9.5) implement some of the decorative declarations from the proposed CSS 3 specification. Opacity, shadows and tiger-striping effects are now available without the use of JavaScript, server-side code or extra markup. But with some older browsers still in everyday use, it can be a little frustrating to think that you might not get the chance to use them for another few years.

Pretty CSS3 buttons

I’ve come across quite a few sites that explain how to create flexible CSS3 buttons but i’ve never really spent the time to implement one until i found a great little write up courtesy of the guys over at the Zurb blog who have a fantastic post on creating CSS3 buttons. So i’ve taken their example and tweaked it to fit my needs. It’s worth noting that if your using Internet explorer you’re not going to see all these effects as IE still doesn’t support CSS3. Compatible CSS3 browsers are, Safari, Chrome and FireFox 3+.

CSS3 Gradient Generator

Welcome to the CSS3 Gradient Generator! Please be aware that in order to make the most use of this utility you will need either a webkit browser such as Safari or Google Chrome, or the Firefox 3.6 beta. Currently Internet Explorer does not support CSS based gradients. This tool is updated whenever implementation methods are changed.

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.

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

Create a fancy web form with field hints using only CSS3

CSS3 tricks have been pretty popular in the last while on various design blogs and with good reason. Like many of you, I’ve caught the CSS3 bug and this afternoon I took a stab at this nifty little method of adding hints to your form fields (as well as some fancy style enhancements) using CSS3. The cool part is you don’t require Javascript for the form field hints. Here’s a demo and run down of the code used.

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.

A Look at Some of the New Selectors Introduced in CSS3

Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes. It will allow designers and developers to implement designs much easier and quicker than before.

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

CSS 3 Cheat Sheet (PDF)

Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML 5 tags, their descriptions, their attributes and their support in HTML 4. In comments to this post we received many requests for a similar CSS 3 cheat sheet that would present the main features of CSS 3 in a handy, printable reference card.

CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile

Designing UI elements for a mobile browser has taught me a great deal when it comes to creating interactive graphical elements that are to be used in a very small space.  Of course, when I say small space, I mean a small space that has the potential to be different for each handset out there.  Not only are we talking resolution differences, but the screen DPI can change from device to device as well.

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!


The border-radius page in our CSS3 Preview section has been updated to reflect the latest version of the Backgrounds & Borders specification and the latest browser support. The page now offers a more comprehensive and easy to follow guide/tutorial, including cross-browser examples, which should enable any designer (whether novice or expert) to get to grips with border-radius in a matter of minutes

CSS 3 selectors explained

In September and October of 2005 I published a series of articles that explained the selectors that are available in CSS 2.1. A quick summary is that most of the selectors described in those articles can be used now in modern browsers like Mozilla/Firefox, Safari, and Opera.

Coverflow, anyone?

So I was looking at all the nice things the WebKit folks did, and one particular feature really got his way into my thoughts, and I was playing with possible usecases for weeks.. I’m talking about the CSS transforms.

CSS3 Dropdown Menu

While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons.

A Crash-Course in Advanced CSS3 Effects

Webkit is one of the few – if only – browser engines that really embraces advanced CSS3 effects. Unfortunately, this presents somewhat of a double-edged sword. We get to play with all of these amazing effects – such as CSS masks, reflections, transitions, animations, scaling, etc. – yet, we can’t truly implement them into our projects until more browsers provide support. With all of that said, it’s important to be on the cutting edge of what’s possible.

Creating a polaroid photo viewer with CSS3 and jQuery

A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look  pretty nice on polaroid. Placing them on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were

CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).

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. In one of our tutorials we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout.

Letterpress Text Effect Using Photoshop and CSS

Letterpress effect looks good in modern websites, letterpress effect can be gain using Photoshop and also using text-shadow property of CSS. So here today we will learn how to achieve Letterpress effect with photoshop and also with Css and in the end of this tutorials we have also collected some tutorials on Letterpress around design community

How To Create a Pure 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.

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).

Sweet AJAX Tabs With jQuery 1.4 & CSS3

Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. This allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.
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.

Using Rounded Corners with CSS3

A few years back, rounded corners became one of the signature design elements of the Web 2.0 trend. Even though they started as a fad, rounded corners are more than simple eye candy. They also have a role in separating or grouping the sections of a page. 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.

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!

You Might Also Like


  1. Pingback: favshare.net
  2. Pingback: Servefault.com
  3. Pingback: Web Mee
  4. 6
  5. Pingback: plungs.com
  6. Pingback: joyoge.com
  7. 9
  8. 10

    This is a good article about design. I’m just trying to learn more about CSS and I really enjoyed reading it. Thanks and I’m looking forward to what’s next!

Comments are closed.