The 3D text effect is one of the most used text effects in the web design world. As a designer or front-end developer one should know how to create a 3D text effect. Today we will be looking at one of the simplest and easy methods to create our text in a 3D look.
Approach: The 3D text animation effect is designed by text-shadow property. The reason to apply multiple text-shadow is to give a 3D look as if we apply only single (or unitary) text-shadow it will be the same for all the alphabets present in the word. But for the 3D effect, we want a different thickness of shadow for each alphabet and at each angle(basically X and Y coordinates and radius of blur). Now let’s look at the implementation of the above approach.
HTML Code: In this section, we have used a <h1> tag with the word to which we want to apply the 3D effect.
- Step 1: The first thing that we have done is to align the <h1> element to center and provide the body bcakground.
- Step 2: Now, apply a transition to h1 element. Duration can be adjusted according to your need.
- Step 3: Now apply text shadow on h1 element. The concept of applying multiple text-shadow has already been explained in the approach at the starting of the article.
Tip: We have to choose to apply an effect to be visible only on mouse hover but if you want the effect to be visible all the time then remove the hover selector.
Complete Code: Tn this section, we will be combining the above two sections to create a 3D text animation effect on mouse hover.
- How to Create Liquid Filing Effect on Text using HTML and CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- How to create text-reveal effect using HTML and CSS ?
- How to Create Engraved Text Effect using HTML and CSS ?
- How to Create Text Reveal Effect for Buttons using HTML and CSS ?
- Create a Gradient Text Effect using HTML and CSS
- How to create multilayered text effect using HTML and CSS?
- How to Create Embossed Text Effect using CSS ?
- How To Create Carved Text Effect using CSS?
- How to Create Jumping Text 3D Animation Effect using CSS ?
- How to Create Text Changing Animation Effect using CSS ?
- How to create long shadow of text without using text-shadow in HTML and CSS ?
- How to create Glowing Star effect using HTML and CSS?
- How to create shock wave or explosion effect using HTML and CSS ?
- How to create Skewed Background with hover effect using HTML and CSS?
- How to create paper corner fold effect on hover by using HTML and CSS?
- How to Create an Effect to Change Button Color using HTML and CSS ?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to create followspot effect using HTML CSS and jQuery ?
- How to Create Floating Box Effect using HTML and CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.