CSS3

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.

In SP1 there are a few improvements in the CSS3 support as well, though not as elaborate as with HTML5. The editor now supports the more advanced selectors such as div:nth-child(2n+1) without giving validation errors and the new color values rgba, hsl, hsla and 8 digit hex values are also supported.

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.

I should have written about this long ago, but better late than never – time to share my experiences. Typography is an important part of user experience, and with CSS3 @font-face we can offer users any font we want to.

This is part of a series of guest posts covering tips and tricks for working with CSS. These techniques, along with web fonts, make rich interactive sites achievable with simple and accessible standards-based markup and CSS. Today’s guest post was written by Andy Clarke, author of Hardboiled Web Design.

In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards.

I posted a quick tutorial yesterday showing how to use a simple CSS3 technique to spin some icons on hover. I’ve posted CSS3 tutorials before but all of a sudden this latest one has already received a few negative comments complaining that they can’t use CSS3 yet. Of course you can! Get over the way you used to do things, move with the times and embrace the new hotness right now. Today.

In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.

Isn’t it fun that we get to play with the latest CSS techniques, like shadows and transitions? There’s only one problem: how do we compensate, or more importantly, detect the browsers that do not support them? Well, there’s a few solutions. In this tutorial and screencast, though, we’ll create a JavaScript function that will accept a CSS property name as its parameter, and will return a boolean, indicating whether or not the browser supports the passed property.