5 useful CSS snippets and tricks

Here are 5 useful CSS tricks that I find myself using often, so I thought of sharing them here. Feel free to suggest others in the comments below.

#1 The quick reset

While there are a lot of lengthy and more comprehensive css resets available online, I’ve found that the following piece of code works just fine and provides pretty good reset capability.

* {margin: 0;outline: 0;padding: 0}
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend, dl, dt, dd, blockquote, applet, object {border: 0}
h1,h2,h3,h4,h5,h6{font-weight:normal}
ul, ol {list-style-type:none}
hr {display: none}

#2 Clearfix

After years of testing and deployment, this method is arguably the best way to clear away floats. Assign the parent container (the container containing floated elements) a class of ‘clearfix’ and you are done.

/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

#3 Horizontal navigation bar

The best way to represent a navigation on a webpage is by using lists.
Suppose your navigation list looks something like this:

<ul id="nav">
<li><a href="somepage.html">Home</a></li>
<li><a href="somepage2.html">Cats</a></li>
<li><a href="somepage3.html">Unicorns</a></li>
<li><a href="somepage4.html">Troll Comics</a></li>
</ul>

You can easily turn the above list into a horizontal navigation menu by the following css :

#nav {margin:0;padding:0;height:34px}
#nav li{
list-style:none;
float:left;
position:relative;
font:14px Tahoma,'sans-serif';
}
#nav a {
display:block;
padding:10px 14px;
}

This is just skeletal code, throw in some colors or gradients and you are good to go.

#4 Text-shadow

The text-shadow attribute of css is now being supported by most major browsers. Correct use of text-shadow can really fire up your typography.
For example, for text with a dull silver/greyish background, adding a white text-shadow results in some interesting bevel-like effect. Use it like this:

.someElement {
text-shadow:#fff 1px 1px;
}

Change the hex value to a color of your choice, usually shades of gray work best.

#5 Hiding text

If you are using images for certain headings or slogans on a site but do not want to compromise with the search engine’s indexing of your text, this trick can come in handy. Here is how:

Suppose your markup is:

<h2 id="slogan">Kittens are cute, save them!</h2>

and you want to give a background to the h2 that contains the slogan already, then you can just offset the text by a few thousand pixel values, like:

h2#slogan {
background:url("kitten-slogan.png");
text-indent:9999999px;
}