Expression Web help

Join our community

Visit our Expression Web Forum

 

Using Transparent Text

Using CSS to make transparent text is easy to do.

As you can see, the main heading above has transparent text... Look closely and you will see the image through the text. In the past, i have used this technique to text in the masthead to allow the graphic to show through.

0.0 (fully transparent) to 1.0 (fully opaque)

Trans 25

.trans25 {
color: #17ADD7;
width: 100%;
background: transparent;
filter: alpha(opacity= 25);
-moz-opacity: .25;
opacity: .25;
text-align: center;
font-size: 400%;
font-weight: bold;
font-variant: small-caps;
text-transform: uppercase;
}

Trans 50
.trans {
color: #17ADD7;
width: 100%;
background: transparent;
filter: alpha(opacity= 50);
-moz-opacity: .50;
opacity: .50;
text-align: center;
font-size: 400%;
font-weight: bold;
font-variant: small-caps;
text-transform: uppercase;
}
Trans 75

.trans75 {
color: #17ADD7;
width: 100%;
background: transparent;
filter: alpha(opacity= 75);
-moz-opacity: .75;
opacity: .75;
text-align: left;
font-size: 400%;
font-weight: bold;
font-variant: small-caps;
text-transform: uppercase;
}

The above is the CSS for 75% transparency

Web site uses

I created a template some 12-14 month ago and used it to demonstrate this effect whilst discussing this on another forum the template can be found here. The panels on the right use a .class that has transparency. This allows us to see the graphic through the image and text. I don't recall what does what but the mid panel uses the top most graphic and if you look carefully you will see the page background through the image. The other two panels use a small graphic one to give the effect of lines the other to look transparent.

To use the code, i would suggest you make a .class rule. That way, you can apply the rule to just about anything and everything.

One last point the page heading for this page is...

Using Transparent Text

I purposefully made the heading large so that the word transparent would spill into the right side content in an 800px wide window (FF) can you see through the word? A normal text would obscure this content.

If you are interested in this topic, why not join the discussion?

Microsoft MVP

RSS Icon  RSS

Our forum feed can be found here

Add RSS to Yahoo

Add to Google

Reader not listed? Click here for more options

Expression Web Help RSS
Expression Web Help. Tips and Tricks and tutorials Get our feed now