Om dit tekst effect op jouw pagina te plaatsen moet je de html-code in de body-sectie plaatsen en de stylesheet in de head-sectie van jouw pagina. In dit voorbeeld is een h1 gebruikt; maar de procedure werkt natuurlijk ook op h1's, h2's, div's en wat dies meer zij... de lengte van het effect wordt ingesteld bij de cite (in de stylesheet). De lengte wordt bepaald door de letter-spacing (tussen de twee non-breakable-spaces) welke nu 6em is. Verander deze waarde naar eigen inzien.
<h1 class="glass_letter">
<span class="glazen"><a>KOMPOOS.NL</a>
<span>
<a href="http://kompoos.nl/css/text-effects/glass-letters.html">
<cite> </cite>
</a>
</span>
</span>
</h1>
<style type="text/css">
.glass_letter{
overflow:hidden;
white-space:nowrap;
position:relative}
cite{
letter-spacing:6em;
overflow:hidden}
.glass_letter a{
padding-left:1em;
color:#333;
background:inherit}
span.glazen span{
position:absolute;
line-height:0px;
top:0;left:0;
border:0.55em solid;
border-color:#aaa #677 #444 #abb;
filter:alpha(opacity=28);
opacity:0.28}
span.glazen span:hover{
border-color:#bbd #688 #444 #acc;
filter:alpha(opacity=30);
opacity:0.3}
</style>