Post
Ask Question

Shadow in Html5 with Css3

Shadow in Html5 with Css3 

 
Here in this code, I use CSS code with Html. In HTML I only write text (hello friends) and take a box.
 
By Css I defined the initial size of the box is 200px and the color of the box is green. In-text I use H1(heading 1).
 
By Css I choose the background color of the body is light yellow (#CF9) and align of text is center.
 
for a rounded box I use box-radius.
 
for box-shadow I use "text-shadow: h-shadow v-shadow blur spread the color."
 
for text-shadow I use "text-shadow: h-shadow v-shadow blur color".
 
CODE
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.         <style>  
  7.         body  
  8.         {  
  9.             background-color: #CF9;  
  10.         }  
  11.         h1  
  12.         {  
  13.             text-align: center;  
  14.             font-family: Algerian;  
  15.             font-size: 100px;  
  16.             color: #90F;  
  17.             text-shadow: 10px 10px 8px #666;  
  18.         }  
  19.         .box  
  20.         {  
  21.             width: 200px;  
  22.             height: 200px;  
  23.             border-radius: 40px;  
  24.             background-color: #0C6;  
  25.             margin-left: 40%;  
  26.             margin-top: 10%;  
  27.             box-shadow: 5px 10px 15px 5px #666666;  
  28.         }  
  29.     </style>  
  30.         <title>Untitled Document</title>  
  31.     </head>  
  32.     <body>  
  33.         <h1>  
  34.         HELLO FRIENDS</h1>  
  35.         <div class="box"></div>  
  36.     </body>  
  37. </html>  
Next Recommended Reading Pure HTML5 and CSS3 Stylish Accordion - No jQuery and Js Required