CSS 3D Text Effect in 3 Minutes!

CSS 3D Text Effect in 3 Minutes!

In this video, I’m going to show you how to create a simple CSS 3D Text effect that can be done in couple minutes using only CSS transform and text-shadow. Let’s check it out!

In this We, I’m going to show you how to create a simple CSS 3D Text effect that can be done in couple minutes using only CSS transform and text-shadow. Let’s check it out!

🔔 Subscribe: https://www.youtube.com/channel/UCRthRrv06q1iOl86-tTKJhg

Source Code

HTML

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div class="text-3d">Hello</div>
    </body>
</html>

CSS


html,body {
    width: 100vw;
    height: 100vh;
    margin: 0;
}
body {
    font-family: sans-serif;
    color: #fff;
    background: #1edad0;
}
.text-3d {
    font-size: 8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skewY(-6deg);
    transform-origin: bottom left;
    color: transparent;
    text-shadow: 
     1px -1px 10px rgba(255, 255, 255, 0.4), 
     0px -1px 10px rgba(255, 255, 255, 0.4),  
    -1px -1px 10px rgba(255, 255, 255, 0.4), 
     0px -2px 3px #fff, 
    -1px -2px 3px #fff, 
    -2px -2px 3px #fff,
    -1px -3px 2px #ddd, 
    -2px -3px 2px #ddd, 
    -3px -3px 2px #ddd,
    -2px -4px 2px #fff, 
    -3px -4px 2px #fff, 
    -4px -4px 2px #fff,
    -3px -5px 1px #fff, 
    -4px -5px 1px #fff, 
    -5px -5px 1px #fff;
}
.text-3d:before {
    content: "Hello";
    position: absolute;
    left: 0;
    top: 0;
    transform: skewX(30deg);
    transform-origin: bottom left;
    z-index: -1;
    color: transparent;
    text-shadow:  
    15px 0px 20px rgba(0, 0, 0, 0.25), 
    15px 0px 25px rgba(0, 0, 0, 0.2),
    15px 0px 35px rgba(0, 0, 0, 0.15), 
    15px 0px 45px rgba(0, 0, 0, 0.1);
}

css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles

CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size.