Duplicate DeSandro’s CSS Effect

By  on  
CSS Text Shadow 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.

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 {
	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.

Well done to David for his simple but classy CSS effect.  If we're being honest, those are the best kind.

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

Discussion

  1. Very nice effect indeed. David’s a legend.
    By the way, do you have the link for the thief’s website?

  2. Hotlinking JavaScript is just about the stupidest thing I’ve ever heard of…

    I would have either made the offending site redirect to my site to increase my traffic, or been incredibly malicious and just used the IE6ify script. http://ie6ify.com/

  3. Cool effect, and degrading gracefully shouldn’t be a problem, so it’s actually usable in real projects. Btw, as all browsers supporting transitions would also support nth-child selectors, I’d use those instead of the extra class names.

  4. Is there any particular reason why the spans and link are wrapped in a div rather than a paragraph tag? Surely this would make more sense semantically? Also, the nth-child: selector would really make the code a lot cleaner too. In a way its a shame that there are no CSS selectors for individual words within an element as all the span code could be ditched then!

  5. it is for commercial use?

  6. sachin

    cool effect with some long css code !
    but yes, it’s very nice .

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!