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.
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.
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.
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.
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.
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.
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.
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.)
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
Another simple single level menu using CSS3 to animate a background image and foreground color change on hover.
In this article Ryan Seddon is fucusing on the orientation media query and have a fun demonstration showing how to use it.
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).
IE-CSS3 is a script to provide Internet Explorer support for several of the popular new styles available in the upcoming CSS3 standard.