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.

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

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.

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

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

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

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!

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.

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.

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.

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

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.

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

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.

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

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

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.

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!

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

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

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

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.

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.

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.

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

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.

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!

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

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

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

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

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

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

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.

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.

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.

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.

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

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.

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)

You can skip to the end and leave a response. Pinging is currently not allowed.