Box shadow (CSS tuto)



Box shadow (CSS tuto)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box shadow</title>
</head>
<body>
    <h2>Box shadow</h2>
    <h2>box-shadow: (horizontal)px (vertical)px (blur)px color inset;</h2>
    <div class="container">
        <div>
            <h3>Horizontal shadow</h3>
            <div class="horizontal"></div>
        </div>
        <div>
            <h3>Vertical shadow</h3>
            <div class="vertical"></div>
        </div>
        <div>
            <h3>Bottom right shadow</h3>
            <div class="bottom-right"></div>
        </div>
        <div>
            <h3>Bottom left shadow</h3>
            <div class="bottom-left"></div>
        </div>
        <div>
            <h3>top left shadow</h3>
            <div class="top-left"></div>
        </div>
        <div>
            <h3>top right shadow</h3>
            <div class="top-right"></div>
        </div>
        <div>
            <h3>Colorful shadow</h3>
            <div class="colorful"></div>
        </div>
        <div>
            <h3>Blur shadow</h3>
            <div class="blur"></div>
        </div>
        <div>
            <h3>Multiple shadow</h3>
            <div class="multiple"></div>
        </div>
        <div>
            <h3>Opposite shadow</h3>
            <div class="opposite"></div>
        </div>
        <div>
            <h3>Inset shadow</h3>
            <div class="inset"></div>
        </div>
        <div>
            <h3>Neumorphism shadow</h3>
            <div class="neumorphism"></div>
        </div>
    </div>
</body>
</html>                    
                  
                



 body {
      margin: 0;
      padding: 0;
}

        h2 {
            text-align: center;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            margin: 50px;
        }

        .container div {
            width: 200px;
        }

        .container div div {
            width: 120px;
            height: 150px;
            margin: 10px;
            background-color: steelblue;
        }

        .horizontal {
            box-shadow: 10px 0;
        }

        .vertical {
            box-shadow: 0 10px;
        }

        .bottom-right {
            box-shadow: 8px 8px;
        }

        .bottom-left {
            box-shadow: -8px 8px;
        }

        .top-left {
            box-shadow: -8px -12px;
        }

        .top-right {
            box-shadow: 12px -12px;
        }

        .colorful {
            box-shadow: 10px 10px rebeccapurple;
        }

        .blur {
            box-shadow: 10px 10px 10px rebeccapurple;
        }    

        .multiple {
            box-shadow: 5px 5px 5px red, 15px 15px 5px greenyellow, 25px 25px 5px rosybrown;
        } 

        .opposite {
            box-shadow: 10px 10px 5px rebeccapurple, -10px -10px 5px rebeccapurple;
        }    

        .inset {
            box-shadow: 20px 20px 5px rgb(50, 94, 129) inset;
        }

        .neumorphism {
            box-shadow: 15px 15px 5px rgb(50, 94, 129) inset, -15px -15px 5px rgb(50, 94, 129) inset;
        }