How to write a 3D text using HTML and CSS? Css 3d Text Effects
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 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.
LIVE SERVER:-
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.
See the Pen 3D Text Effect in CSS by Ryan (@ryandsouza13) on CodePen.
HTML:-
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:-
box-shadow property attaches one or more shadows to an element. 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 this 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.
