The depth is created with multiple text-shadows. Each has a zero blur and is increasingly offset from the main text. This graphic shows how the layers are constructed but, in the real example, the colors are similar and the spacing is no more than 1px apart:
A few blurred shadows are then applied to make the 3D effect more realistic. The final CSS:
p.threeD
{
text-shadow:
-1px 1px 0 #ddd,
-2px 2px 0 #c8c8c8,
-3px 3px 0 #ccc,
-4px 4px 0 #b8b8b8,
-4px 4px 0 #bbb,
0px 1px 1px rgba(0,0,0,.4),
0px 2px 2px rgba(0,0,0,.3),
-1px 3px 3px rgba(0,0,0,.2),
-1px 5px 5px rgba(0,0,0,.1),
-2px 8px 8px rgba(0,0,0,.1),
-2px 13px 13px rgba(0,0,0,.1)
;
}
OK, so it’s a lovely effect but that’s a lot of CSS code for your weary typing fingers. Building your own styles will also take time and effort. Wouldn’t it be great if we had something to handle the donkey work for us? Stay tuned to SirCodex…