CSS3

Now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box.

CSS3 can help you create beautiful shadows without actually needing Photoshop anymore.

In this free six minute video from Think Vitamin, you’ll learn about all of the new attribute selectors in CSS3, allowing for more fine grained control of your page styles.

As we have seen during these past few months, CSS3 and HTML5 have demonstrated that designing is now possible without using graphic programs and relying entirely on code. On today’s tutorial we will show you how to make the fascinating set of frame boxes featured in ThemeShock using pure CSS3 and achieve in the process something that can easily look as any Photoshop work. It’s important to state that these boxes look flawless in Safari and quite great in Chrome, so we suggest you to use either one of these browsers to check them out, now let’s begin this tutorial.

Today you’ll learn how to create your own CSS dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. Let’s see how is made!

They use no images, just CSS3 fancies. Like a good little designer always does, they fall back to totally acceptable experience. Read Chris Coyier’s tutorial over on CSS-Tricks.

In this article, you’ll learn how create a cool and usable CSS3 search box using the HTML5 placeholder attribute.

For the browsers that don’t support this new HTML attribute, fallback is created using Modernizr’s feature detection.

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!