CSS3 is taking web development and web design to a higher level. In this article, I have compiled examples of amazing CSS3 tutorials, tips and techniques that will probably become very popular when CSS3 will be fully supported by most browsers.

Circle Navigation Effect with CSS3

You ll learn how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions.

Curing CSS3 Headaches in Older Browsers

In this tutorial you will learn how to conquer CSS3 in older browsers, including Internet Explorer..

Discover the power of CSS3 selectors

With a range of selectors available, it can be difficult to know which type of selector to use. As the new CSS3 selectors are introduced, we’ll provide real-world use cases for them to use in your projects right away.

CSS3 Loading Animation Loop

In this css3 tutorial we’re going to see and create three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery. I remember this animations are only visible in Firefox, Safari and Chrome.

Are You Using CSS3 Appropriately?

In terms of design principles and visual presentation best practices, nothing has been altered by CSS3, even when we’ve been given fancy transitions, transforms and typography effects to play with. These are all superficial tools in web design, and we’ve had these things even before CSS3.

CSS3 Image Styles

You ll learn how to use box-shadow, border-radius and transition to create various image styles.

Pure CSS Text Gradients

With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don’t currently have the ability to apply gradients to the text itself.

CSS3 Flexible Box Layout Explained

The flexible box layout module — or “flexbox,” to use its popular nickname — is an interesting part of the W3C Working Draft. The flexbox specification is still a draft and subject to change, so keep your eyes on the W3C, but it is part of a new arsenal of properties that will revolutionize how we lay out pages. At least it will be when cross-browser support catches up.

Creating Slick, Stylish and Scalable CSS3 Buttons

CSS3 is rapidly expanding the toolkit that web developers and designers have to make visually appealing components without the use of images, Photoshop, or CSS sprites. While all of those have their place, and will never be completely removed from the development process, buttons are one component of a website that we can make dynamic, slick and scalable – exclusively in code.

How to Create a Beautiful Icon with CSS3

We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element.

Creative CSS3 Animation Menus

The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements.

Smooth Fading Image Captions with Pure CSS3

One CSS3 feature that is really starting to gain traction now is transitions. CSS transitions allow you to smoothly animate an element’s CSS properties from one state to another, without using a single line of JavaScript.

Create a Swish CSS3 Folded Ribbon in Five Minutes

Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes.

How to Build a Fully Functional CSS3-Only Content Slider

Content sliders are a great way to make a website more dynamic. They add flair, and if used correctly, could be the difference between a purchase and a back button. Normally, they would be built with jQuery or some other Javascript library.

Blur Menu with CSS3 Transitions

There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. In this post you ll learn how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.

Twitter logo

How to draw the Twitter logo with 100% CSS. No javascript! No images!