Monday, February 15, 2010

CSS Notes

CSS Notes

Opacity

With opacity you can control the brightness of an element. For e.g.:

button.disabled {
    opacity:.7;
}

The above code would make the button to be 70% opaque if it has class "disabled"

However, the above wont work in IE. IE uses a different style attribute "filter". So, the above code should be:

button.disabled {
    opacity:.7;
    filter: alpha(opacity = 70);
}

Hover

Hover is a nice css attribute which can be implemented for any HTML element (in FF). Here is how to use it:

div.titlebar:hover {
    background-color:#FFFF99;
}

In IE hover works only for "a" (anchors). To make it work for all other tags we need to include the following in the css, and also make sure to download the htc (http://www.xs4all.nl/~peterned/csshover.html):

body { behavior: url("css/csshover3.htc"); }