CSS3 text with textured drop shadow effect

1) This is an experiment. 2) I realize it is using CSS that is NOT cross-browser compatible. 3) And yes, the CSS is not Standards compliant since it is relying on prefixes. Use at your own risk. Comments, fixes, input welcome.

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:

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)

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *