RTD's top 10 most read articles of 2011

I think 2011 was a great year for RedTeamDesign and for me also. I published quite many articles here and just to recap some of my best content, here are my top 10 of 2011:

Most read articles of 2011

Awesome CSS3 animated header

You can now create stunning animations with CSS3. But, I bet you know that. The keyword when it comes about CSS3 animations is the CSS3 @keyframes rule and in this article you will learn how to create an awesome CSS3 animated header using it.

CSS3 animated header

Meet the CSS4 selectors

On the “CSS4” term, you should know that there is no such thing as CSS4. Also, the term “CSS3” refers to everything published after CSS 2.1.

You may already know that, when speaking about web development, CSS3 and HTML5 are the two main buzz words. This matter might change in the future because, almost two months ago, the latest CSS Selectors Level 4 Working Draft was released by the World Wide Web Consortium (W3C).

In this article you’ll find out some interesting stuff about the new CSS4 selectors.

CSS Level 4 Selectors

CSS3 pricing table

When designing a pricing table for a product or service, your job as a web designer/developer is to make sure that the table is easy to understand, intuitive and clear. This way, you will help users to choose the best plan for theirs needs.

So, in this article you’ll learn how to build an awesome CSS3 pricing table, with no images and minimal HTML markup.

CSS3 pricing table

Easy CSS3 & jQuery tooltips

There’s no need to explain what a tooltip is and you already know that using tooltips can help you increase usability. Therefore, in this article we’ll concentrate just on the practical side.

So, today you’ll learn how to create awesome CSS3 & jQuery tooltips.

CSS3 and jQuery tooltips

Stylish CSS3 progress bars

You’ve seen progress bars everywhere, they are those bars that display the current completion state for a process, such as a download or file transfer. Whether you’re building a desktop or a web application, at a certain point, you may need to use this UI element.

Having said that, in this article you’ll learn how to create stylish and animated progress bars using CSS3.

Stylish CSS3 progress bars preview

CSS3 animated dropdown menu

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs.

In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.

CSS3 animated dropdown menu

Design a beautiful CSS3 search form

One of the elements most frequently used by websites is probably the search box. If you want to improve user experience in a simple way, and make it easy to search and find content for your users, then you have to add a search form on your website.

So, today we’re going to cover how to style a search form using the most exciting CSS3 features.

Simple and effective dropdown login box

Web users log in every day, so imagine how many times log in forms are being used in a single day. Usually, it don’t take too much to fill a form like this, but using a dropdown solution will speed up things for you.

In this article, you will see how to create a good looking dropdown login form using CSS3 and a bit of jQuery.

Image map with CSS3 & jQuery tooltips

Tooltips can play a big role in your web designs and that isn’t new anymore. Just use them correctly and they will help you improve user experience.

We have seen before how to create some good looking CSS3 tooltips and today you’ll learn how to create an image map with pins and tooltips.

Image map with CSS3 and jQuery