CSS3

Ladies and gentlemen, it is the second decade of the third millennium and we are still kicking around the same 2-D interface we got three decades ago. Sure, Apple debuted a few apps for OSX 10.7 that have a couple more 3-D flourishes, and Microsoft has had that Flip 3D for a while. But c’mon – 2011 is right around the corner. That’s Twenty Eleven, folks. Where is our 3-D virtual reality? By now, we should be zipping around the Metaverse on super-sonic motorbikes…

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!).

Currently CSS Transitions have been developing slowly with the W3C (World Wide Web Consortium) moderating discussion with other browsers, but support has rapidly grown in the past year. Safari and Chrome are leading, while the most recent build of IE and FireFox are lacking. Internet Explorer 9 (currently in beta) is probably not going to have CSS 3 transitions. IE’s lack of support is about as surprising as opening up a refrigerator to find food. On the other hand, it’s quite odd that FireFox hasn’t added CSS transitions yet.

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.

Web designers have been constrained to use a limited number of safe-fonts due to the dependence of being available on various computers and operating systems. CSS3 changed that by introducing a feature that allows you to use any font for your website.

Introduction to mobile web application development — using HTML5 and CSS3 — for mobile. Learn how to target mobile devices, including iPad, iPhone and Android.

What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as, say, the primary content section exceeds the height of the sidebar.

Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images. The irony in this is that we’re using CSS3 gradients to create an effect that doesn’t contain a gradient! Read on to learn more.

This morning I uploaded a new demo the Sass Recipes repository based on work for MemberHub.com showing how easy it is to create a multi-line buttons with Sass, Compass, and CSS3….