CSS3

You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the ugly verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more.

I made a little CSS3 rotate-y loading graphic thing just for kicks.

Even though we’re definitely living in the Flickr Age (apparently that’s the one that comes right after the Age of Aquarius), there’s still something so lovely about being able to spread a big boxful of photos over my kitchen table. In fact, my favorite screensaver does a pretty good job of emulating this — it’s the one built into MacOS X that grabs photos from your iPhoto library, and scatters them gradually all over the screen in a nice, messy pile.

Could we achieve this with CSS3 alone? I bet you’re already thinking of ways to make that work. Unfortunately, the versions of Firefox and IE that will support them are still in beta — and even when they do come out, we all know how long it takes the world to upgrade their browsers. For now, let’s look at a hybrid approach…

One of the more popular and simple effects I’ve featured on this blog over the past year has been linking nudging. I’ve created this effect with three flavors of JavaScript: MooTools, jQuery, and even the Dojo Toolkit. Luckily CSS3 (almost) allows us to ditch JavaScript entirely to create the link nudge effect!

When MooTools contributor and moo4q creator Ryan Florence first showed me his outstanding CSS animation post, I was floored. His exploding text effect is an amazing example of the power of CSS3 and a dash of JavaScript. I wanted to implement this effect on my new blog redesign but with a bit more pop, so I wrote some MooTools code to take static image and make it an animated, exploding masterpiece. Let me show you how I did it, and as a bonus, I’m created a snippet of jQuery that accomplishes the same effect.

Recently I talked about CSS cross-browser gradients and last week I wrote again about CSS3 gradients. So what I’m going to do today? I will show you how to put the CSS gradient feature in practical use.

In this article you will see how you can create a set of gradient buttons just with CSS (no images).

When I just finished creating the animated 3d helix, I came up with an idea that would look a lot like that one. Instead of having the flip animation on top of each other, I wanted to have them placed next to each other. This looks a lot like an animation most of you will know; a rotating billboard.

When you only show two images, it would be pretty simple since the CSS would look a lot like the CSS from my previous demo. That’s why I wanted to take it just a little step further and let the billboard show three images.

I recently came across a great looking set of navigational buttons designed by Orman Clark of Premium Pixels. I’m a big fan of his design style and decided to whip together a quick CSS3/HTML version of the buttons. Check out the demo and feel free to download the example zip file as well.

This is a pure CSS3 drop down menu. Unlike other examples of CSS3 drop downs, this one uses transitions to animate the menu giving more a few jQuery feel. The article explains which selectors must be used and which cannot be used to create this effect. There is no JavaScript used in this demo.The final working demo is available here: http://vogtjosh.com/nav/css3-dropdown.html

A lightbox often refers to a pop-in window that can be used to display images, videos and html content in modern web applications. There are many fantastic javascript Lightbox solutions available on the web, however this article is focusing on CSS3 Modal Window solutions.

CSS3 is still under development and not all browsers support it, which mean this CSS3 Lightbox solutions are not cross-browser compatible (only the latest versions of the modern non-IE web browsers support CSS3).

In this post, I’ll be featuring 10 awesome CSS3 Lightbox and modal windows that you can use on you web applications.