Ads Top

CSS Box Shadow Examples

How to create box shadow with pure CSS?

What is the box-shadow CSS effect?
Box-shadow we use in any element and box will be shown with a shadow.
CSS box-shadow  have six properties: Horizontal, vertical, blur, spread, color & inset
Shorthand  property of the CSS Box-shadow: Horizontal, vertical, blur, spread, color & inset
 Box-shadow: Horizontal, vertical, blur & color.
Box-shadow value also allows negative value.
Exampale:  Box-shadow  : 5px 2px 10px red
What is the default value of the box shadow: none;
also similar as text-shadow.

Example of the Box shadow:

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }
        .anything1 {
            max-width: 500px;
            padding: 10px;
            margin: 20px auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 5px 5px;
        }
        .anything2 {
            max-width: 500px;
            padding: 10px;
            margin: 30px auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 5px 5px 10px #0bf;
        }
        .anything3 {
            max-width: 500px;
            padding: 10px;
            margin: 40px auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 2px 10px 0px 10px #0bf;
        }
        .anything4 {
            max-width: 500px;
            padding: 10px;
            margin: 40px auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 1px 1px 10px 0px #ccc inset;
        }
        .anything5 {
            max-width: 500px;
            padding: 10px;
            margin: 20px auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 2px 5px 10px 2px #0bf, -2px -5px 10px 2px #0b6;
        }
    </style>
</head>

<body>
    <div class="anything1">
        <p>CSS Box Shadow</p>
    </div>
    <div class="anything2">
        <p>CSS Box Shadow</p>
    </div>
    <div class="anything3">
        <p>CSS Box Shadow</p>
    </div>
    <div class="anything4">
        <p>CSS Box Shadow</p>
    </div>
    <div class="anything5">
        CSS Box Shadow
    </div>

</body>
</html>


No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.