CSS Text Shadow

How to create text shadow?

CSS Shadow: Text shadow, box shadow

What is CSS shadow effects?

 Shadow means a duplicate of the element but it only shows a shadow not complete element.  shadow be always dark color form the element. here is the CSS shadow it’s kind of two type. text- shadow , box-shadow

What is the CSS text-shadow?

CSS text shadow has four properties: Horizontal, vertical, blur & color.

Shorthand property of the CSS text shadow: Horizontal, vertical, blur & color.

Text–shadow value also allow negative value.

Exampale: Text-shadow  : 5px 2px 10px red.

The default value of the text-shadow: none;

We can use multiple text-shadow as given example:

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }
        .anything1 p {
            color: #fff;
            text-shadow: 5px 0px 1px #000;
            font-size: 50px;
            margin-bottom: 30px;
        }
        .anything2 p {
            color: #fff;
            text-shadow: 1px -5px 10px #000;
            font-size: 50px;
            margin-bottom: 30px;
        }
        .anything3 p {
            color: #fff;
            text-shadow: 1px 1px 1px #000, -10px 0 10px #0bf, 0 0 10px #b06;
            font-size: 50px;
            margin-bottom: 30px;
        }
        .anything4 p {
            color: #fff;
            text-shadow: 1px 1px 1px #000, -10px 0 10px #0bf, 0 0 10px #b06;
            text-shadow: -1px 0 0 #0bf, 0 1px 0 #0bf, 1px 0 0 #0bf, 0 -1px 0 #0bf;
            font-size: 50px;
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <div class="anything1">
        <p>Text Shadow</p>
    </div>
    <div class="anything2">
        <p>Text Shadow</p>
    </div>
    <div class="anything3">
        <p>Text Shadow</p>
    </div>
    <div class="anything4">
        <p>Text Shadow</p>
    </div>

</body>
</html>
For more modification visit URL:https://embed.plnkr.co/FwfR3ReXYSbQmj6Wyowq/

No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.