hello and welcome to red stapler
Channel in this video I'm going to show
you how to make a glowing 3d text effect
with pure CSS in just a few minutes
ready let's check it out so here's the
sample page we are going to use with
background color set to green first
let's add the div to put our text on
I'm not using span because span is an
inline elements so some transform
properties won't work on it and next I'm
going to set the font size absolute
position and minus 50% translate to
center the text on the screen
then I'm going to add a little skewY
to create a 3d like effect using
bottom-left transform origin next we are
going to use the same technique with
previous tutorial by using multiple
layers of text shadow we will place each
layer diagonally to create depth to the
text
now we need to hide the original text as
it stand out from the text shadow we can
do this by setting color to transparent
I'm also going to add another set of
text shadows to create a glowing effect
I'll set the blur distance a little bit
more with 40% opacity now it looks a
little bit too bright so I'm going to
darken the color of some text shadow
layers to make it more realistic next
we're going to work on the shadow start
by creating pseudo-element
with the same text our use absolute
position with zero top left this will
make the text overlay the original one
and skew it by thirty degrees using
bottom-left transform origin now set the
z-index to minus one to put the shadow
under and then we use the text shadow
property again but this time with black
color and more blur distance
finally set the color to transparent
since we want to display only the text
shadow property not to text itself
and that's it let's see the result so
that's all for this tutorial
if you love this video don't forget to
like or subscribe if you are new to this
channel thanks for watching and see you
next time bye
