CSS Opacity Examples

Color:Green with Background:Transparent

This one has a jagged edge in IE but renders well in Mozilla. We used a transparent background. Internet Explorer needs a background color other than transparent for smooth edges. To demonstrate opacity with text the outer div container has a float:right. This example begins with the color named darkgreen with an opacity of 25%, then 75%, 90%, and bold (on the 25%) and ends with an opacity of 90%. The color darkgreen only needs to be specified once. The rest is automagic. This looks great in Mozilla but not so great in Internet Explorer.

Copy and paste this in your Blog or Web page.

It will look like this.

This one has a jagged edge in IE but renders well in Mozilla. We used a transparent background. Internet Explorer needs a background color other than transparent for smooth edges. To demonstrate opacity with text the outer div container has a float:right. This example begins with the color named darkgreen with an opacity of 25%, then 75%, 90%, and bold (on the 25%) and ends with an opacity of 90%. The color darkgreen only needs to be specified once. The rest is automagic. This looks great in Mozilla but not so great in Internet Explorer.

Color:#300 with Background:White

Begin with Opacity 90

This is the left side plain text. You can type as much as you want here. This would usually contain the quote you want to pull. We think that this will look like some of the pullquotes or subtitles we see in magazine layout. It might. It depends on what you type in here.

Copy and paste this in your Blog or Web page.

It will look like this.

This is the left side plain text. You can type as much as you want here. This would usually contain the quote you want to pull. We think that this will look like some of the pullquotes or subtitles we see in magazine layout. It might. It depends on what you type in here.

Color:#033 with Background:White

Begin with Opacity 90

This is the left side plain text. You can type as much as you want here. This would usually contain the quote you want to pull. We think that this will look like some of the pullquotes or subtitles we see in magazine layout. It might. It depends on what you type in here.

Copy and paste this in your Blog or Web page.

It will look like this.

This is the left side plain text. You can type as much as you want here. This would usually contain the quote you want to pull. We think that this will look like some of the pullquotes or subtitles we see in magazine layout. It might. It depends on what you type in here.