Expression Web help

• About
• Expression Web Forum
• Expression web resources
• CSS
• Build Expression Web Template 1
• Build Expression Web template 2
• Build Expression Web Template 3
• Style horizontal Navigation with CSS
• Style vertical menu with CSS
• Style the main content area
• Style the footer
• Centre a page
• .style1
• Build Expression Web DWT Tutorial
• Graphic Template example
• Free Expression Web Templates
• Add RSS to Expression Web
• Expression web forms
• Contact
• RSS feeds
• 10 Tips
• Page includes
• Insert flash in expression web
• Expression web dropdown menu
• Use XML with Expression Web
• Point and click easy drop-down menu's
• Table Based Layouts
• ASP.NET Ad Rotator
• Display Data
• Search database using a text box
• Transparent Text
• Bold text - Formatting
• Date and time
• Who are you

 

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?

  RSS

Our forum feed can be found here

Reader not listed? Click here for more options

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