CSS3 text with textured drop shadow effect

I recently saw an ad in a magazine that used a textured drop shadow and thought I had seen some web designs using that very thing. I expected they would be using CSS to do it, but instead found images.

I’m not a fan of using images for headers or display text on websites, so I played around with stacking some text and applying a CSS3 mask to the buried text, then moving it out and down a bit to create a textured shadow.

Demo

View demo (At time of writing) Demo only works in Safari and Chrome, and barely in Firefox.
It is what it is – selectable text with textured text offset to appear as over-designed drop shadows.

Before you get started

Here are some notables about the experiment:

• This has limited browser support. Really, only Safari and Chrome (webkit browsers) can handle all the styles. Firefox straight up hates it, and will only fully support the SVG version (demo example #6).
• The SVG version (the only one that works in Firefox) came from Lea Verou’s article, Text masking — The standards way.
• I am using ems for the demo. This way you only have to change font-size: 5.5em line and everything else should react to it appropriately.
• I am using the Google font Alegreya because I felt it was thick enough to work with, not because I like it. You can use just about any heavy, display font. Whoa, think about this: you could use a second font or numbers behind it to really make things stand out. See example #7.
• I am supplying the HTML and CSS to produce my results, but am sure you will take it beyond what you see here.
• As with everything, I am sure someone will have a better way to do this. I would love to know what that is, so feel free to comment below or email me so I can fix/improve it.

Six Eight ways from Sunday…

My 8 examples are rudimentary and made to start your imagination. Some have a hover state, and others have different offsets (or none at all.) I figure you should be able to mix and match to create your own.

The demo and the download files are intended to get you started. While the files do include the PNGs, you will need to create your own to suit your needs.

What is going on here?

Basically, I am stacking a span on top of a span (and in one case 3 stacked spans):

<div class="text-texture">
  <span class="text-shadow">Ace is quite lazy</span>
  <span class="ex1">Ace is quite lazy</span>
</div>

.text-texture, .text-shadow {
position:relative;
}
.ex1 {
position: absolute;
top: 0px;
left: 0px;
color:#9e8e80;
}
.text-shadow {
top: .05em;
left: .05em;
-webkit-mask-image: url(waves.png);
color:#293051;
}

What about SEO and screenreaders and…

Seriously, it’s experimental stuff to see if I could do it. As for SEO, you could use a heading tag for one of the spans to give it some SEO weight, if needed. Though, be careful of those default heading styles—you will likely need to override them. As for screen readers, you could add speak: none; to the span, but not all screen readers will understand it.

Download tutorial files

Feel free to download the files used in the demo.
Download Zip file (266KB)