demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

BALUCHITHERIUM

3D Extruded Text with CSS3

css / typography

Estimated reading time: 2 minutes, 22 seconds

The technique I am demonstrating here isn’t one I made from scratch; as far as I am aware, credit for origination should go to Mark Otto, a designer at Twitter; the version that I’m showing derives from patterns created by Trent Walton. This is not “true 3D” but a fake-out; real 3D text will have to wait for lessons in WebGL and CSS 3D transforms.

Very simply, we create extruded text appearance by creating a stacked series of CSS text-shadows. As we’ll see later, transferring the same technique to box-shadow can also create the effect of a raised or sunken button in CSS.

The CSS code is somewhat repetitive; the main aspect to focus on is the changing vertical offset of the main shadows. Thankfully, text-shadow does not require CSS3 vendor prefixes.

The code for the example at the top of this article is:

h1 { background: #ccc; font-size: 4vm; padding: 1.2rem; color: #fff; font-family: Blue Highway; Arial Black, sans-serif; text-align: center; letter-spacing: 1rem; text-shadow:0 .01em 0px #dededa,
		0 .015em 0 #dededa,
		0 .02em  0 #dededa,
		0 .028em 0 #dededa,
		0 .035em 0 #dededa,
		0 .04em  0 #dededa,
		0 .045em 0 #dbdbd6,
		0 .055em 0 #dbdbd6,
		0 .06em  0 #dbdbd6,
		0 .065em 0 #d9d9d4,
		0 .07em  0 #d9d9d4,
		0 .08em  0 #d8d8d3,
		0 .085em 0 #d8d8d3,
		0 .09em  0 #d8d8d3,
		0 .095em 0 #d6d6d1,
		0 .105em 0 #d6d6d1,
		0 .06em .06rem rgba(104, 104, 92, 0.15),
		.07em .105em .04em rgba(0, 0, 0, .015),
		-.02em .09em .05em rgba(104, 104, 92, 0.25),
		-.03em .07em .065em rgba(104, 104, 92, 0.1),
		-.075em .08em .09em rgba(104, 104, 92, 0.06),
		-.09em .06em .195em rgba(104, 104, 92, 0.095);
}

Just as with multiple background images in CSS, we separate multiple text shadows with commas, starting with those originating nearest the text element and working outwards. (For this example I’m using em units rather than px for enhanced scalability, but almost any CSS unit of measurement would work).

The first 16 shadows are solid, slowly and subtly growing darker as they descend, creating the appearance of extruded text. The final six shadows in the declaration actually serve the purpose of ambient shadows, being offset to the left, right, and top of each letter, with added blur and transparency (in the form of rgba color values).

Naturally, this effect will only work in modern browsers – IE9 does not support text-shadow, although IE10 does. It’s therefore wise to make sure that make that the base color of the text is distinct from the background, as is the example at the top of this article; try to avoid “white on white”, ensuring that your content is still readable in IE.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.