5 Cool CSS Tricks That Are Often Neglected

Aug 22nd, 2008
Maruf scribbled this post.

In this post I’ll quickly go over 5 CSS tricks that I think are pretty cool, but often neglected.

• Controlling case sensitivity
• Transparency
• Using multiple classes together
• Changing Cursor
• CSS font shorthand

1: Controlling case sensitivity

I’ve already mentioned this in a previous post, but it’s a nice little trick, so it belongs in this list. This property controls the case of words with in an element.

Following code will make everything uppercase LIKE THIS:

1
2
3
4

#wrapper
{ 
text-transform: uppercase
}

Other options:

none: Default. Defines normal text, with lower case letters and capital letters

capitalize: Each word in a text starts with a capital letter

uppercase: Defines only capital letters

lowercase: Defines no capital letters, only lower case letters

2: Transparency

Now, this really is a neat little trick. This makes any element transparent. I’ve used it in the past as a hover affect, as shown below (just hoover over my face):

Here’s the code:
This code makes the element 50% transparent- you can adjust the levels accordingly. Transparency is a bit weird because each browser reads it differently, so you need to make separate statements.

1
2
3
4
5
6

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

opacity: This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards.

filter: This one you need for IE.

-moz-opacity: You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.

-khtml-opacity: This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML.

3: using multiple classes together

Usually attributes are assigned just one class, but this doesn’t mean that that’s all you’re allowed. You can actually assign as many classes as you like. For example:

1

<div class="class1 class2"></div>

The class names are separates by a space. So that means “class1″ and “class2″ calls up the rules assigned to the div. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

4: Changing Cursor

The cursor property specifies the type of cursor to be displayed when pointing on an element. For example, you can use it in the following scenario:

Once again, if you hoover over my face, the cursor will change.

1
2
3
4

#wrapper a:hover
{ 
cursor: crosshair;
}

Options:

crosshair: generates a cross, as shown in the example

pointer: generates the classic windows pointing hand.

5: CSS font shorthand

I’m always a rabid fan of anything that reduces code/typing. I look through a lot of css source codes on a regular basis, and I rarely find people that use the shorthand option for the font property.

In stead of doing all this:

1
2
3
4
5
6

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;

You can do this:

1

font: 1em/1.5em bold italic small-caps verdana,serif

So much shorter! Just a few notes, however. This CSS shorthand version will only work if you’re specifying both the font-size and the font-family. Also, if you don’t specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal.