May’s Best Resources for CSS3


Cascading Style Sheets Level 3 or CSS3 for short is the next stage CSS. CSS3 can really improve efficiency, both in your development time and page performance. The latest versions of the modern web browsers such as Chrome, Firefox, Safari, and Opera support CSS3, while Microsoft announced to support CSS3 in Internet Explorer 9 (there’s no release date for IE9 yet).
Here are the best CSS3 coding techniques and tutorials of May 2010, 42 fresh resources to test and implement in your future web design projects.


Learn how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup.
Pimp Your Tables with CSS3

Here is a basic CSS tabbed content section that changes on hover.
CSS hover tabs

CSS3 has some great support for 3D transforms, perspective, and animation. With that we can take regular objects (WordPress posts in this case) and animate them. I created 3 different shapes the posts can form while rotating.
3D CSS3 WordPress Theme

By using CSS3 gradients, transitions, 2d transforms and clipping, Román Cortés has achieved this pure CSS3 — without Javascript — page flipping effect.
Pure CSS3 Page Flip Effect

A corner ad should be triangular, and so should its clickable area. CSS3 now makes that possible.
Corner Ads with CSS3 Transforms

There are thousands of uses for image free gradients on the web, so here is a use that Alex Whinfield came up with.
Displaying Advertisements in CSS3

Add some style to your site with this pure CSS3 infobox, featuring a 3D ribbon header. Oh, and did we say there’s no images!
Pure CSS 3D Ribbon

This is an image gallery that has a slide effect. The idea is to get one image to slide in while the current image slides out. There’s a lot of z-index going on as well so the new image always appears to be at the top.
CSS3 Sliding Image Gallery

Most of these sliders are created by Javascript. But with CSS3′s strength, we can implement an image slider with only pure CSS3. This article will guide you to do that.
Image Slider With Pure CSS3

In this post you will learn how to create a sexy css effect on image hover.This kinda effect you have seen before in Flash or in javascript as well. But why use Flash or js when CSS can do the same work.
Image Hover Effects using CSS3

A slideout single level menu that works in all browsers including IE6 and IE7, but has css3 animation for those browsers that support these styles (Safari, Chrome and Opera at the moment).
CSS3 'Single Slideout' menu

In this tutorial we are going to use some of the basic techniques of the CSS3. We are creating simple navigation menu with linear gradient created in CSS3 style sheet.
Simple Navigation using CSS3 Styling

A couple of simple animated menus created using only CSS3 (using the transition property) that degrade nicely on Internet Explorer.
Slick Animated Menus Using Only CSS3

In this example you will learn how to create a menu with css that uses the propriety -moz-border-radius.
Demo work only on Firefox.
CSS3 Menu using -moz-border-radius

Here is a tutorial on how you can make a gorgeous CSS3 button in no time at all.
CSS3 Buttons With Rollover Effect

Learn how you can use some of these new CSS3 properties to create lightweight, good looking buttons.
Styling Pretty Buttons with CSS3

Awesome Button using CSS3

While playing around with a few button designs for his latest project, Monji came up with a simple CSS-only button system that is both lightweight and compatible with nearly all major browsers.
Awesome Button using CSS3

Realistic CSS3 Buttons Redux

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!
Build Kick-Ass Practical CSS3 Buttons

Learn how to pretty FeedBurner like counter using the new CSS3 properties: border-radius and box-shadow.
 FeedBurner Counter With Only CSS3

Learn how to create a subscription box using simple HTML markup and a few advanced CSS3 properties.
Subscription box using CSS3

Simple yet effective way to build a visually appealing search form with CSS3.
Beautiful CSS3 Search Form

Twitter has a nice effect in presenting their tweet box by adding outer glow effect on it while the tweeps are tweeting. If you’re webkit-based browser user you must’ve notice that glowing effect works with the animation.
Beautiful CSS3 Search Form

Nowadays a lot of websites use rounded corners to dress up their content, and since CSS3 appeared they become more and more frequent. Here is a solution for making rounded corner boxes work even in IE.
 Rounded Corners Using CSS3, even on IE

In the past, to create a block hover state that had rounded corners, we had no choice but to create an image to appear on the element’s background. In browsers that support CSS3, there is no need to use any images now.
 CSS3 Border Radius for Hover States

For all LOST fans, this is an example how to create the intro using 3 new properties available in CSS3: transformations, transitions and shadows.
Use google translate this page from spanish to your preffered language. The code is available for download
LOST intro using CSS3

CSS offers a variety of styling options that allow you a great deal of control over how your present your content to your viewers and users. We’re going to take a detailed look at how to create a beautiful and attractive typographic design using a variety of awesome CSS3 rules.
Beautiful CSS3 Typography

CSS offers a variety of styling options that allow you a great deal of control over how your present your content to your we We don’t currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect — at least in webkit browsers!
Pure CSS Text Gradients

Here is an CSS3 experiment using background-clip & @font-face techniques for some awesome text.
CSS3 Background-Clip & Font-Face

Drop caps are often seen at the beginning of novels, where the top of the first letter of the first word lines up with the top of the first sentence and drops down to the third or four sentence. This is also commonly seen in magazines and newspapers
Drop Caps in WordPress blog using CSS3

All CSS Internet Explorer Logo, a logo built completely in CSS, without any graphics (best viewed with Firefox 3.6+).
Internet Explorer Pure CSS3 Logo

Check out the example to see that (almost) no images were used to create 3D bar chart.
Wicked CSS3 3d bar chart

Check out this realistic Ipod just with CSS3 and no images at all, created by Teylor Feliz.
Realistic Ipod with CSS3

How to make starbursts without images with CSS3 transforms and transitions.
CSS3 Starbursts

CSS3 MInimal Admin is a single page template that can easily be implemented as a backend admin. To download this template you need to sign up for the mailing list.
CSS3 Minimal Admin Template

For over six years, CSS3 columns have been available to us; yet, strangely, they’re rarely utilized. You will learn how to use this helpful module in this video quick tip.
The Multi-Column CSS3 Module

Learn how to create a tooltip using the famous coda style, which allows for an animated pop-up window that makes for a great effect.
Bubble Coda Style with CSS3

This article focuses solely on CSS Transitions, though the lessons learned often apply to CSS Animations as well. You’ll have to use a browser that supports CSS Transitions: Safari as of 3.1.2, Chrome, Firefox 3.7 alpha or Opera 10.5x.
Interactions with CSS Transitions

CSS3 transitions are now available on Firefox 3.6.4, and it’s awesome.Javascript is not anymore required for simple animation.
CSS3 Transitions available on Firefox

This is an attempt to recre ate our solar sys tem using CSS3 fea tures such as border-radius, trans forms and anim a tions. The res ult is sur pris ing and quite interesting.
Our Solar System in CSS3

A game of memory in which you will have to find three matching cards. (as a tribute to the CSS level used for the transitions)
CSS3 Memory game


Related Posts:





freepsdtemplate.com - daily updated PSD resources for webdesigners