October’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.
Microsoft has released recently the first beta version of Internet Explorer 9 (a WinXp version is missing though); Louis Lazaris has put together a nice list with CSS3 properties support in IE9.
Here are the best CSS3 coding techniques and tutorials of October 2010, 29 fresh resources to help keeping up with new technologies.
Enjoy this list of CSS3 demos and experiments, don’t forget to check out the previous CSS3 resources round-ups in case that you missed any.
A big thank you to all our sponsor who make running this blog possible: DisciPlanner.
In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.
This tutorial will show you how to create a clean CSS navigation menu with a professional look.
Learn how to employ the latest web standards to fully recreate the famous Apple.com navigation in pure CSS.
Learn how to use CSS3 to create a nice, translucent Newsletter/RSS/Twitter/Facebook tab with rounded corners, gradient background and drop shadow. Full example and code download included.
A tutorial that explains how to display social media icons in a beautiful way using CSS3 and jQuery
No image was used for the buttons in the image bellow. CSS3 makes it possible to achieve this effect without images. And Compass makes it easy to use these advanced CSS3 features in a concise way that works across modern browsers.
Here’s a quick screencast demonstrating how you can use fancy buttons to easily generate beautiful flexible CSS3 buttons.
Lately it seems that CSS3 gradients are becoming increasingly popular as a styling option for buttons. They’re easily configurable without needing to leave your CSS coder, and they effortlessly stretch and resize as your button area does.
This is a tutorial to create a look-alike to IE’s native submit button.
Learn how to use CSS3 to make form inputs that look and feel the same in all WebKit browsers across platforms.
Learn how to make flag like labels to represent the range of social networks using CSS3.
Rolled corners are popular. Dimension is in. The CSS3 box-shadow property isn’t entirely flexible enough to really create the effect (masked shadows please!) but with a couple layers it can be approximated in some browsers within limits.
Borders and backgrounds are two of the most essential CSS elements. They are part of the groundwork that allow us to create aesthetically rich user interfaces, and help make the web a beautiful place to be.
Learn how to recreateone of the slides from the CSSReset’s homepage in CSS3, with a full breakdown.
A sleek image gallery that takes advantage of CSS3 animation, shadows, and the “transform” property to instantly add a smooth hover effect to its images, whereby the image enlarges and moves closer to the user.
This is a cool little experiment. It’s a sliding image gallery (one that would normally require jQuery), but this one uses only CSS3. It currently really only works in Safari or Chrome, because Firefox obviously isn’t WebKit based, so it doesn’t understand -webkit-animation.
Using CSS3 could have a big effect on bandwidth usage. Background images used purely for design are all costly, bandwidth consuming. If we’d use plain CSS to handle all the graphics, we could save at least a few KB per page.
If you consider that the graphics are about 50kb in size and the HTML + CSS is only 6kb, it might be worthwhile to use CSS logo’s almost.
Works in: Safari, Chrome, Firefox
Playing around with CSS3 box-shadow inset property to simulate lighting.
Here’s a quick look at how the transform property can produce a bounce effect, and how it can be used to create a super cool bouncing heart.
A tribute to the awesome wonder-wall by tha.ltd. And a demo of WebKitCSSMatrix. The wonder-wall effect is inspired by A tribute to the awesome wonder-wall by tha.ltd.
Using only CSS3 and very basic HTML, Andrew Hoyer constructed a simple man and made it walk. Works only in webkit browsers (beautifully in mobile safari).