CSS Tutorials — Tips and Tricks

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.

In this you'll learn how to create a vintage-looking navigation menu using pure CSS3. I hope you'll enjoy this tutorial and you'll learn some new techniques.

See how to make a Nissan logo with pure CSS shapes (even the letters!).

This is al little trick I discovered when trying to replicate a border/outline effect around a custom font.