Shadow Effects in Web Design with HTML and CSS

Rayen
shadows
shadows

Shadows are a powerful tool in web design, providing depth and visual interest to elements. In this tutorial, we'll delve into creating captivating shadow effects using HTML and CSS. Enhance your web design skills and learn how to make your website elements stand out with stunning shadow effects.




Step 1: HTML Markup:

Start 
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="shadow1">
            <span>s</span>
            <span>h</span>
            <span>a</span>
            <span>d</span>
            <span>o</span>
            <span>w</span>
            <span>s</span>
        </div>
        <div class="shadow2">
            <span>s</span>
            <span>h</span>
            <span>a</span>
            <span>d</span>
            <span>o</span>
            <span>w</span>
            <span>s</span>
        </div>
    </div>
</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) 
/*-------------------- CSS --------------------*/
body{
    margin: 0;
}
.container{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: sans-serif;
}
.shadow1 span{
    position: relative;
    text-transform: uppercase;
    color: white;
    letter-spacing: -.12em;
    font-weight: 800;
    font-size: 150px;

    animation: amine 0.5s linear forwards;
}
.shadow1 span:nth-child(1){
    animation-delay: 0.1s;
}
.shadow1 span:nth-child(2){
    animation-delay: 0.2s;
}
.shadow1 span:nth-child(3){
    animation-delay: 0.3s;
}
.shadow1 span:nth-child(4){
    animation-delay: 0.4s;
}
.shadow1 span:nth-child(5){
    animation-delay: 0.5s;
}
.shadow1 span:nth-child(6){
    animation-delay: 0.6s;
}
.shadow1 span:nth-child(7){
    animation-delay: 0.7s;
}
@keyframes amine {
    0%{
        text-shadow: 0 0 0 #d1d1d1;
    }
    100%{
        text-shadow: -20px 10px 20px #d1d1d1;
    }
}

.shadow2 span{
position: relative;
text-transform: uppercase;
text-shadow: 0 0 0 #d1d1d1;
letter-spacing: -.12rem;
font-weight: 800;
font-size: 150px;
color: white;
transition: 3s ease-out;
}
.shadow2 span:hover{
    text-shadow: -20px 10px 20px #d1d1d1;
    transition: 0.5s;
}

0 Comments