CSS pitfalls and how to overcome them

When you write CSS, there are some problems you may run into. Then, to overcome the situation, you’ll need to use some small and effective CSS tricks.

In this article I’ll try to show you some tips and tricks that can definitely help you when writing CSS.

Fancy FAQ page using CSS3 only

Usually, a FAQ page is that long page with lots of questions and answers, the one we are searching for when we need some extra info regarding a subject. So, for example, if you own a website that sells stuff, then you will need a page like that.

In this article I’ll show you how to create a fancy FAQ page using CSS3 only, no JavaScript.

CSS3 ordered list styles

Styling ordered lists was always a tricky task and I’m not the only one who thinks that. To style numbers you need to remove default browser styles and add hooks to your lists elements in order to target them and style accordingly.

In this article you’ll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach.

CSS3 ordered list styles

CSS3 & jQuery folder tabs

Ever since I started working for one of my CSS3 breadcrumbs example, I thought about writing this tutorial. In this article, I will use a similar technique in order to create some good looking CSS3 tabs.

CSS3 breadcrumbs

A breadcrumb navigation allow users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. Also, the breadcrumbs can reduce the number of actions a user need to perform in order to navigate back.

So, to keep it simple, if you have a website with lot of pages and sub-levels, in order to increase usability, you need to use breadcrumbs. Having said that, today you’ll learn how to create your own cool CSS3 breadcrumbs.

Cool headings with pseudo-elements

Whether you’re designing a website or a web application, you’ll need custom styles for headings like h1 or h2. In this article you’ll learn how to create some cool headings effects using CSS pseudo-elements.

Just another CSS3 menu

Hey there, this is my first post on 2012 and today you’ll learn how to create a simple and clean CSS3 menu in just a few steps.

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