.Net Code Monkey RSS 2.0
 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
Archive
<July 2014>
SunMonTueWedThuFriSat
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
Blogroll
 Clemens Vasters
 Harry Pierson
Passion * Technology * Ruthless Competence
 Joshua Flanagan
A .NET Software Developer
 Michael Schwarz's Blog
Developing applications on the Microsoft platform since Windows 3.1!
 Omar Shahine
Yet another Microsoft blogger
 Scot GU
Scott Guthrie lives in Seattle and builds a few products for Microsoft
 Scott Hanselman
Programming Life and the Zen of Computers
 Tom Mertens
Tom's corner
About the author/Disclaimer

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2014
Duane Wingett
Sign In
Statistics
Total Posts: 52
This Year: 9
This Month: 0
This Week: 0
Comments: 49
Themes
Pick a theme:
All Content © 2014, Duane Wingett
DasBlog theme 'Business' created by Christoph De Baene (delarou)