April’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 28 useful CSS3 coding techniques and tutorials published in april 2010, ready to be implemented in your future web design projects.


Learn how to recreate the Windows 7 Start menu using only CSS3 gradients, shadows and transparency.
Windows 7 start menu using CSS3 only

For those of you who don’t know, a vignette effect is a discoloration on the edges of an image. This effect usually appears in photography and it can be either accidental or intentional. The technique involves a few divs, a bit of simple CSS, and a whole lot of fun.
CSS3 vignette - cool scrolling gallery

In this tutorial you will be shown how to develop an image gallery using the pseudo-class: target of CSS3. The Pseudo-class: target’s job is to change the styles of the target element.
CSS3 image gallery with psude-class

Learn how to build a CSS3 accordion that should work on all modern browsers and degrade gracefully for less fortunate ones. To achieve this we will use “hover” instead of “target” pseudo class which is not yet supported in any version of Internet Explorer.
Pure CSS3 Vertical Accordion

Here’s a pure CSS3 horizontal accordion. It uses same markup enabling you to switch from vertical to horizontal accordion and vice versa by simply changing the class name.
Pure CSS3 Horizontal Accordion

The nth-child pseudo-selector of CSS3 can be used for so many things, but in this short tutorial you will be learning how to create a cool messy list.
Cool Messy List with CSS3 and nth-child

In this tutorial, Almeros explains how you can create a CSS3 powered tag cloud yourself, like the one that he is using right now. Only on webkit browsers like Google Chrome and Safari you’ll also see an animation when hovering over the tags.
CSS3 tag cloud

Learn how to make an angle navigation which you can use and adapt to various projects. (Note: the transform CSS code doesn’t work in Internet Explorer.)
Crazy Angle Navigation CSS3

Learn how to create a working content slider without the aid of JavaScript, using layers in CSS and using CSS3 transitions to give the slider the necessary animation.
Content Slider Using Pure CSS

There are many ways to create an accordion menu, most of them use a javascript library like jQuery to make the effect runs cross browsers. In this tutorial, we’ll see how to make an accordion menu using CSS3 transition. It works on most modern browsers that support CSS3.
Accordion Menu Using CSS3 Transition

Dynamic CSS3 Animated Accordian Menu

Another impressive and eagerly anticipated CSS3 update is the ability to use multiple backgrounds on a single HTML element. CSS3 Multiple Backgrounds are now supported by FireFox, Safari and Chrome leaving only Internet Explorer.
Web Design with CSS3 Multiple=

The aim of this tutorial is to create an elegant blog/portfolio for an efficient professional (graphic and web designer or photographer). Below you can see the final result which is coded through two new great technologies, HTML 5 and CSS3.
 Elegant Website With HTML 5 And CSS3

This tutorial describes a great CSS property: -webkit-perspective. The perspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.
3d animation using pure CSS3

In this brief tutorial we’ll take go crazy with CSS3 transitions in Webkit to create a simple web page that showcases some really nice color fade effects.
 Color Changing Website Using CSS3

This is a neat little technique that is accomplished easily using the CSS3 :target pseudo-class selector. Unfortunately, this is another CSS3 feature that has no support in Internet Explorer, and so has been largely overlooked up to this point.
css3 highlighted footnotes

These icons use lots of CSS3, border-radius being the most obvious but also rotation, gradients and transform (for when an icon is hovered over).
Pure CSS3 Icons

Stylizing input element is a common task for us as a web developer, we can make it look nicer by putting stylized input image (color gradient, smooth border, box shadow, etc) as an input background. Nice but the images also take some of our bandwidth, thankfully CSS3 adds some support for element styling, so we can replace them with only CSS.
Stylize Input Element Using CSS3

Learn how to make CSS3 Tabs like those found on the jQuery conference website, image-less, with CSS3 gradients, inner shadow, rounded corners, and CSS transitions.
CSS3 Glow Tabs with Box Shadow

Gradient buttons created with just CSS (no image or Javascript) are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values.
CSS3 Gradient Buttons

Here is a quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button would show people just how amazing CSS3 is.
Gradient Buttons with CSS3

Inspired by Jay on the Inference blog – CSS3 button implementation, Matt Wiebe shows you how to make press-able buttons with with leaner markup, more CSS3 goodies, zero images, and way more flexibility.
Realistic Looking CSS3 Buttons

Just a simple implementation of CSS3 transitions to produce a zoom menu that previously require javascript. The styling is ready for Firefox once they add CSS3 transitions support to their browser.
CSS3 Zoom Menu

This menu has an animated ‘slide-down / slide-up’ action for the sub menus which also have CSS3 border radius and CSS3 drop shadows with transparency. So no more need to use javascript / jQuery to produce this and it only takes a couple of lines of style.
CSS3 slide menu

Another simple single level menu using CSS3 to animate a background image and foreground color change on hover.
CSS3 Backslide menu

In this article Ryan Seddon is fucusing on the orientation media query and have a fun demonstration showing how to use it.
CSS3 Orientation Media Queries

Louis Lazaris has collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use).
CSS3 Solutions for IE

IE-CSS3 is a script to provide Internet Explorer support for several of the popular new styles available in the upcoming CSS3 standard.
CSS3 support for Internet Explorer


Related Posts:





freepsdtemplate.com - daily updated PSD resources for webdesigners