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
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

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

Incredible Demos

  • By
    Dynamically Create Charts Using MooTools MilkChart and Google Analytics

    The prospect of creating graphics charts with JavaScript is exciting. It's also the perfect use of JavaScript -- creating non-essential features with unobtrusive scripting. I've created a mix of PHP (the Analytics class), HTML, and MooTools JavaScript that will connect to Google Analytics...

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

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!