{ Duane.Wingett } - Glass Effect Text without images (HTML and CSS only)

Thursday, May 27, 2010

Glass Effect Text without images (HTML and CSS only)

As part of the development for a new web site I am working on I ideally need the site header text to be a glass effect laid over the glass effect headr image. I also want the header text to be able to be 'read' by search engines.

Although many search engines can read the 'alt' text of an image I belive I am right in saying the major search engines put more emphasis or weight on plain text. Especially text in header tags H!, H2 etc.

With this in mind I wanted to create a text only header that also has a glass effect.

One option was to create a text header and then over lay half of the text with a semi trans parent PNG. This will work visually but will not allow the text to be selected properly.

So to allow the text to be selected I decided I needed to place one layer of text on top of another and then cut off the bottom of the top layer of text.

Below is the code I used.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    </title>
    <style type="text/css">
        div.Glass
        {
            background-color:#FFF;
            background-image:url(http://michaelsync.net/wp-content/uploads/2008/06/silverlight-glass-button.jpg);
            background-position:-22px -10px;
            background-repeat:no-repeat;
            border:solid 1px #FFF;
            height:80px;
            position:relative;
        }
        div.Text
        {
            color:#66F; 
            height:80px;
        }
        div.Shine
        {
            color:#99F;
            height:39px;
            overflow:hidden;
            margin-top:-97px;
        }
        h1
        {
            margin-top:17px;
        }
        
        /* IE7 Specific CSS hack */
        * + html div.Shine
        {
            margin-top:-80px;
        }     
    </style>
</head>
<body>
    <form id="form1" >
    <div class="Glass">
        <div class="Text"><h1>Welcome</h1></div>
        <div class="Shine"><h1>Welcome</h1></div>
    </div>
    </form>
</body>
</html>

Thursday, May 27, 2010 12:17:21 PM (GMT Standard Time, UTC+00:00)

Comments [0] -
Asp.Net | CSS | Html

All comments require the approval of the site owner before being displayed.

Name
E-mail	(will show your gravatar icon)
Home page

	Remember Me
Comment (Some html is allowed: `a@href@title, b, blockquote@cite, em, i, strike, strong, sub, sup, u`) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.
Enter the code shown (prevents robots):
Live Comment Preview