Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create 3D Text Effect Using HTML and CSS
In the field of web design, the 3D text effect is one of the most popular text effects. One should be able to build a 3D text effect as a designer or front-end developer. Today, we'll examine one of the simplest and most straightforward techniques for rendering text in 3d look.
The text-shadow attribute is what gave the 3D text movement effect its design. The purpose of applying several text-shadows is to give the word a 3D appearance since if we simply applied a single (or unitary) text-shadow, it would be the same for all of the alphabets in the word. However, in order to create a 3D effect, we need a different shadow thickness for each letter and angle (essentially, X and Y coordinates and blur radius).
Let's dive into the article for getting better understanding on creating a 3D text effect using HTML and CSS.
Using text-shadow property
As its name suggests, this CSS attribute gives the text shadows. It accepts the list of shadows that were applied to the text, separated by commas. Its default setting is none. It applies one or more text-shadow effects to the element's text content.
Syntax
Following is the syntax for CSS text-shadow property.
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Now, let's look into the following examples for getting more idea on creating a 3D text effect using HTML and CSS.
Example
Let's look into the following, where we are going to make simple 3D effect to the text.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #D1F2EB;
}
h1 {
margin: 250px auto;
text-align: center;
color: #17202A;
font-size: 60px;
transition: 1.0s;
font-family: verdana;
}
h1:hover {
text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A,
0 7px 0 #17202A, 0 8px 0 #17202A,
0 11px 0 #17202A, 0 12px 0 #17202A;
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
</body>
</html>
On running the above code, the output window will pop up, displaying the text at the center of the webpage with an applied background. When the user tries to move the cursor over the text, it gets the hover effect and displays 3D text.
Example
Consider the following example, where we are going to make the 3D marquee effect on the webpage.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
display: flex;
}
.tutorial .inner {
width: 300px;
height: 220px;
line-height: 240px;
font-size: 100px;
font-family: verdana;
white-space: nowrap;
overflow: hidden;
}
.tutorial .inner:first-child {
background-color: #ABEBC6;
color: #6C3483;
transform-origin: right;
transform: perspective(110px) rotateY(-16deg);
}
.tutorial .inner:last-child {
background-color: #D7DBDD;
color: #1E8449;
transform-origin: left;
transform: perspective(50px) rotateY(16deg);
}
.tutorial .inner span {
position: absolute;
animation: marquee 5s linear infinite;
}
.tutorial .inner:first-child span {
animation-delay: 1.5s;
left: -100%;
}
@keyframes marquee {
from {
left: 100%;
}
to {
left: -100%;
}
}
</style>
</head>
<body>
<div class="tutorial">
<div class="inner">
<span>T P</span>
</div>
<div class="inner">
<span>Tutorials</span>
</div>
</div>
</body>
</html>
When the code gets executed, it will generate an output consisting of a 3D marque effect displayed on the webpage.
Example
In the following we are going to make the glowing 3D effect on the webpage.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
animation: glow 10s ease-in-out infinite;
}
figure {
animation: wobble 5s ease-in-out infinite;
transform-origin: center center;
transform-style: preserve-3d;
}
@keyframes wobble {
0%,
100% {
transform: rotate3d(2, 2, 0, 45deg);
}
25% {
transform: rotate3d(-3, 3, 0, 50deg);
}
50% {
transform: rotate3d(-2, -4, 0, 42deg);
}
}
h1 {
width: 100%;
padding: 42px;
font: 100px 'Concert One', verdana;
text-transform: uppercase;
position: absolute;
color: #1E8449;
}
@keyframes glow {
0%,
100% {
text-shadow: 0 0 40px #7D3C98;
}
25% {
text-shadow: 0 0 45px #DFFF00;
}
50% {
text-shadow: 0 0 50px #DE3163;
}
75% {
text-shadow: 0 0 55px #40E0D0;
}
}
</style>
</head>
<body>
<figure>
<h1>WELCOME</h1>
</figure>
</body>
</html>
On running the above program, the output window will pop up, displaying the 3D text on the webpage with a glowing effect for the text.
2K+ Views
