Duplicate DeSandro’s CSS Effect

Duplicate DeSandro’s CSS Effect: "
I recently stumbled upon David DeSandro’s website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate: use some simple JavaScript goodness to inject unicorns into their page. A brilliant idea, if I may say so myself (and I may). David’s design is simplistic but features a few classy CSS effects, one of the most impressive being the footer “made this” animation. Let me show you how David accomplished this effect.

View Demo

The HTML

The system will consist of a wrapper (though it’s not necessarily needed), an link, and a series of SPAN tags:

<div id="animationWrapper">
<a href="/">
<span class="span1">David</span>
<span class="span2">J. Walsh</span>
<span class="span3">Arsenal</span>
<span class="span4">Legend</span>
</a>
</div>

You’ll understand the need for SPAN tags with separate classes when you see the CSS.

The CSS

There are a good amount of styles but the most important are applied to the SPAN elements:

/* entire wrapper */
#animationWrapper {
width:300px;
font-family:'proxima-nova-1','proxima-nova-2','Helvetica Neue','Arial',sans-serif;
background:#222;
padding:40px;
}

/* link which encapsulates SPANs */
#animationWrapper a {
font-weight: 800;
text-transform: uppercase;
font-size: 42px;
line-height: 0.9em;
margin-bottom: 10px;
display: block;
position: relative;
color: #E58;
text-decoration: none
}

/* span and a - 'workers' */
#animationWrapper a, #animationWrapper span {
-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;
-ms-transition: all 0.12s ease-out;
transition: all 0.12s ease-out;
}

#animationWrapper span {
display: block;
color: #555;
text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}

/* special size for the first item */
#animationWrapper .span1 {
font-size: 76px;
line-height: 0.8em;
}

#animationWrapper a:hover {
color: #fff ;
top: -3px;
left: -3px;
}

/* all spans become white */
#animationWrapper a:hover span {
color:#fff;
}

/* different colors for each SPAN */
#animationWrapper a:hover .span1 {
text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;
}

#animationWrapper a:hover .span2 {
text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;
}

#animationWrapper a:hover .span3 {
text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;
}

#animationWrapper a:hover .span4 {
text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;
}

The plain state SPAN receives a base text-shadow value and also defines the transition properties which will be played upon hover. Each SPAN contains its own class which controls its text-shadow color and width during hover. The hover state then enacts those text-shadow and color properties.

View Demo

Well done to David for his simple but classy CSS effect. If we’re being honest, those are the best kind.
Duplicate DeSandro’s CSS Effect is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.
Related posts:

1. Duplicate the jQuery Homepage Tooltips
2. Duplicate the jQuery Homepage Tooltips Using MooTools
3. Duplicate the jQuery Homepage Tooltips Using Dojo
4. Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript
5. Dress Up Your Select Elements with FauxSelect

"