M
Mr. 47
Guest
Can any one help me with CSS visual filters, ie. glow and blur???
J
Jonty
Guest
- Thread starter
- #2
Yes! Beware, though, these are a Microsoft proprietary standard, and will not be supported by any other browser.
Basically, filter values work just like any other CSS presentational attribute. They can be placed in an external stylesheet, inside <style></style> tags, and inline inside an element's style="" atrribute.
Just two other things to note. Microsoft prefers to uppercase some of the properties of it's filters, although this isn't essential. Secondly, sometimes you'll see 'filter
rogidXImageTransform.Microsoft.SomeFunction()' other times you'll see 'filter:SomeFunction()'. The browser can handle both formats, the first one is simply the 'proper' way of identifying the filter.
Glow - This property adds a glow effect (i.e. a coloured haze) around the object in question. The first value the Glow filter takes is 'color'. This is your standard hexi-decimal system, although you no longer need include the '#' as in standard CSS. The second value the function takes is 'strength'. This defines, in pixels, how strong the effect ought to be.
Blur - This property adds a blur effect around the object in question. The first value the Blur filter takes is 'direction'. This is the direction you wish the blur to occur, in degrees (i.e. 0 degrees is vertically upwards, 180 degrees vertically downward etc.). The second value the function takes is 'strength'. This defines in pixels, as above, how strong the effect ought to be.
WebFX - For now, you might want to check out WebFX's Filter Utility, which saves you the hassle of visiting MSDN's Filter Reference Page.
Kind Regards
Jonty
P.S. Using these filters in an external style sheet will invalidate their CSS compliance.
Basically, filter values work just like any other CSS presentational attribute. They can be placed in an external stylesheet, inside <style></style> tags, and inline inside an element's style="" atrribute.
Just two other things to note. Microsoft prefers to uppercase some of the properties of it's filters, although this isn't essential. Secondly, sometimes you'll see 'filter
rogidXImageTransform.Microsoft.SomeFunction()' other times you'll see 'filter:SomeFunction()'. The browser can handle both formats, the first one is simply the 'proper' way of identifying the filter.Glow - This property adds a glow effect (i.e. a coloured haze) around the object in question. The first value the Glow filter takes is 'color'. This is your standard hexi-decimal system, although you no longer need include the '#' as in standard CSS. The second value the function takes is 'strength'. This defines, in pixels, how strong the effect ought to be.
Code:
<span style="filter:progid:DXImageTransform.Microsoft.Glow(Color=0066CC, Strength=5)">Sample Text!</span>
<span style="filter:Glow(Color=0066CC, Strength=5)">Sample Text!</span>
Code:
<span style="filter:progid:DXImageTransform.Microsoft.Blur(Direction=145, Strength=10)">Sample Text!</span>
<span style="filter:Blur(Direction=145, Strength=10)">Sample Text!</span>Kind Regards
Jonty
P.S. Using these filters in an external style sheet will invalidate their CSS compliance.
M
Mr. 47
Guest
- Thread starter
- #3
can they be used as a hover button???
PS. both of the above examples failed to work
Code:
<style>
a:hover {filter:glow(color=000066)}
</style>
[url="afhdsafh.gfthd"]sdhfdsh[/url]PS. both of the above examples failed to work
J
Jonty
Guest
- Thread starter
- #4
Hello again
After looking at the documentation, it appears an element needs layout before these filters can be applied.
To provide 'layout', set either the width property, or the height property or set the position property to absolute. Probably the best one to do is the height property. For links, just set the height to whatever the font size currently is.
This negative margin onmouseover simply compensates for the extra space the glow effect requires. Simply set this to minus whatever your glow strength is, and subtract one pixel. Hence, if my glow effect has a strength of 10px, my margin onmouseover would be -11px.
Kind Regards
After looking at the documentation, it appears an element needs layout before these filters can be applied.
To provide 'layout', set either the width property, or the height property or set the position property to absolute. Probably the best one to do is the height property. For links, just set the height to whatever the font size currently is.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Filter Test Page</title>
<style type="text/css">
A:Hover
{
filter:progid:DXImageTransform.Microsoft.Glow(Color=GoldenRod, Strength=5);
height:10px;
margin:-6px;
}
Body
{
font-family:tahoma;
font-size:10px;
margin:10px;
padding:0px;
}
</style>
</head>
<body>
This is some sample text. And this is a [url="#"]sample link[/url]!
</body>
</html>Kind Regards
M
Mr. 47
Guest
- Thread starter
- #5
wow... great.
thanks, not very suitable for much but still a cool effect...
thanks, not very suitable for much but still a cool effect...
J
Jonty
Guest
- Thread starter
- #6
hehe, indeed. Microsoft have a great habit of making cool proprietry stuff which is ultimately useless That said, they have started submitting some of their proposals to the W3C, so watch out for filters coming to a Mozilla browser near you soon (hehehe, methinks not ).
If you need any more assistance, please don't hesitate to ask.
Kind Regards
That said, they have started submitting some of their proposals to the W3C, so watch out for filters coming to a Mozilla browser near you soon (hehehe, methinks not ).If you need any more assistance, please don't hesitate to ask.
Kind Regards