3D Text Effect Using CSS3
CSS3 can be used to create 3D effects for heading and decorations. Here is the basic setup. To give the 3D effect we will use simple text-shadow property. CSS3 'text-shadow' property supported by all modern browsers as well.
text-shadow: h-shadow v-shadow blur-radius color; or <X> <Y> <Blur size> <Color>
h = horizontal shadow
v = vertical shadow
blur radius
color
ie; text-shadow:1px 2px 4px red
CSS
body {
background: #000;
width: 600px;
margin: auto;
}
.three-d {
color: #fff;
letter-spacing: 2px;
font-family: Oswald;
font-size: 8em;
text-shadow: 1px 1px #16acff, 6px 6px #16acff;
3px 3px #16acff, 4px 4px #16acff, 2px 2px #16acff, 5px 5px #16acff,
}
HTML
<p class='three-d'>CodeRomeos</p>
Latest
SOLID Principles: A Comprehensive Guide with Examples
Dec 22, 2024
React useEffect, useMemo, and useCallback: A Comprehensive Guide
Nov 23, 2024
React Component Structure, Composition, HOCs and Optimization with Examples
Oct 4, 2023
How to copy text to the clipboard in React.js
Sep 29, 2023
News
Pure html popover API is coming in Chromium 114
Sep 24, 2023
GitHub and OpenAI launch Copilot - an AI pair programmer
Jul 1, 2021
CSS aspect-ratio property
Jan 31, 2021
AWS UI - a collection of React components
Jan 20, 2021
Featured
SOLID Principles: A Comprehensive Guide with Examples
Dec 22, 2024
React useEffect, useMemo, and useCallback: A Comprehensive Guide
Nov 23, 2024
Axios Interceptors in a React application
May 27, 2023
Mastering Laravel: Exploring the Power of implode() and explode() Functions for String Manipulation
May 22, 2023