Stylozero

Here’s a little trick about making an alternate-sized “graphical” effect with CSS, like the teaser text I used on the homepage.

The challenge here is to keep the HTML markup as clean as possible and just use CSS to style the text.

So, instead of assigning an id or a class to each paragraph, like so…

<p id="1">I am not a communication consultant.</p>
<p id="2">I am not a project manager.</p>
<p id="3">I am not an information architect.</p>
…

…we can keep the markup clean and neat…

<div id="teaser">
  <p>I am not a <em>communication consultant</em>.</p>
  <p>I am not a <em>project manager</em>.</p>
  <p>I am not an <em>information architect</em>.</p>
  <p>I am not an <em>art director</em>.</p>
  <p>I am not a <em>graphic designer</em>.</p>
  <p>I am not a <em>web designer</em>.</p>
  <p>I am <em>all</em> that. <a href="/services" title="services">Pick what you need.</a></p>
</div><!-- end "teaser" -->

… and make use of the + sign combinator to target each paragraph, and play with its position and size…

#teaser p { color: #666; margin-left: 40px; }
#teaser p+p { margin-left: 160px; font-size: 5em; }
#teaser p+p+p { margin-left: 105px; font-size: 3.4em; }
#teaser p+p+p+p { margin-left: 0; font-size: 3.4em; }
#teaser p+p+p+p+p { margin-left: 140px; font-size: 4em; }
#teaser p+p+p+p+p+p { margin-left: 90px; font-size: 4.5em; }
#teaser p+p+p+p+p+p+p { margin-left: 300px; font-size: 3.4em; margin-top: 30px; }
#teaser p em { color: #444; }

There you have it! A simple but clever solution to have a graphical text effect with CSS without adding any extra id’s or classes to the HTML.