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 Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

  • By
    Web Audio API

    The Web Audio API allows developers to load and decode audio on demand using JavaScript.  The more I evaluate awesome games for Firefox OS TVs, the more I get to learn about these APIs that I normally wouldn't touch.  The following is a very basic introduction to the WebAudio API...

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!