While I was working on the template for this site I wanted to find the opportunity to take advantage of CSS3 effects for text and use this for the title over the standard hero image. While I was working on the main site I ran across a number of cool things you could do with text in CSS3, but really didn't have the opportunity to use them in the site as the design really didn't call for it.
The first effect I wanted to take advantage of was using stacked text-shadows to create a 3D effect in the text, which I think looks really cool over the blue sky background. The one issue I noticed when using this effect was that each letter pointed to their own horizon and not a common horizon, which is neat but really doesn't produce a strongly realistic 3D effect.
My solution was to break up the word into separate letters using SPANs and assign a slightly different text-shadow property for each. I know, you can probability do this a lot easier with LESS or SASS, but they are still on my training list. The layers start with a light shade (#999) and work down towards a darker shade (#333), finishing with a dark blue to work against the sky background.
Anyway, here is the breakdown.
First, I counted all letters and spaces that are used in the title. In this case, the number was 17.
Next, I broke the title up with spans and assigned them individual classes
<h1 class="title">
<span class="nb"><span class="nbone">H</span><span class="nbtwo">u</span><span class="nbthree">s</span><span class="nbfour">k</span><span class="nbfive">y</span> <span class="nbsix">N</span><span class="nbseven">i</span><span class="nbeight">n</span><span class="nbnine">j</span><span class="nbten">a</span> <span class="nbeleven">B</span><span class="nbtwelve">l</span><span class="nbthirteen">o</span><span class="nbfourteen">g</span><span class="nbfifteen">s</span></span>
</h1>
Then I identified the center letter, in this case the second "n" in Ninja, and assigned the text-shadow for this class so all layers are slipping on the vertical, and no layers slipping to the horizontal.
.nbeight {
text-shadow:
0px 1px 0px #999,
0px 2px 0px #888,
0px 3px 0px #777,
0px 4px 0px #666,
0px 5px 0px #555,
0px 6px 0px #444,
0px 7px 0px #333,
0px 8px 7px #001135;
}
Now for each direction, the horizontal was incremented slightly in the appropriate direction towards the center horizon. For example, the H looks like:
.nbone {
text-shadow:
1px 1px 0px #999,
2px 2px 0px #888,
3px 3px 0px #777,
4px 4px 0px #666,
5px 5px 0px #555,
6px 6px 0px #444,
7px 7px 0px #333,
8px 8px 7px #001135;
}
While the final letter receives:
.nbfifteen {
text-shadow:
-1px 1px 0px #999,
-2px 2px 0px #888,
-3px 3px 0px #777,
-4px 4px 0px #666,
-5px 5px 0px #555,
-6px 6px 0px #444,
-7px 7px 0px #333,
-8px 8px 7px #001135;
}
The remaining letters' horizontal shadows were incremented or decremented as appropriately at each layer to create the proper effect. I had to carefully adjust the letter-spacing and font-size to achieve the desired effect. I did notice some interesting side effects while working these adjustments, some with strong comic potential. I recommend playing with them at your leisure.
Here is the final CSS:
h1.title {
font-family: serif;
font-size: 7em;
color: #fff;
letter-spacing: 4px;
}
.nbone {text-shadow: 1px 1px 0px #999, 2px 2px 0px #888, 3px 3px 0px #777, 4px 4px 0px #666, 5px 5px 0px #555, 6px 6px 0px #444, 7px 7px 0px #333, 8px 8px 7px #001135;}
.nbtwo {text-shadow: 0px 1px 0px #999, 1px 2px 0px #888, 2px 3px 0px #777, 3px 4px 0px #666, 4px 5px 0px #555, 5px 6px 0px #444, 6px 7px 0px #333, 7px 8px 7px #001135;}
.nbthree {text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 1px 3px 0px #777, 2px 4px 0px #666, 3px 5px 0px #555, 4px 6px 0px #444, 5px 7px 0px #333, 6px 8px 7px #001135;}
.nbfour {text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 1px 4px 0px #666, 2px 5px 0px #555, 3px 6px 0px #444, 4px 7px 0px #333, 5px 8px 7px #001135;}
.nbfive {text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 1px 5px 0px #555, 2px 6px 0px #444, 3px 7px 0px #333, 4px 8px 7px #001135;}
.nbsix {text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 1px 6px 0px #444, 2px 7px 0px #333, 3px 8px 7px #001135;}
.nbseven {text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 1px 7px 0px #333, 2px 8px 7px #001135;}
/* middle */
.nbeight {text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;}
/* end middle */
.nbnine {text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, -1px 8px 7px #001135;
}
.nbten {text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, -1px 7px 0px #333, -2px 8px 7px #001135;}
.nbeleven {text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, -1px 5px 0px #555, -2px 6px 0px #444, -3px 7px 0px #333, -4px 8px 7px #001135;}
.nbtwelve {text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, -1px 4px 0px #666, -2px 5px 0px #555, -3px 6px 0px #444, -4px 7px 0px #333, -5px 8px 7px #001135;}
.nbthirteen {text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, -1px 3px 0px #777, -2px 4px 0px #666, -3px 5px 0px #555, -4px 6px 0px #444, -5px 7px 0px #333, -6px 8px 7px #001135;}
.nbfourteen {text-shadow: 0px 1px 0px #999, -1px 2px 0px #888, -2px 3px 0px #777, -3px 4px 0px #666, -4px 5px 0px #555, -5px 6px 0px #444, -6px 7px 0px #333, -7px 8px 7px #001135;}
.nbfifteen {text-shadow: -1px 1px 0px #999, -2px 2px 0px #888, -3px 3px 0px #777, -4px 4px 0px #666, -5px 5px 0px #555, -6px 6px 0px #444, -7px 7px 0px #333, -8px 8px 7px #001135;}
Now if you haven't noticed, the site contains three completely different headline styles with three completely different text effects (resize your browser if you haven't noticed, or hop on a desktop if you are totally confused about what I've been typing about). If this was just a bunch of body text I would have simply set the containing class to display: hidden;, but since this is an H1 and you can't do that with H1s (semantics are heck), I had to apply any new effect styles to the entire collection. For example, the neon effect for medium width (less than 768px) windows looks like:
.nbone, .nbtwo, .nbthree, .nbfour, .nbfive, .nbsix, .nbseven, .nbeight, .nbnine, .nbten, .nbeleven, .nbtwelve, .nbthirteen, .nbfourteen, .nbfifteen {text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #2dff95, 0 0 30px #2dff95, 0 0 40px #2dff95, 0 0 50px #2dff95, 0 0 75px #2dff95;}
But that effect is for a different post.