Create a 3D text effect using HTML and CSS
A3D text effect is a beautiful and attractive part of a webpage. As a web page developer, it is crucial to know how to create a 3D text effect with the help of HTML and CSS. The full form of HTML is HyperText Markup Language. The full form of CSS is Cascading Style Sheet. To create 3D text effect is one of the attractive, easy and simple methods.
Approach
This effect is designed by the text-shadow development. The main thing behind this article is to give the web page 3D look.
HTML code-
In this portion, we give <h1> tag to the word we will provide 3D design.
<!DOCTYPE html>
<html lang="en">
<body>
<h1>javaTpoint</h1>
</body>
</html>
CSS code-
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--color-primary: #f6aca2;
--color-secondary: #f49b90;
--color-tertiary: #f28b7d;
--color-quaternary: #f07a6a;
--color-quinary: #ee6352;
/*
--color-primary: #5192ED;
--color-secondary: #69A1F0;
--color-tertiary: #7EAEF2;
--color-quaternary: #90BAF5;
--color-quinary: #A2C4F5;
*/
}
body {
min-height: 100vh;
font-family: canada-type-gibson, sans-serif;
font-weight: 300;
font-size: 1.25rem;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
background-color: #eff8e2;
}
.content {
display: flex;
align-content: center;
justify-content: center;
}
.text_shadows {
text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary),
9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
font-family: bungee, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: calc(2rem + 5vw);
text-align: center;
margin: 0;
color: var(--color-primary);
//color: transparent;
//background-color: white;
//background-clip: text;
animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
letter-spacing: 0.4rem;
}
@keyframes shadows {
0% {
text-shadow: none;
}
10% {
text-shadow: 3px 3px 0 var(--color-secondary);
}
20% {
text-shadow: 3px 3px 0 var(--color-secondary),
6px 6px 0 var(--color-tertiary);
}
30% {
text-shadow: 3px 3px 0 var(--color-secondary),
6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
}
40% {
text-shadow: 3px 3px 0 var(--color-secondary),
6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
12px 12px 0 var(--color-quinary);
}
50% {
text-shadow: 3px 3px 0 var(--color-secondary),
6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
12px 12px 0 var(--color-quinary);
}
60% {
text-shadow: 3px 3px 0 var(--color-secondary),
6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
12px 12px 0 var(--color-quinary);
}
70% {
text-shadow: 3px 3px 0 var(--color-secondary),
6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
}
80% {
text-shadow: 3px 3px 0 var(--color-secondary),
6px 6px 0 var(--color-tertiary);
}
90% {
text-shadow: 3px 3px 0 var(--color-secondary);
}
100% {
text-shadow: none;
}
}
@keyframes move {
0% {
transform: translate(0px, 0px);
}
40% {
transform: translate(-12px, -12px);
}
50% {
transform: translate(-12px, -12px);
}
60% {
transform: translate(-12px, -12px);
}
100% {
transform: translate(0px, 0px);
}
}
Output:
Example 2-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
body {
background-color: #444;
font-family: sans-serif;
}
div {
width: 800px;
height: 100px;
margin: 200px auto;
perspective: 1000px;
perspective-origin: 50% -200px;
}
h1 {
text-align: center;
text-transform: uppercase;
font-size: 4em;
letter-spacing: 0.1em;
color: #EEE;
animation: rotate 2s ease-in-out alternate infinite;
}
h1:before {
content: attr(data-shadow);
color: transparent;
text-shadow: 0 0 15px #111;
position: absolute;
z-index: -1;
margin: -0.1em 0 0 0;
animation: skew 2s ease-in-out alternate infinite;
transform-origin: bottom;
}
@keyframes rotate {
from {
transform: rotateY(-10deg);
text-shadow: 1px -1px #CCC,
2px -1px #BBB,
3px -2px #AAA,
4px -2px #999,
5px -3px #888,
6px -3px #777;
}
to {
transform: rotateY(10deg);
text-shadow: -1px -1px #CCC,
-2px -1px #BBB,
-3px -2px #AAA,
-4px -2px #999,
-5px -3px #888,
-6px -3px #777;
}
}
@keyframes skew {
from {
transform: scaleY(0.3) skewX(-15deg);
}
to {
transform: scaleY(0.3) skewX(-20deg);
}
}
</style>
</head>
<body>
<div>
<h1 data-shadow="3D Text Effect">
3D Text Effect
</h1>
</div>
</body>
</html>
Output:
