Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

3D Text using CSS only

3d text using css only, css 3d text, 3d text animation, css text, css tutorial, css projects for beginners, webdesign, webdevelopment, frontend, front

 3D Text using CSS only



HTML


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <h1>DUCKY</h1>
    </div>
</body>

</html>


CSS

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');
body {
    display: flex;
    justify-content: center;
    font-family: 'Rubik', sans-serif;
}

.container {
    margin-top: 20vh;
    font-size: 10vh;
}

h1 {
    letter-spacing: 15px;
    text-shadow: 1px 1px 1px gray,
1px 1px 1px gray,
2px 2px 1px gray,
3px 3px 1px gray,
4px 4px 1px gray,
5px 5px 1px gray,
27px 17px 15px rgba(0, 0, 0, 0.5);
}



website : here

Post a Comment

NextGen Digital Welcome to WhatsApp chat
Howdy! How can we help you today?
Type here...