Friday, 27 July 2012

CSS - Adding Glow or Shadow

Hi everyone!!

    Today we'll learn very simple method of adding glow or shadow to the edges of your content...the class mod-content should be applied to the div, table, buttons etc....

It will look as follows:




Here is the code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Glow or shadow</title>
  

 <style type="text/css">
 .mod {
   position:relative;
   z-index:0;
}
.mod .mod-content{
   background:pink;
   border:1px solid #eaeaea;
   position:relative;
   z-index:2;
}
/* x1 = top and left edges; 
   x1a = top right corner; 
   x2 = right and bottom edges; 
   x2a = bottom left corner */
.mod .x1,
.mod .x1a,
.mod .x2,
.mod .x2a {
   display:block;
   background:url(glow.png) no-repeat;
   /* turn off for IE6 or use a GIF */
   _background:transparent; 
   width:100%;
   height:100%;
   position:absolute;
}
.mod .x1{
   background-position:0 0;
   z-index:-2;
   top:-10px; /* set to the size of the glow */
   left:-10px;
   bottom:0;
   /* set glow to the edges of 'mod' */
   padding:0 10px 10px 0; 
}
.mod .x1 .x1a {
   height:10px;
   width:10px;
   background-position:100% 0;
   right:-10px;
   top:0;
}
.mod .x2 {
   background-position:100% 100%;
   z-index:-1;
   bottom:-10px;
   right:-10px;
   padding:10px 0 0 10px;
}
.mod .x2 .x2a {
   height:10px;
   width:10px;
   background-position:0 100%;
   left:-10px;
   bottom:0;
}
</style>
 </head>


 <body >
 <div id="glow" class="mod">
<span class="x1"><span class="x1a"></span></span><span class="x2"><span class="x2a"></span></span>
   <div class="mod-content">
 <div class="hd">
    <center><h4>Head</h4></center>
 </div>
 <div class="bd">
 <center> <p>Body</p><center>
 </div>
 <div class="ft">
     <div class="ft-content">
</div>
 </div>
</div>
</div>
  
 </body>
</html>


The above code uses image "glow.png". Save the following image by right clicking and then save image as glow.png. Place the image in the same folder as your page or change the path in the css class ".mod .x2a ".


             You may place any content inside the content with class mod-content in the body.  I hope this post was helpful. Keep tuned for other posts to come!!

No comments:

Post a Comment