write the html syntax to create 3d line in your web page
Answers
Answer:
Create a 3D Text Effect using HTML and CSS:
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>3D Text Effect</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
CSS Code:
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