Mission
Ever wanted to get a material shadow on your text? This can be accomplished with the use of a handy feature baked into the text-shadow attribute in your stylesheet.
Example 1
In the example below, you will notice that the .material-button style has the text-shadow attribute set, but instead of just setting a single shadow with a blur, we set multiple shadows with their blur set to 0. By doing this, each shadow is 1 pixel below and 1 pixel to the right of the last and creates the illusion of a long cast shadow.
See the Pen Material Text Shadow by TMichel Productions (@TMichelProductions) on CodePen.0
Original CodePen Pen can be found here
Example 2
By playing around with the x and y offset of the text-shadow the angle can be adjusted, and by adjusting the opacity of the colors in the shadow the shadow can fade out. For example:
See the Pen Material Text Shadow to Left w/ Fade by TMichel Productions (@TMichelProductions) on CodePen.0
Original CodePen Pen can be found here
And that’s all there is to it! If this post helped you out feel free to leave a comment and share it with a friend.
Happy coding!
