banner

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.