Setting the Scrollbar Color

To change the color of a scrollbar to fit your website may be done quite easily. However, it should not be a major part of your website's overall design since it may only be viewed in Internet Explorer.
The color scrollbar must be put either in a layer that has overflow set or in the body. Here is an example:

body
{
   scrollbar-arrow-color: #000000;
   scrollbar-base-color: #00CCFF;
   scrollbar-face-color: #0099FF;
   scrollbar-highlight-color: #00CCFF;
   scrollbar-shadow-color: #00CCFF;
   scrollbar-3dlight-color: #00CCFF;
   scrollbar-track-color: #00CCFF;
   scrollbar-darkshadow-color: #00CCFF;
}
 
You may customize the colors as you need. Just change the hexidecimals to the color you wish to use.

Background:CSS Properties

background-color: #000;
Pretty obvious on what this means.


background-image: url(image.jpg);
url is literally url. However the word image.jpg should be the name of the image you wish to use.

background-repeat: no-repeat;
This stops the browser from repeating the image used. You may also use repeat, repeat-x or repeat-y inplace of no-repeat to have the image repeat itself. repeat-x meaning repeating horizontally, repeat-y meaning repeating virtically.

background-attachment: fixed;
Using fixed will make the background not move when you scroll the page. When exchanging the word "fixed" for "scroll" the background will move.

background-position: 50px 50px;
Using this puts your background at a specific position. You may use pixels or percentages to place the background by horizontal position first then virtical following. Or, you may use one of these:

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

Background Shortcut
The background shortcut is when you may use all or some background styles. To use the background shortcut, write it in this order:

1. color
2. image
3. repeat
4. attachment
5. position

Example: background: { #000 url(bg.jpg) no-repeat fixed center center; }

Custom CSS Cursors

Using CSS, you can change the default cursor icon associated with a
particular element, even specifying your own cursor image (in IE6+)
instead. However, with power comes responsibility. Modify the cursor only
when it makes sense to, such as when you're applying it to a custom
interface. Like popup windows of JavaScript, changing cursors can quickly
become counterproductive and irritating to the user.
Below lists all the available values for the CSS property "cursor" (as of
CSS2.1):

Icon	Value	Live example (move mouse over box)	Browser
	auto	The User Agent determines the cursor to display based on the current context.	All
	default	style="cursor: default;"	All
	hand	style="cursor: hand;"	IE
	pointer	style="cursor: pointer;"	NS6/ IE6
	hand & pointer	style="cursor: pointer; cursor: hand;"	Cross browser
	crosshair	style="cursor: crosshair;"	All
	text	style="cursor: text;"	All
	wait	style="cursor: wait;"	All
	help	style="cursor: help;"	All
	inherit	Takes on its parent element's computed cursor value.	All
	move	style="cursor: move;"	All
	e-resize	style="cursor: e-resize;"	All
	ne-resize	style="cursor: ne-resize;"	All
	nw-resize	style="cursor: nw-resize;"	All
	n-resize	style="cursor: n-resize;"	All
	se-resize	style="cursor: se-resize;"	All
	sw-resize	style="cursor: sw-resize;"	All
	s-resize	style="cursor: s-resize;"	All
	w-resize	style="cursor: w-resize;"	All
	progress	style="cursor: progress;"	IE6
	all-scroll	style="cursor: all-scroll;"	IE6
	col-resize	style="cursor: col-resize;"	IE6
	no-drop	style="cursor: no-drop;"	IE6
	not-allowed	style="cursor: not-allowed;"	IE6
	row-resize	style="cursor: row-resize;"	IE6
	url(uri)	style="cursor: url(mycursor.cur);" Note: Only .cur and .ani file types are supported as of IE6.	IE6
	vertical-text	style="cursor: vertical-text;"	IE6

Reference:http://www.javascriptkit.com/dhtmltutors/csscursors.shtml

Applying a Background Gradient with Css

Applying a css background gradient

.css-grd 

{

/* default bg color, for all layout engines that don't implement gradients */

background: #2a6da9;

/* For gecko based browsers */

background: -moz-linear-gradient(top, #55aaee, #003366);

/* For webkit based browsers */

background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));

/* For Internet Explorer */

filter:progid:DXImageTransform.Microsoft.Gradient

(endColorstr='#003366', startColorstr='#55aaee', gradientType='0');

}

Reference: http://www.tankedup-imaging.com/css_dev/css-gradient.html