opacity

[bradeck]

I found some opacity code as follows:

style="-moz-opacity: .80; opacity: .80; filter:alpha(opacity=80);"

I cannot find any of these attributes in any of my docs. Can someone explain to me which is for what and why so many?

[brothercake]

-moz-opacity:.80;

is a mozilla-proprietary opacity filter (so it works in mozilla browsers only) that takes a value between 0 and 1.

filter:alpha(opacity=80);

is IE's proprietary version of the same thing (which works in win/ie5.5 or 6), that takes a value between 0 and 100

Opacity is a nice design touch for making things blend into the background. You can use opacity on an element and then a different value in a :hover class to make opacity rollovers, which are very nice. They're also scriptable, so you can do transition effects with them; I can give more info if you want.

I've never seen - opacity:.80; before - I think someone just made that syntax up, but I'll stand corrected if anyone knows of a browser that works with that.

[bradeck]

YOU ROCK!

...ho hum...so much to learn about CSS.

[jkd]

"opacity" is a property available in the recent Candidate Recommendation draft of the CSS3 color module.

Like with all non-standardized properties, Mozilla implemented it with the "-moz-" prefix as suggested by the CSS working group. (Custom properties should begin with -vendor-, like the two or three -op- properties in Opera).

So, -moz-opacity is essentially a pre-standardized version of opacity. And filter is just unprefixed IE-stuff (because there is no vendor-specific prefix, it has forever polluted the use of that property in a standard).

[Arctic Fox]

Opacity use example:

Quíet Storm's Site (http://www.angelfire.com/mo2/cbch21/), IE5.5+ only...

[MotherNatrsSon]

And Windoze only.......not a very good site for an example

[Arctic Fox]

LOL!

It is for IE5.5+ on Windows! :D

[Frank]

bradeck

If you would like a good example I hope this helps.
http://www.frankthoms.freeservers.com/sample/

[bradeck]

Thanks all. I have had it working but just needed clarification on the definition as none of my resources show it. Any suggestions on where to find other options such as this - or details on how to use the filter functions for IE?

[brothercake]

A list of filters and transitions for IE can be found at MSDN - http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp

Not sure what other things mozilla implements; I know there's a border radius property

-moz-border-radius:10px;

that's rather cool because it lets you do curvy boxes without having to use images. Not sure what else, but devedge would be a good place to look - http://devedge.netscape.com/central/css/

[bradeck]

THANKS!

[bradyj]

<$0.02>

That really pisses me off Arctic Fox that you would lock out a user like me because I'm on a Macintosh -- regardless of my system, you should atleast let users have the option of viewing the site and bypassing your little intro if you still feel the need.

Just because I don't don't use IE or am on a Window OS doesn't mean your site won't still view 99% good. It would make a little more sense if this was an advanced site with complex building, but it is not, and I see no reason why you would do it.

Regardless, you can do what you like, but that's a good way to alienate a lot of useful site traffic

</$0.02>

[liorean]

<€ amount="0.02">
Cool down a little. First of all, that's Quiet Storm's site and not Arctic Fox's (...unless they are the same person, which I doubt). Second, there are good reasons to shut out users sometimes. Like the fact that your site is a personal experiment in using the features of a specific brower. I make many moz specific tools and pages, but I wouldn't say I lock out any users for that, as they are made to showcase a feature or other of that specific browser.

Oh, and then, why would you care for accessibility on a personal site, one that you make more for yourself than for any audience? It's another thing if you lock out users belonging to the target audience from a page, but in this case I'd say it doesn't matter since the target audience is nonexistant.
</€>

[realisis]

brothercake wrote:Not sure what other things mozilla implements; I know there's a border radius property

I haven't worked with the following items, but here is a list of proprietary implementations for Netscape 7 (though they're not necessarily equivalent to IE filters). Hope this is useful to someone:

MozBinding
MozBorderRadius
MozBorderRadiusBottomleft
MozBorderRadiusBottomright
MozBorderRadiusTopleft
MozBorderRadiusTopright
MozBoxAlign
MozBoxDirection
MozBoxFlex
MozBoxFlexGroup
MozBoxOrient
MozBoxPack
MozBoxSizing
MozFloatEdge
MozKeyEquivalent
MozOpacity
MozOutline
MozOutlineColor
MozOutlineRadius
MozOutlineRadiusBottomleft
MozOutlineRadiusBottomright
MozOutlineRadiusTopleft
MozOutlineRadiusTopright
MozOutlineStyle
MozOutlineWidth
MozResizer
MozUserFocus
MozUserInput
MozUserModify
MozUserSelect

***

Netscape 6.1 implements only the MozBinding and MozOpacity properties... dunno about NS6.2 ...

***

If nothing else, the above list should give you an indication of relevant keywords to search for when combing the devedge site...