Post
Ask Question

Box Shadow Property in HTML5

Introduction

 
In today's article, you will learn about Box-Shadow. The Box-Shadow property allows designers to implement multiple drop shadows on a box element (<div>,<li> etc), specifying the color of a value, blur, offset and size.
 

Box-Shadow

 
Y-axis X-axis blur spread color inset There are two types of shadows, they are:
  1. Outer shadow
  2. Inset shadow
Clip1.jpg
 
The Box-Shadow property by default supports an outer shadow and background color. Browser Support 
 
Here's a basic example of a div:
  1. <!DOCTYPE html>  
  2. <head>  
  3.    <title></title>  
  4.    <style>  
  5.       #main {  
  6.       height: 800px;  
  7.       width: 100%;  
  8.       }   
  9.       #shadow {  
  10.       margin: 0 auto;  
  11.       height: 300px;  
  12.       width: 400px;  
  13.       background: #432567;  
  14.       box-shadow: 7px 9px 37px 11px;  
  15.       }  
  16.    </style>  
  17. </head>  
  18. <body>  
  19.    <div id="main">  
  20.       <div id="shadow"></div>  
  21.    </div>  
  22. </body>  
  23. </html> 
Clipboard01.jpg
  1. <style>  
  2.    #main {  
  3.    height: 800px;  
  4.    width: 100%;  
  5.    }  
  6.    #shadow {  
  7.    margin: 0 auto;  
  8.    height: 300px;  
  9.    width: 400px;            
  10.    box-shadow: 1px 1px 77px 15px #345 inset;  
  11.    }  
  12. </style> 
Clipboard03.jpg
 
 
Here's a basic example of <ul> and <li>:
  1. <head>  
  2.     <style>  
  3.         #main {  
  4.           height: 800px;  
  5.           width: 100%;  
  6.         }  
  7.          #shadow {  
  8.             margin: 0 auto;  
  9.             height: 300px;  
  10.             width: 1024px;                      
  11.         }  
  12.         ul {list-style:none;   
  13.         }  
  14.             ul li {float:left;  
  15.                    width:100px;  
  16.                    text-align:center;  
  17.                    padding:23px;  
  18.                    font-weight:bold;  
  19.                    font-family:Arial;  
  20.                    font-size:20px;  
  21.                    margin:21px;  
  22.                    box-shadow:-11px -3px 29px 4px;  
  23.                    border-radius:30px;  
  24.             }  
  25.   
  26.     </style>  
  27. </head>  
  28. <body>  
  29.     <div id="main">  
  30.         <div id="shadow">  
  31.             <ul>  
  32.                 <li>Home </li>  
  33.                 <li>AboutUs</li>  
  34.                 <li> Contact</li>  
  35.                 <li> placement</li>  
  36.             </ul>  
  37.         </div>  
  38.     </div>  
  39. </body>  
  40. </html> 
Clipboard04.jpg
 
If you will change only:
 
box-shadow:-11px -3px 29px 4px inset;//You can give any color This type:
 
image5 
 
Here's a basic example of Input types showing a button and three text boxes:
  1. <style>  
  2.         #main {  
  3.             height: 800px;  
  4.             width: 100%;  
  5.         }  
  6.         #shadow {  
  7.             margin: 0 auto;  
  8.             height: 300px;  
  9.             width: 1024px;            
  10.         }  
  11.         label {width:120px;  
  12.                float:left;  
  13.                font-weight:bold;  
  14.                font-family:Arial;  
  15.                font-size:18px;  
  16.                margin:20px;  
  17.         }  
  18.         input.button {  
  19.              box-shadow:-11px -3px 29px 4px ;  
  20.              height:60px; width:120px;  
  21.              border:none;  
  22.              border-radius:10px;  
  23.              margin-left:170px;  
  24.         }  
  25.         input.text {height:30px;  
  26.                     width:300px;  
  27.                     box-shadow:-11px -3px 29px 4px;  
  28.                     font-weight:bold;  
  29.                     font-family:Arial;  
  30.                     font-size:18px;  
  31.                     border-radius:10px;  
  32.                     margin:20px;  
  33.                     background:#808080;        
  34.                  }  
  35.     </style>  
  36. </head>  
  37. <body>  
  38.     <div id="main">  
  39.         <div id="shadow">  
  40.    <label> First Name :</label><input type="text" class="text" value="Enter first name" /><br />  
  41.    <label> Last Name :</label><input type="text" class="text" value="Enter last name" /><br />  
  42.      <label> Addres :</label><input type="text" class="text" value="Enter your addres" /><br /><br />  
  43.              <input type="button" class="button" value=" Button" />  
  44.              
  45.         </div>  
  46.     </div>  
  47. </body>  
  48. </html> 
Clipboard06.jpg
 
Clipboard06.jpg
 
If you change the style in Box-shadow like:
  1. box-shadow:-11px -3px 29px 4px inset;  
  2. background:none;  
Then you will find this type:
 
Clipboard07.jpg
 



TRENDING UP

View All

Learn Internet of Things in 21 Days