Cool CSS 3D Text Hover Effect Tutorial


hello and welcome to red stapler Channel
in this tutorial I’m going to show you the easiest pure CSS 3D text hover
effect that literally anyone can make it in couple minutes ready let’s check it
out so let’s start with adding radial gradient
into our background. When working on things like this it’s much easier to use online
generator tools like this one for the text I’m going to create a span
and assign class to it now the CSS first i will transform the
text to uppercase and increase the font size and set the text color if you also
want to change the font family here’s the place
and next I’m going to move the text to the center by setting 50% table and left
and minus 50% translate so the next step we are going to do is
to add two sets of layers of text shadow to
simulate a 3D effect. The first set of layers is going to simulate a depth of
the text I’m going to set the x-offset and blur radius to zero and set y-offset to
one pixel. For a color I’m going to edit it in RGB mode that’s because when we
add an extra layer we are going to increase the y-offset and decrease the
RGB value to make the color darker and the second set of layers is going to
be the shadow of the text so we are going to
use black color we’ll be doing it the same way as the first set except adding
the blur radius and using less layers this time and now we have the base 3d effect the
next step is to add a hover effect using CSS pseudo class we use the same text shadow as above and
add a few more layers to the first set and increase the shadow offset of the
second set also add a little translate and a
transition to make a text appears to be moving and finally set the cursor to pointer
for aesthetic purpose okay we are ready let’s see the result so that’s all for this tutorial. Any comments, feedbacks let me know and if you love this video don’t forget to like or
subscribe to stay with us for more updates 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 *