Monkey Raptor

Sunday, November 10, 2013

CSS: Creating Subtle Text FX with Text-Shadow

We can stack multiple values for text-shadow CSS property. This is an example of using it to create subtle FX on mouse hover.

Anyway, my post's background has #eee color (super light grey). So, to make the text kinda 'invisible', I put the same color as the background.
DEMO
Hover on the letters below

This is the text


This is the CSS of that element <div class='ex-text'></div> :
Because I don't want to.


That's that. Pretty simple, but I think it's neat.

Reference : CSS text-shadow documentation at MDN
CSS: Creating Subtle Text FX with Text-Shadow
https://monkeyraptor.johanpaul.net/2013/11/creating-subtle-text-fx-with-css-text.html?m=0

No comments

Post a Comment

Tell me what you think...