Sometimes it's nice to have some stylish text on the page. Most of us end
up resorting to using graphics but with CSS and an idea from the great guys
at Mandarin, it's amazing what you can do.
HTML
<div class="outer">
<div class="inner">
<br />
<span style="color:#f90;">T</span><br />O<br />
<span style="color:#0a0;">W</span><br />E<br />
<span style="color:#f90;">R</span><br />I<br />
<span style="color:#0a0;">N</span><br />G<br />
<span class="bold">LETTERS</span>
</div>
<div class="normal">
This is a Magazine style idea that I've borrowed from the guys
at Mandarin
and tweaked a bit for XHTML validation.
It's pretty cool and uses no graphics, javascript or bots, just CSS.
For
the purists though, it does use inline styling and although it could
come out, you'll still end up with spans if you want the alternating
colour letters.
<div class="copy">
FROM AN IDEA BY MANDARIN<br />REMORSELESSLY PLAGIARISED BY JBVISIONS
</div>
</div>
</div>
CSS
<style type="text/css">
.outer {width:350px;margin:0px auto;}
.inner {font-size:28px;
font-weight:bold;
text-align:center;
font-family:Tahoma,monospace,arial,system;
line-height: 95%;}
.normal {margin:0px auto;
padding-top:10px;
width:80%;
text-align:center;
font-size:80%;
line-height:120%;}
.bold {font-weight:bold;
font-size:30px;color:#f90;
background-color:transparent;}
.copy {padding-top:5px;
letter-spacing:-1px;line-height:100%;
font-size:90%;font-weight:bold;}
</style>
]: Failed opening '/home/virtual/site52/fst/var/www/html/includes/webbyfooter.htm' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in