As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari).
But what difference does it make for us today? At the moment only three browsers give you the ability to animate CSS properties – Chrome, Safari and Opera, which together take up only a small part of the browser market. Firefox is expected to soon join the club, and with the impending release of IE9, it suddenly makes sense to start leveraging this technique.
So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.
Direct link: CSS3 Minimalistic Navigation Menu
As CSS3 gains more buzz, more and more developers are finding great ways to utilize it. In my last post, I went over the great ways to develop buttons and how to effectively use imagery transitions. Now we will move on and talk about the great ways to use CSS3 for animation and 3D effects…
Direct link: What CSS3 Can Do For You: Animation and 3D effects
One thing any good developer will tell you is that efficiency is key. Whether that be workflow, the code itself, or just achieving a single goal. Invest a little forethought at the beginning to save a lot of time later. I like to think of it as being cleverly lazy. One great example of this is by simply utilising the id="" attribute on the <body> element. Yep, really, something as simple as that…
Direct link: Body IDs – Making Life Easier for Yourself
It seems like virtually every day there’s a fantastic new example of something amazing you can do with CSS3. Whether it’s as complex as full-blown animations or as relatively simple as RGBa colors, drop shadows, or rounded corners, I marvel at how far we’ve come since the lowly days of CSS1 or shudder the @font element. The current state of CSS3 reminds me of a typical cinematic device: The scene opens with us, this happy-go-lucky family of developers out for a picnic by the lake on a beautiful summer afternoon. And as we laugh, play, and scamper about entertaining ourselves, the camera pans around, bringing us over to the lake where, beneath the surface, something stirs. Something ominous and foreboding…
Direct link: Stop Forking with CSS3
In this article you’ll learn how to write leaner, cleaner CSS using 10+ micro-optimization techniques. The basic idea behind micro-optimizing your CSS involves writing clean code, eliminating extraneous characters, and reducing overall file size. And you don’t have to rely on an automated script to do everything for you. Instead of writing lazy, sloppy, bloated code and then just dumping your hideous CSS into an automated minifier, it’s better to understand and practice as many micro-optimization tips as possible, given your particular coding style and specific project requirements…
Direct link: How to Micro-Optimize Your CSS
An in-depth article covering both CSS 2.1 and CSS 3 Pseudo Classes…
Direct link: A Complete Guide to CSS pseudo-classes
Providing supplementary information about potentially complex elements of a user interface is a central part of any website designer or developer’s workflow in creating usable and accessible websites.
One of the most common mechanisms for providing extra details beyond what you can see on the page is the tooltip (a design pattern for showing tips about a particular element on a screen).
We’re going to look at how we can create some lovely cross-browser tooltips using only CSS…
Direct link: Sexy Tooltips with Just CSS
I was recently working on a personal project where I wanted to implement some cool “checkmark” icons like you see at left to spice up my unordered lists. I could’ve done it quite easily with the list-style-image property, but I was trying to keep my images and http requests to a minimum, so I wanted to figure out another way to do it plus, the challenge sounded kind of fun…
Direct link: Creating Fancy Checkmark Icons with Pure CSS3
An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off; works with semi-transparent images; doesn’t hide text from screen-readers or search engines; and provides fallback for IE6 and IE7…
Direct link: CSS Image Replacement with pseudo-elements (NIR)
The Twitter “Fail Whale” fully rendered using just CSS. If you’re using a Webkit browser Safari or Chrome, you’ll also see it’s animated. If you are viewing in IE8 or below, well, this isn’t an experiment for you…
Direct link: Pure CSS Twitter Fail Whale