How to make a glossy box using CSS only

Hello everyone, today we are going to learn a neat little css trick to make glossy boxes using only css. The demo can be seen below.

Demo Source Code

Making the box

Here’s the markup for the box.

  1. <body>
  2. <div id="wrapper">
  3.   <div class="box-container bg-black">
  4.     <div class="boxgloss"></div>
  5.     <div class="boxcontents brd-black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae  est at erat dictum eleifend. In ultrices semper cursus. Proin vel nunc  diam. Integer imperdiet, urna a pharetra pellentesque, metus ipsum  fringilla enim, vel blandit sapien dui vel nulla. Sed sem ipsum,  feugiat eu pellentesque sed, placerat non est. Maecenas mollis interdum  convallis. In nec lectus ac est aliquam mollis. Cras ullamcorper  ultricies lacinia. Pellentesque sit amet volutpat ligula. Fusce  consequat tempus porttitor. Maecenas mi risus, egestas sed dapibus et,  egestas fringilla magna. </div>
  6.     <div class="clear"></div>
  7.   </div>
  8. </div>
  9. </body>

Gloss Box Basic Markup

We have created our box div which has the class “box-container“. Inside that we have created two child div’s one is with class “boxgloss“, which will add the gloss effect and other is with class “boxcontents” which will contain the contents of the box.

Styling the box

The CSS is the heart of this tutorial. Below are the CSS styles we will use to achieve the effect.

  1.  body{
  2.   margin:0;
  3.   padding:0;
  4.   font-family:Arial, Helvetica, sans-serif;
  5.   font-size:100%;
  6.  }
  7.  #wrapper{
  8.   width:850px;
  9.   margin:0 auto;
  10.  }
  11.  .box-container{
  12.   position:relative;
  13.   width:600px;
  14.   margin:20px auto 10px auto;
  15.   _margin-top:10px;
  16.   overflow:hidden;
  17.   -moz-border-radius:15px;
  18.   -webkit-border-radius:15px;
  19.  }
  20.  .boxgloss{
  21.   background:#FFF;
  22.   position:absolute;
  23.   width:596px;
  24.   height:50%;
  25.   _height:130px;
  26.   top:2px;
  27.   left:2px;
  28.   opacity:.2;
  29.   filter: alpha(opacity=20);
  30.   -moz-border-radius:12px;
  31.   -webkit-border-radius:12px;
  32.  }
  33.  .boxcontents{
  34.   background:#FFF;
  35.   margin:20px;
  36.   padding:20px;
  37.  }
  38.  .clear{
  39.   display:block;
  40.   clear:both;
  41.   height:0;
  42.   line-height:0;
  43.  }
  44.  .bg-black{
  45.   background:#000;
  46.  }
  47.  .bg-red{
  48.   background:#A00;
  49.  }
  50.  .bg-green{
  51.   background:#060;
  52.  }
  53.  .bg-blue{
  54.   background:#009;
  55.  }
  56.  .brd-black{
  57.   border:solid 2px #000;
  58.  }
  59.  .brd-red{
  60.   border:solid 2px #A00;
  61.  }
  62.  .brd-green{
  63.   border:solid 2px #060;
  64.  }
  65.  .brd-blue{
  66.   border:solid 2px #009;
  67.  }
  68.  .left{
  69.   float:left;
  70.   padding-right:10px;
  71.  }
  72.  .right{
  73.   float:right;
  74.   padding-left:10px;
  75.  }
  76.   .center{
  77.    text-align:center;
  78.   }

Explanation of classes:

.box-container: This is the basic container of the box. It controls the width of the box.

.boxgloss: This class controls the gloss on the box. You can tweak its opacity and its height. By default the color of gloss box is white, but that can also be changed. One thing to note here is that the width of the gloss box is 4px less that the box, this gives a nice border to the box. So if you change width of the container remember to make the width of the glossbox 4px less than the container.

.boxcontents: This is the inner container of the box which contains the contents of the box. It has a margin of 20px to give the effect of the colored border. It can be tweaked to reduce the border effect as per need.

This is how the box looks now.

Box with Initial Formatting

We see that there is no gloss there on the box nor color. So lets do that in the next step.

Adding color to the box:

With these main three classes we have used few subclasses to change colors and borders of the box. We are using the multiple classes technique explained earlier. You can visit our article on it “Using Multiple Classes with CSS“.

.bg-black: This class adds the background color to the box.  We are using other such classes to make different colors as seen in the demo. The outer box needs a background color so that the gloss is visible on top of it.

.brd-black: This class adds a border of 2px to the outer container.

This is our finished box after adding all the classes.

Final Gloss Box default black.

Note: We are using a similar pattern for all the color and border CSS styles.  Text before the hyphen ” – ” identifies the property and text after hyphen indicates color.

Result and Conclusion

That’s all folks! You can see how easily we created a glossybox to hold some special contents of our html. It can contain any type of data as shown in the demo here.

Demo Source Code

admin on December 5, 2009 | Filed Under Graphic Design, HTML CSS

Leave a Comment

Better Tag Cloud