hello and welcome to red stapler channel in this tutorial we will show you how to
create a 3d text effect with RGB colour animation using pure CSS in just a few
minutes let's check it out so first let's start with creating a text div I
will also assign a class for it too
then we are going to find a suitable font for this tutorial I'm going to use
dock number 11 which has nice bold text style
after downloaded and placed the font in the web folder I'm going to import it
using font face rule
I will set the font size and family our spacing
also change the color to almost white
and here's the key step since we can't create an actual 3d text with CSS we are
going to apply multiple layers of text shadow to imitate the 3d effect instead
first I'm going to create bottom text body using three layers of white smoke
color but this technique it will look like the text is actually have depth
you can repeat it as many times as you like depend on how much step you need
for this tutorial I will do it three times don't forget to increase the
offset of each layer too
and next we will create the actual shadow first let's start with
long soft bottom shadow we will use two layers of high blur amount transparent black shadow
then we'll create a short bottom shadow to emphasize the 3d depth
then create left and right shadow using moderate blur amount
and finally add a white shining light to the text using very high blur amount of white shadow
at this point many of you might happy with a result already but for this
tutorial we will try to add RGB light cycle effects to the text first let's
create a pseudo element I will duplicate all the text properties from the orginal
then use absolute position and zero top left
now you will see that the text has jumped to the top left corner instead of
overlapping the original text this because we haven't set the position to
the parent yet for now let's add the light effect first
let's start with a blue color
then set position relative to the parent
next let's create the animation we will use keyframes property to cycle through
five colors by changing the text shadow you can use less color or add more if you like
and finally set the animation timing function and repeat it
and that's all for this tutorial hope you guys enjoy if you want to see more dev
tips and tutorials subscribe our channel to stay tuned for weekly update thanks
for watching see you next time bye