printer friendly version

Useful CSS tricks

These are some most common CSS codes that will make your website look exactly as you want it.

How to make background fixed?

Adding this code insures that your background remains fixed during the scrolling.

body {
	background-image: url(background.jpg);
	background-attachment: fixed;

How to change scrollbar colors?

Altough it's not a standard (and some browsers will keep showing system colors), people like it because it suits the layout better.
Add these lines to your code and replace the colors with your own.

body {
	scrollbar-arrow-color: #000000;
	scrollbar-track-color: #999999;
	scrollbar-face-color: #FF0000;
	scrollbar-highlight-color: #FF6666;
	scrollbar-shadow-color: #666666;
	scrollbar-3dlight-color: #FFFFFF;
	scrollbar-darkshadow-color: #333333;

How to make scrollbar transparent?

OK, now you're exaggerating :> But that's OK, I know that sometimes a better solution doesn't exist. Again, not all browsers will show the transparency, so be careful about choosing colors. Also, the main scrollbar cannot become transparent - only ones inside frames or layers can.
First you have to make a class for body or layer in the CSS. I'll assume you want the scrollbar in the frame - so, I'm defining a body tag class named "myframe". Here's the code:

body.myframe {
	scrollbar-arrow-color: #00FF00;
	scrollbar-track-color: #0000FF;
	scrollbar-face-color: #0000FF;
	scrollbar-highlight-color: #00FF00;
	scrollbar-shadow-color: #00FF00;
	scrollbar-3dlight-color: #0000FF;
	scrollbar-darkshadow-color: #0000FF;
	filter: chroma (color=#0000FF);

iframe tag we want the transparent scrollbar in needs to look like this:

<iframe class="myframe" width="500" height="300" frameborder="0" name="mywindow" scrolling="auto" src="my_page.html" allowtransparency="true"></iframe>

Result: what we made to be dark blue #0000FF will turn out transparent. But, there's a catch: everything in the frame colored dark blue will turn transparent! So pick a color that you're not using inside your frame.

How to use custom cursor?

You can change the cursor for each tag separately: body, a, table, img, textarea, div... Here are the codes.

If you wish to use one of the standard cursors, use the following code:

body {cursor: auto;}

Replace the word "auto" with one of the following: hand, crosshair, text, wait, help, e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize.

If you have a cursor you downloaded / drawn yourself that you wish to use on your website, the code looks like this (replace cursor.cur with the real filename. You can use .ani cursors, too):

body {cursor: url(cursor.cur);}

However, this will work only in Internet Explorer 6, other browsers will use regular system cursor.

OK, now that you know this, here's a tip: don't go wild with the effects because first: it's annoying, second: your webpage loading time increases, third: not all of the above effects will work in all the browsers.

Share this tutorial with your friends!

Work with me

Brand identity design by Nela Dunato
Brand identity design for consulting companies

My book

The Human Centered Brand by Nela Dunato
The Human Centered Brand: A Practical Guide to Being Yourself in Business