3D like text effect in CSS Part 8

Published: 20 January 2022
on channel: Masters In Web Design

How to make 3D like text using CSS3

/*CSS*/
*,*::before,*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
background: radial-gradient(#D9D9D9, #FFF);
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
body h1{
font-size: 16rem;
color: #FFF;
font-weight: 900;
text-transform: uppercase;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 1px #aaac,
0 6px 1px rgba(0, 0, 0, 0.12),
0 5px 3px rgba(0, 0, 0, 0.1),
0 10px 10px rgba(0, 0, 0, 0.12),
0 15px 15px rgba(0, 0, 0, 0.13),
0 20px 20px rgba(0, 0, 0, 0.14),
0 25px 25px rgba(0, 0, 0, 0.12);
}

Watch video 3D like text effect in CSS Part 8 online, duration hours minute second in high quality that is uploaded to the channel Masters In Web Design 20 January 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 15 times and liked it 1 visitors.

373