CSS3 Shadow

CSS3 supported to add shadow to text or elements. Shadow property has divided into two parts:

Text shadow

Box Shadow

Text shadow:

                The text-shadow property defines one or more comma-separated shadow effects, to be applied to the text content of the current element.

Example:

<html>

  <head>

      <style>

         h1 {

            text-shadow: 2px 2px;

         }

         h2 {

            text-shadow: 2px 2px red;

         }

         h3 {

            text-shadow: 2px 2px 5px red;

         }

         h4 {

            color: white;

            text-shadow: 2px 2px 4px #000000;

         }

         h5 {

            text-shadow: 0 0 3px #FF0000;

         }

         h6 {

            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

         }

         p {

            color: white;

            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

         }

      </style>

   </head>

   <body>

      <h1>AskAtul.com</h1>

      <h2>AskAtul.com</h2>

      <h3>AskAtul.com</h3>

      <h4>AskAtul.com</h4>

      <h5>AskAtul.com</h5>

      <h6>AskAtul.com</h6>

      <p>AskAtul.com</p>

   </body>

</html>

Box shadow:

              The CSS3 box-shadow property applies shadow to elements.

Example:

<html>

<head>

      <style>

         div {

            width: 300px;

            height: 100px;

            padding: 15px;

            background-color: red;

            box-shadow: 10px 10px;

         }

      </style>

   </head>

   <body>

      <div>This is a div element with a box-shadow</div>

   </body>

</html>

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *