Difference between revisions of "CSS GUIDE -MOZ-OPACITY"

From CDOT Wiki
Jump to: navigation, search
 
(→‎Fun with -moz-opacity)
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<span style="margin:0;background:#ffff33;font-size:120%;font-weight:bold;border:1px solid #a3b0bf;text-align:left;color:#000;padding:0.2em 0.4em;">This document is a work in progress and is subject to change.</span><br /><br />
 
<span style="margin:0;background:#ffff33;font-size:120%;font-weight:bold;border:1px solid #a3b0bf;text-align:left;color:#000;padding:0.2em 0.4em;">This document is a work in progress and is subject to change.</span><br /><br />
 
== Summary ==
 
== Summary ==
 +
*Firefox allows you to use coding to manipulate the opacity of an image.
 +
*"Opacity" refers to transparency; the lesser the opacity of an image, the more transparent it is.
  
−
This property sets the background image of an element. When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).
 
−
 
−
Values for this property are either <uri>, to specify the image, or 'none', when no image is used.
 
−
 
−
<pre>
 
−
BODY { background-image: url("marble.gif") }
 
−
P { background-image: none }</pre>
 
  
 
<table border="0">
 
<table border="0">
 
<tr>
 
<tr>
−
<td><b>Applicability:</b></td><td>The background-repeat property can be used for all CSS elements.</td>
+
<td><b>Initial Value:</b></td><td>1(opaque)</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
−
<td><b>[http://developer.mozilla.org/en/docs/CSS:%40media#Media_groups Media Group:]</b>
+
<td><b>Applies  to</b></td><td>all elements</td>
−
</td><td>Visual</td>
 
 
</tr>
 
</tr>
 
<tr>
 
<tr>
Line 24: Line 18:
  
 
== Syntax ==
 
== Syntax ==
−
If a background image is specified, this property specifies whether the image is repeated (tiled), and how. All tiling covers the content and padding areas of a box. A value of 'repeat' means that the image is repeated both horizontally and vertically. The 'repeat-x' ('repeat-y') value makes the image repeat horizontally (vertically), to create a single band of images from one side to the other. With a value of 'no-repeat', the image is not repeated.:
+
Opacity:1.0 shows you all of the image; Without any filters applied the opacity of an image is 1.0 (fully opaque).
 +
 
 +
We use CSS to define the initial degree of opacity in Firefox:
 +
 
 
<pre>
 
<pre>
−
BODY {
+
<IMG style="-moz-opacity:0.5" src="test.gif">
−
  background: white url("pendant.gif");
 
−
  background-repeat: repeat-y;
 
−
  background-position: center;
 
−
}
 
 
</pre>
 
</pre>
  
−
== Legal Values ==
+
Valid range of values for -moz.opacity is from 0 to 1, where lesser equates to more transparency.
−
The following units are valid for defining background-repeat:
 
−
*repeat
 
−
**The image is repeated both horizontally and vertically.
 
−
*repeat-x
 
−
**The image is repeated horizontally only.  
 
−
*repeat-y
 
−
**The image is repeated vertically only.
 
−
*no-repeat
 
−
**The image is not repeated: only one copy of the image is drawn.
 
  
 +
== Usage ==
 +
 +
*Quick opacity change onMouseover:
 +
<pre>
 +
<IMG style="-moz-opacity:0.6" src="alta.gif" onMouseover="this.style.MozOpacity=1" onMouseout="this.style.MozOpacity=0.6">
 +
</pre>
 +
 +
*For CSS opacity to work in the browser it must have some placement specified. Mozilla recommends that we use float:left; and position:relative; to work in Mozilla Firefox. The opacity code for simply displaying an image is more straightforward.
 +
 +
<pre>
 +
<span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;"><img src="v90.gif" width="50" height="50"></span>
 +
</pre>
 +
 +
==Fun with -moz-opacity==
 +
To make your page more attractive, you can do something like this:
 +
 +
[[Image:Fun stuff.png]]
 +
<pre>
 +
<div style="color:black;width:150px;background:white;filter:alpha(opacity=50);-moz-opacity:.50;
 +
opacity:.50;float:right;margin-top:10px;margin-bottom:10px;margin-left:10px;
 +
font-family:Verdana, Arial, Helvetica,Georgia;font-size: 28px;line-height:26px;  text-align: right;">
 +
...this will look like some of the 
 +
<b>pullquotes or subtitles we see</b>
 +
in
 +
<span style="width:150px;padding-bottom:10px;float:right;text-align:left;color:black;background:white;
 +
filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;">magazine<b>layout...</b></span>
 +
</div>
 +
 +
</pre>
  
 
== Mozilla Recommended Values ==
 
== Mozilla Recommended Values ==
−
[http://developer.mozilla.org/en/docs/CSS:background-repeat MDC document on background-repeat]
+
[http://developer.mozilla.org/en/docs/CSS:-moz-opacity MDC document on -moz-opacity]
−
 
 
  
 
== Notes ==
 
== Notes ==
 
The [http://www.w3.org World Wide Web Consortium (W3C)] provides a free online [http://jigsaw.w3.org/css-validator/ CSS validation service].
 
The [http://www.w3.org World Wide Web Consortium (W3C)] provides a free online [http://jigsaw.w3.org/css-validator/ CSS validation service].
  
−
== Specification Conformance  ==
+
 
−
*[http://www.w3.org/TR/REC-CSS1#background-repeat CSS 1 ]
 
−
*[http://www.w3.org/TR/REC-CSS2/colors.html CSS 2]
 
−
*CSS 3 (specification not yet published)
 
  
 
== Browser Compatibility ==
 
== Browser Compatibility ==

Latest revision as of 19:18, 14 December 2006

This document is a work in progress and is subject to change.

Summary

  • Firefox allows you to use coding to manipulate the opacity of an image.
  • "Opacity" refers to transparency; the lesser the opacity of an image, the more transparent it is.


Initial Value:1(opaque)
Applies toall elements
Inherited:No

Syntax

Opacity:1.0 shows you all of the image; Without any filters applied the opacity of an image is 1.0 (fully opaque).

We use CSS to define the initial degree of opacity in Firefox: 

<IMG style="-moz-opacity:0.5" src="test.gif">

Valid range of values for -moz.opacity is from 0 to 1, where lesser equates to more transparency.

Usage

  • Quick opacity change onMouseover:
<IMG style="-moz-opacity:0.6" src="alta.gif" onMouseover="this.style.MozOpacity=1" onMouseout="this.style.MozOpacity=0.6">
  • For CSS opacity to work in the browser it must have some placement specified. Mozilla recommends that we use float:left; and position:relative; to work in Mozilla Firefox. The opacity code for simply displaying an image is more straightforward.
<span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;"><img src="v90.gif" width="50" height="50"></span>

Fun with -moz-opacity

To make your page more attractive, you can do something like this:

Fun stuff.png 

<div style="color:black;width:150px;background:white;filter:alpha(opacity=50);-moz-opacity:.50;
opacity:.50;float:right;margin-top:10px;margin-bottom:10px;margin-left:10px;
font-family:Verdana, Arial, Helvetica,Georgia;font-size: 28px;line-height:26px;  text-align: right;">
...this will look like some of the  
<b>pullquotes or subtitles we see</b>
in 
<span style="width:150px;padding-bottom:10px;float:right;text-align:left;color:black;background:white;
filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;">magazine<b>layout...</b></span> 
</div>

Mozilla Recommended Values

MDC document on -moz-opacity

Notes

The World Wide Web Consortium (W3C) provides a free online CSS validation service.


Browser Compatibility

  • Internet Explorer
  • Firefox
  • Opera
Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=CSS_GUIDE_-MOZ-OPACITY&oldid=9129"