CSS Tutorials — Tips and Tricks

In this article I will show you how to center vertically and horizontally using CSS3 transform property. Centering horizontally is easy, but vertical alignment has always been a bit tricky with CSS.

Learn to create a simple vertical drop down menu in html and css with 3 levels deep, working in all modern browsers, including Internet Explorer 7.

CSS3 provides the developer with abilities to manage powerful features such as rounded corners, shadows, gradients, etc. But since not all popular browsers (IE6-8) are aware of the new properties, implementing these kinds of designer ideas sometimes turns into a nightmare.

Thanks to some creative thinking, you can have a lovely and animated drop down menu done in CSS – no JavaScript required.

Find out more about Bootstrap v3 - the new version of the popular CSS framework.

Every year, computer screens are getting wider and wider and the text paragraphs on websites are becoming wider too and difficult to read. It is known that a person is comfortable reading 65-75 characters per line and you would expect people to adopt multiple columns in their layouts, but due to technology limitations multiple column layouts haven’t been implemented in the past.

If you are searching for a simple sticky footer to the bottom of your page compatible with all browsers, here is a useful tutorial on how to do it using some CSS tricks. The same thing you can do with your header. We will give HTML demo examples of both sticky header and footer.

Webkits have a lot of experimental CSS functions that you can currently use on your web page. The property we are going to be looking at now is the text-security property.

As a web designer, we always see a problem happened when a floated element is within a container div, the floated element doesn’t automatically increase the height of the container. The main reason causing this problem is the container doesn’t contains the floated element anymore, when the element is floated. Here is a technique to address the problem of CSS float.

A couple of weeks ago I posted a showcase of web designs with clever header effects. In that roundup we saw a bunch of sites making use of a simple collapsing header effect, where the page header or banner would gradually shorten and disappear upon page scroll. Let’s take a look at recreating this cool effect for use in your own website designs.