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" >
border:solid 1px #FFF;
/* IE7 Specific CSS hack */
* + html div.Shine
<form id="form1" >