I want to achieve a shadow effect where it looks like the bottom of the text is touching the floor and shadow is cast behind it. Something like the perspective box in this post or the shadows in this image
(source: psd-dude.com)
I only need the shadow to be going in one direction.
Is there a pure CSS solution? Is there a solution at all? I’ve seen it done with boxes, but not text. The image above was made with Photoshop
2
Answers
I thought about a solution where I add an
:after
-Element to each letter, withcontent: "T"
for example for the letter T. Then make the content itself invisible and just use thetext-shadow
property on:after
-Element, which we can rotate viatext-transform: rotateX(70deg)
.I made a draft on JSFiddle.
You can play with CSS transforms and perspectives:
The bottom of the shadow does not seem to completely coincide with the bottom of the text, that’s because the baseline is a bit higher. Otherwise it would be bad for characters like
g
j
p
q
y
.If you don’t want this space, you can reduce the line-height.
I hard-coded the shadow text in the pseudo-element. It would be desirable to avoid this, and let it use the same text as the element. That’s possible with an
element()
background, only supported by Firefox.