CSS 3D Text Effect in 3 Minutes!


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

7 Comments

Add a Comment

Your email address will not be published. Required fields are marked *