Part 1 of 3
CSS Opacity in Mozilla,IE, and Opera
By Michelle Goodrich -- Mandarin Design
(UPDATED MAY2006)
| HTML Color Table | 40% Opacity Table | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
W3C SAYS
Opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the element (including its children) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.Name: opacity Value: <alphavalue> | inherit Initial: 1 Applies to: all elements Inherited: no Percentages: N/A Media: visual Computed value: The same as the specified value after clipping the <alphavalue> to the range [0.0,1.0].<alphavalue>
Syntactically a <number>. The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>.
How much of the image do we want to see?
All of it?
That's opacity:1.0;
Without any filters applied the opacity of an
image is 1.0 (fully opaque).
Just the words opacity and transparency are confusing.
They are opposite ends of the spectrum as someone at Digg commented
10% opacity = 90% transparency. That's it in a nutshell.
Opacity is a little ditty that goes something like this.
For CSS opacity to work in the browser it must have some
placement specified.
We used float:left; and
that worked.
Now we are trying position:relative; and that
works too, but only in Mozilla Firefox. The float:left CSS style
works in both Internet Explorer and Mozilla Firefox.
Surely the explanation from W3C makes sense but basically
this was trial and error, mostly error to get the transparency
opacity to apply to text. The opacity code for simply displaying an
image is more straightforward.
Copy and paste this in your Blog or Web page.
It will look like this.
This example uses Mozilla proprietary code in conjunction with IE code.
CSS3 is not fully defined as of today (August 2004).
If you remove the -moz-opacity it will look like this.
Update May 2006
The abobe opacity examples look the same in this Firefox browser.
The -moz-opacity is no longer needed.
We used it in earlier versions of
Mozilla and left it in for possible backward
compatibility issues. Opacity works fine in our Mozilla Firefox browser with or without the
proprietary code. Opacity also works in current versions of Opera.
Hover here. The Filter Opacity works in Mozilla and IE. It also works in current versions of Opera.
The CSS for
transOFF.
transON,
trans25, and
trans75 looks like this.
Copy and paste this in your Blog or Web page.
It will look like this.
Hover here. The Filter Opacity works in Mozilla and IE. It also works in current versions of Opera.
Start with the style defined as transON for the oposite effect.
Hover here. The Filter Opacity works in Mozilla and IE. It also works in current versions of Opera.
Apply the CSS defined opacity styles trans25,trans75, transON, and transOFF, to an image. Hover to see the opacity effect.
Apply the CSS defined opacity
styles trans25,trans75, transON,
and transOFF, to an image and text.
Hover to see the opacity effect.
Hover here. The Filter Opacity works in Mozilla and IE. It also works in current versions of Opera.This is opacity 25%
Hover here. The Filter Opacity works in Mozilla and IE. It also works in current versions of Opera.This is opacity 50%
Hover here. The Filter Opacity works in Mozilla and IE. It also works in current versions of Opera.This is opacity 75%
Opacity works in Mozilla and IE. It also works in current versions of Opera.
The w3.org CSS3 specification
for opacity opacity:.50; is included in the style we created
along with
filter: alpha(opacity=50); for IE
and -moz-opacity: 0.5; for Mozilla.
Note that -moz-opacity: 0.5; isn't needed in current
versions of Mozilla Firefox.
Hover over the hyperlinked image.
CSS
Copy and paste this in your style sheet.
HTML
Copy and paste this in your Blog or Web page.
It will look like this.
This is the easy way to hover with opacity. The opacity is all in CSS. The onmouseover isn't needed and there is only one image.
CSS
HTML
Copy and paste this in your Blog or Web page.
It will look like this.
If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>.
Copy and paste this in your Blog or Web page.
It will look like this.
Notice that we added width:100%. That's because opacity only works with placement
or layout specified (in IE). A width and height, a float, or something that allows the browser
to do positional processing will work.
THE BACKGROUND IS WHITE
The background is an important element when
using opacity. If we don't use a background color
(we used white) then
the text edges may be jagged. Setting the background
color to the keyword transparent doesn't always
work.
DIV
The text to the right is a div defined with text color black
and a background color
of white. The opacity on the div is 50.
The width is defined as 150px.
SPAN
The span inside of the div
is defined with an opacity of 25. The edges should not
be jagged. The padding of 10 pixels on the span is simply so that we don't lose the
bottom of the g or the y in the text magazinelayout.
TEXT SPILL
The text will spill outside of the defined width
of 150px when forced, and naturally the
browsers don't handle the spill exactly the same. We don't mind the spill and
will continue here by running the words magazinelayout together to explore
the spill effect.
Copy and paste this in your Blog or Web page.
It will look like this.
DIV
The text to the right is a div defined as
black with a background color
of white. The opacity on the div is 50.
SPAN
The span inside of the div
is defined with an opacity of 25. The edges should not
be jagged. The padding of 10 pixels on the span is simply so that we don't lose the
bottom of the text magazinelayout.
P
Here we are using the Paragraph <p>
tag instead of the <div>.
This is the same code as above. We replaced the
the div with p and changed
the color black to maroon.
...this will look like some of the
pullquotes or subtitles we see
in
magazinelayout...
This is basically the same code as above but using the paragraph tag instead of the div. It may be easier to understand for those are not intimate with the intricacies and idiosyncrasies of CSS.
We put a dotted border around this paragraph and another border around the pullquote area defined as 150px.
The defined width of the pullquote transparency is 150px. But we intentionally ran the words magazinelayout together to show that the text will not necessarily remain confined to the defined 150 pixels.
The
inside of the right side paragraph
displays an image that is exactly 150 pixels wide. We can see
where our paragraph would end if we left out the
large transparent joined words magazinelayout....
So how do we define the opacity pullquote in our style sheet?
CSS
...this is
the style defined as p.pulltrans in the
external style sheet. Our style sheet is here
and may change over time..............
P.pulltrans {
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-size: 28px;
line-height:26px;
text-align: right;
}
This is a simple flexible CSS style defined as p.pulltrans in the
external style sheet. The external style sheet
has to load each time a page loads so we do have
to decide if we will use it often enough to be
defined in our style sheet.
The copy-and-paste code for the transparent pullquote is easy and there isn't any overhead. We will likely be using Inline Style.
For this pullquote example we add the <small> tag,
a <b> tag, and just for grins add
the style="color:navy" to the paragraph
tag to override the predefined black.
HTML
The code we type in our page looks like this.
Do you really need to know what happens behind the curtain? It depends. If you are developing then this information may be of some use. If you are a writer or a casual coder then you really don't have to know all of the details.
There isn't anyone who understands all of the rules and the actions of the various flavored browsers. For the most part we are exploring opacity not as a design tool but more as a toy. A plaything. Something that browsers can do but we can't. Yet.
The difficulty in making opacity look simple is fully understanding what is going on, understanding how each browser renders the image and the text. There are dotted borders on some of the code to help identify exactly what each browser is doing.
Now we can jump in head first and go through a few examples that we know work.
If your page has a background image you can apply opacity to the heading text. You don't need to alter the image.
Method 1: Inline Style with heading on transparent background
We did it with inline style here but you can put it in
your CSS style sheet if you want to reuse the code.
The preferred method is Method 2 if you are applying opacity
over an image.
Copy and paste this in your Blog or Web page (jagged edge).
It will look like this (in your browser).
Do you see the jagged edge? There is a jagged edge in some browsers, including IE. It looks like this.
transparent. We are using the color white.
Copy and paste this in your Blog or Web page (remove the jagged edge).
It will look like this.
Method 2: Inline Style on Image Background
We did it with inline style here but you can put it in your style
sheet if you want to reuse the code.
Notice that we defined the background for our text as an image.
It is the same image that is our background image.
Here's the code for inline style.
Copy and paste this in your Blog or Web page.
The heading looks like this over our background image.
http://www.mandarindesign.com/images/monday.jpg
Method 3: Style Sheet
You can define the H1 or other heading tag in your style sheet.
The code goes in your external style sheet or between the <HEAD> and </HEAD> tags in your template.
h1 {
color:white;
width:100%;
background:transparent;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
font-size:42px;
line-height:2em;
text-align:center;
}
The code to type in your Blog or Web page will look like this.
HTML<h1>YOUR PAGE TITLE</h1>
We used an opacity equivalent of 50% and an arbitrary font-size. Notice that the width is defined. The browser wants to know the layout (height and width) when applying opacity. The color white works well with most backgrounds.
Tips
HEAD section of your template. If the H1 tag is already defined use another heading tag for this example: h2, h3, h4, h5, or h6. Or, remove and replace the H1 that is already defined.Jagged Text when using Opacity?
We used background:transparent;
in the example.
That will not work for everyone.
On some background images we have to explicitly say that the background is an image. Otherwise the text is jagged.
Solution
Change background:transparent; to the name of the background image.
You can apply opacity to all or part of the background image.
There are two div tags in action here.
The first div is 400px wide and
contains a background image that is 200 x 159.
It is a simple div, used as a
container for the rest of the code. The goal was to start the text below the image on the left.
The image ends in the 159 position.
The second div is inside of the first div.
For simplicity it is the same width as the image.
Again, for simplicity we set the margin-top in the paragraph
to 159px. The only thing magic
about 159 is that
it is the height of the image. That's all.
The second div is the workhorse. It's applying the opacity and floating the text.
To force the appearance that we want
we're defining the height on the right side opacity filtered text as 275px.
Copy and paste this in your page.
It will look like this.
There are two div tags in action here.
The first div is 400px wide and
contains a background image that is 200 x 159.
It is a simple div, used as a
container for the rest of the code.
The second div is inside of the first div.
For simplicity it is the same width as the image.
Again, for simplicity we set the margin-top in the paragraph
to 159px. The only thing magic
about 159 is that
it is the height of the image. That's all.
The second div is the workhorse. It's applying the opacity and floating the text.
To force the appearance that we want we're
defining the height on the right side opacity
filtered text as 275px.
The goal was to start the text below the image on the left. The image
ends in the 159 position.
DIV 400px Wide
The first div, where we put the image
as a background, is defined as 400 pixels
wide. Why? We just doubled the width of the
image to make it simple. The width and the height are required for
Mozilla (we haven't applied the opacity yet).
Background Image:200 x 159
The image is200pixels wide.
The right side text is200pixels wide.200 + 200 = 400
The image is automatically repeated with the repeat-x.
If we use no-repeat it will look like this.
You can see that the first div simply contains the background and
defines the width and height that we want.
DIV
The second div is the workhorse. It's applying the opacity and floating the text.
To force the appearance that we want
we're defining the height on the right side opacity
filtered text as 275px.
Copy and paste this in your Blog or Web page.
It will look like this.
Now that we have a spare image we can explore opacity filters with a background image. There are two divs in action here. The first div contains a background image that is 200 x 159. It is a simple div, used as a container for the rest of the code. The second div is inside of the first div. For simplicity it is the same width as the image.
The second div is the workhorse. It's applying the opacity and floating the text.
To force the appearance that we want
we're defining the height on the right side opacity
filtered text as 275px.
The dotted borders are added so that we can see what the code is doing. Changing the color pink to transparent creates yet another effect. Opacity and transparency are fun to play with.
Change repeat-x to no-repeat for this effect.
Now that we have a spare image we can explore opacity filters with a background image. There are two divs in action here. The first div contains a background image that is 200 x 159. It is a simple div, used as a container for the rest of the code. The second div is inside of the first div. For simplicity it is the same width as the image.
The second div is the workhorse. It's applying the opacity and floating the text. To force the
appearance that we want we're
defining the height on the right side opacity filtered text as 275px.
The dotted borders are added so that we can see what the code is doing. Changing the color pink to transparent creates yet another effect. Opacity and transparency are fun to play with.
Copy and paste this in your Blog or Web page.
It will look like this.
Now that we have a spare image we can explore opacity filters with a background image. There are two divs in action here. The first div contains a background image that is 200 x 159. It is a simple div, used as a container for the rest of the code. The second div is inside of the first div. For simplicity it is the same width as the image.
The second div is the workhorse. It's applying the opacity and floating the text. To force the appearance
that we want we're defining the height on the right side
opacity filtered text as 275px.
For some reason Mozilla Firefox is demanding that this have a border. Otherwise, it misplaces
the paragraph text and lays it over the left side image. A cool effect, but not what we want.
The border on this one is 1px solid white.
There's more about opacity in the Text Tricks page and in the Mandarin Blog where we explore IE, Mozilla, and Opera opacity over images.
The Color Palette Picker creates ten tones from a single color. The opacity filter we are using in this post does the same thing but we don't know the color code without sampling the color. This is a quick cheat to the color codes. It creates 10 shades of the base color, at varying degrees of opacity. Included is opacity over a white background, opacity over black background and opacity over the color of your choice.
The Opacity Color Chart lets you see opacity in live color.
This page has a good opacity post that works in IE only. The same code can be modified to work in Mozilla by adding the Mozilla proprietary opacity code.