In de html code staan wat PHP-statements. Als je php op een html-pagina kan parsen hoef je niets aan de code te veranderen. Zo niet: vervang dan de php-code door jouw eigen tekst. In alle oude IE-browsers wordt er een glossy "geproduceerd". Alleen de ronde hoeken hebben geen extra code gekregen om stok-oude en gebrekkige (IE) browsers te "helpen". Nu IE9 er is, is er geen excuus meer voor de IE-gebruikers om niet de laatste versie van hun browser te gebruiken. Scheelt overigens een "hoop" code. Plaats de stylesheet in de head-sectie van de pagina en de html-code in de body-sectie. In dit voorbeeld wordt de huidige datum weergegeven. Je kan natuurlijk deze procedure ook een ander doel geven. De kleurstelling en de overige (CSS)eigenschappen zijn eenvoudig te wijzigen. Experimenteer met de waarden om een voor jou werkbaar geheel te krijgen.
<div class="glossy-text">
<div class="glossy-text-effect"><?php echo strftime("%e",time());?>
<a href="http://kompoos.nl/css/text-effects/glossy-text-effect.html" >
<span class="despan"><span class="glossy-maand">
<em> <?php echo strftime("%B",time());?></em></span></span></a>
</div>
</div>
<style type="text/css">
.glossy-text{
letter-spacing:-0.1em;
font-family:monospace;
font-weight:bold;
color:#aaa;
background:#040;
font-size:8em;
width:1.4em;
border-radius:30px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
-webkit-border-radius:30px}
.glossy-text:hover{
color:#ccc;
background:#050}
.glossy-text-effect{
padding-bottom:20px;
left:0.24em;
position:relative;
margin-top:0;
margin-bottom:2px;
width:100%}
.glossy-text-effect a .despan{
width:1.30em;
height:0.5em;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGQCAYAAABvWArbAAAAMElEQVQ4je3MMQoAIBADwSU/992KZ30gdnY7RYoEQlWNADPADrB63Lr3+vsFSZLUHFYlJkgowk6UAAAAAElFTkSuQmCC');
top:0.05em;
left:-0.2em;
position:absolute;
border-radius:30px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
-webkit-border-radius:30px}
.glossy-text-effect a{
text-decoration:none}
.glossy-maand{
padding:10px 50px 50px 10px;
color:#999;
background:transparent;
font-size:0.17em;
letter-spacing:1px;
position:absolute;
margin-top:100px;
margin-left:0.7em}
</style>