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>