CSS Tutorials — Tips and Tricks

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.

This article shows you how to make a nice 3D rolling link effect.

You must have already seen this (what I call “bouncing”) hover effect in navigation menus. Curious how to recreate it easily ? Below you’ll find my approach, for a simple 1-level menu as well as a drop-down one. It’s pure css, I use an :after pseudo-element with a custom attribute.

PLEASE, if you do use Bootstrap for just about everything be courteous to your audience and change up some of the basic variables so it doesn’t look all the same! I just tested a really cool app and was SO disappointed that it used bootstrap. I’m sick of seeing the same damn buttons. I’m sick of seeing that same damn toolbar up top. It’s driving me crazy.