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
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    FileReader API

    As broadband speed continues to get faster, the web continues to be more media-centric.  Sometimes that can be good (Netflix, other streaming services), sometimes that can be bad (wanting to read a news article but it has an accompanying useless video with it).  And every social service does...

  • By
    Flashy FAQs Using MooTools Sliders

    I often qualify a great website by one that pay attention to detail and makes all of the "little things" seem as though much time was spent on them. Let's face it -- FAQs are as boring as they come. That is, until you...

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!