CSS filters
It is UNOFFICIAL. But who knows if and when it might just become official. Web technology changes so fast.
Even it is unofficial, it doesn't mean you cannot use it. It was documented and accepted by many sites such from Adobe, Apple and Opera, and we have already got implementations in Chrome, Safari and iOS 6. The specification can be found here.
Right now the filter can not target specific attributes within your element. For example if you apply a filter like this:
.usefilter:hover {
filter:grayscale (0.5);
}
It applies to the entire element, you cannot target just the background or the border.
The syntax for these canned filters looks like:
filter: grayscale(0);
filter: sepia(0);
filter: saturate(1);
filter: hue-rotate(0deg);
filter: invert(0);
filter: opacity(1);
filter: brightness(1);
filter: contrast(1);
filter: blur(0px);
filter: drop-shadow(5px 5px 10px #ccc);
You can combine filters
.usefilter:hover {
filter:grayscale (0.5) brightness(1);
}
Even it is unofficial, it doesn't mean you cannot use it. It was documented and accepted by many sites such from Adobe, Apple and Opera, and we have already got implementations in Chrome, Safari and iOS 6. The specification can be found here.
Right now the filter can not target specific attributes within your element. For example if you apply a filter like this:
.usefilter:hover {
filter:grayscale (0.5);
}
It applies to the entire element, you cannot target just the background or the border.
The syntax for these canned filters looks like:
filter: grayscale(0);
filter: sepia(0);
filter: saturate(1);
filter: hue-rotate(0deg);
filter: invert(0);
filter: opacity(1);
filter: brightness(1);
filter: contrast(1);
filter: blur(0px);
filter: drop-shadow(5px 5px 10px #ccc);
You can combine filters
.usefilter:hover {
filter:grayscale (0.5) brightness(1);
}
There are many web postings regarding the use of filters, here is one of them: http://css3.bradshawenterprises.com/filters/ |