CSS3

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.

On my new portfolio site, I included a neat effect which spins the social icons with the help of a CSS transform and transition when you hover over them. Nothing amazing but definitely a nice enhancement. I used Komodo Media’s excellent social network icon pack (along with a couple I created myself) which look fantastic. Let’s see how it’s done.

As you probably found out, these days, the The World-Wide Web Consortium (W3C) has unveiled the HTML5 Logo. They launched more than a logo as they got also a full branding, including badges, t-shirts and stickers.

So, I suppose that’s a good thing, that HTML5 got some branding, sounds very interesting!

While looking at it and admiring it, as I find it very nice, I thought about how can I do it with CSS3.

One of the most popular articles on Marcofolio.net in 2010 was the 3d animation using pure CSS3. In my opinion, it was one of the best articles for myself as well, since I learned some pretty neat stuff about CSS3 and 3d capibilities.

Shortly after I placed my article online, Chris Spooner wrote a very cool article called Super Cool CSS Flip Effect with Webkit Animation. It showed me some great other 3d techniques that can be achieved using pure CSS3.

Those two articles inspired me to create yet another very cool 3d CSS demo, that I like to call an Animated CSS3 helix using 3d transforms.

As we announced with our second Platform Preview last year, IE9 supports CSS3 Media Queries. CSS3 Media Queries enable you to style pages based on different display surface factors such as width, height, orientation, resolution, etc. Developers can use these factors to customize their sites for viewing on different devices such as a small-screen netbook or a widescreen monitor. In this post, I talk more about CSS3 Media Queries and the various scenarios they enable…

CSS3 offers a new way to arrange text content using the Multi-column CSS3 module. This CSS3 feature will help you fit your text into columns without extra markup like div floats or extra table markup.

I love shadows, rounded corners, gradients and all the CSS3 features. That’s why, there are some days when I find myself designing in CSS more than in Photoshop.

The idea of building a features table just by using CSS3 came to me a while ago and I decided to share it with you in this article.

Today we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.

CSS3 gradients aren’t something new, but because of cross browser incompatibility, they weren’t used that much until now.

However, you should know that they are available to use in Safari, Chrome (Webkit) and Mozilla Firefox (from 3.6) browsers.

With this post I will show you how to use CSS gradients for some major browsers: Firefox, Safari, Chrome and IE (surprise!).

Search is one of the most important part of any website. Here I will show a few practical techniques for designing search forms and a few tricks to make usable and good-looking search functionality.

Smashing Magazine did a piece on Search Boxes which inspired me to write this post. Instead of listing various types of designs, I will show you how to build them! Here, with the help of three examples, I will show how to code search boxes with HTML & CSS and how to spice things up with a bit of jQuery.