CSS3 animations and transitions have become two widespread buzzwords today. But what we can accomplish with the old good CSS 2.1 standard? Well, quite a lot. If you take a look at some of the past CSS experiments made by talented web developers around the globe, you'll probably be surprised by the stunning results achieved when CSS3 was only a distant light in the tunnel of backward compatibility and broken standards. In this article we're going to create an experimental demo featuring some advanced typographical effects, but without CSS3.
First of all, let's create our markup structure:
<h1> <span class="word">L</span> <span class="word-end">etter</span> <span class="side-a">to</span> <span class="side-b">me</span> </h1>
We want to create the effect of a giant capital letter followed by the rest of the word and with the two surrounding words positioned within its boundaries. Here's the CSS code:
h1 {
margin: 10px;
position: relative;
font-family: 'Arial Black', Arial, sans-serif;
}
.word {
font-size: 8em;
position: absolute;
top: 0;
left: 0;
}
.word-end {
font-family: Arial, sans-serif;
position: absolute;
top: 3em;
left: 3em;
text-transform: uppercase;
}
.side-a {
color: #fff;
font-size: 90%;
position: absolute;
top: 4em;
left: 1em;
}
.side-b {
color: #fff;
font-size: 90%;
position: absolute;
top: 8.3em;
left: 4em;
}
All lengths are relative, so they can scale along with the rest of the text. You can see the demo below (look ma, no CSS3!).
