Towering Text

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.


T
O
W
E
R
I
N
G
LETTERS
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.
FROM AN IDEA BY MANDARIN
REMORSELESSLY PLAGIARISED BY JBVISIONS


Here's the code

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&#39;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>