Welcome to today’s tutorial. Today we are going to create 3D text using HTML and CSS. For this, we are going to use HTML, CSS .
You need basic knowledge of CSS for this project. This tutorial is well suited forCSS Beginners. Let us get started with the project.
I am sure that you have seen many 3D scene movies in or in books, also in drawings, 3D Text effects are most common for us and it is very pleasing to us, so we are here today, going to make a 3D effect in text using only by HTML and CSS.
Before moving forward to the code first of all we will see the live sever of the code so you can see how it is working on clicking the button.
HTML Code:-
HTML is the layout of the website.We have inserted a span that is a inline tag and given a class text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span class="text">3D</span>
</body>
</html>
CSS Code:-
The box-shadow property attaches one or more shadows to an element.
box-shadow: h-offset v-offset blur spread color
body {
background-color: #c4c4c4;
}
.text {
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%,-50%);
text-transform: uppercase;
font-family: verdana;
font-size: 12em;
font-weight: 700;
color: #f5f5f5;
text-shadow: 1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
1px 4px 1px #919191,
1px 5px 1px #919191,
1px 6px 1px #919191,
1px 7px 1px #919191,
1px 8px 1px #919191,
1px 9px 1px #919191,
1px 10px 1px #919191,
1px 18px 6px rgba(16,16,16,0.4),
1px 22px 10px rgba(16,16,16,0.2),
1px 25px 35px rgba(16,16,16,0.2),
1px 30px 60px rgba(16,16,16,0.4);
}
I hope you have loved 3D Text Effect blog and learned many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us the motivation to create more blogs.
If you faced any difficulty feel free to comment on your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.
Written by Himanshu Singh.
Top comments (1)
This is such an insightful post! I really appreciate how you broke down the topic in a way that's easy to understand. Looking forward to implementing some of these tips in my daily routine!
International schools in Bangalore