HTML Expandable Box with a Drop Shadow

It is a little complex to create an HTML box with a drop shadow. It is complex because you need the design with the ability to edit the text inside the box.

You also want the box to expand vertically as content is added.

Create the Image

The trick is to create your box with a drop shadow in Adobe Illustrator or Adobe Photoshop, etc. and then you create three (3) slices. One slice encompassing the entire top of your box with its drop shadow. The second slice can be rather short if you slice the entire width of the box including the drop shadow. The third slice should encompass the entire bottom of the box. Make sure that you have all elements of the drop shadow so it will look complete when reconstructed in the HTML and CSS code.

You only need to export the three short but wide slices because we will use the middle slice as a repeating background for the box. This repeating background gives the box expandability.

CSS Code for the Box

You need to create 3 CSS rules for the 3 images. You start with a rule that specifies the box width so it matches the shadowbox image width. You then repeat the middle slice along the Y axis.

You then create 2 more rules. One rule positions the top slice as a background image at the top with no repeat. The other rule positions the bottom slice as a background images at the bottom with no repeat. You can only have one background image per rule, so we must use 3 rules.

I also created a fourth rule to allow content padding within the box.

.shadow_wrapper {
            width: 532px;
            margin-left: auto;
            margin-right: auto;
            background-image: url(images/web-drop-shadow-layout_08.jpg);
            background-repeat: repeat-y;
            min-height: 100px;
}
.shadow_top {
            background-image: url(images/web-drop-shadow-layout_03.jpg);
            background-repeat: no-repeat;
            background-position: top;
            min-height: 100px;
}
.shadow_bottom {
            background-image: url(images/web-drop-shadow-layout_11.jpg);
            background-repeat: no-repeat;
            background-position: bottom;
            min-height: 100px;
}
.shadow_content {
            padding: 20px;
            padding-right: 30px;
            color: white;
}

HTML Code for the Box

You start by creating the main wrapper div tag that holds the first CSS rule setting up the total width and repeats the middle slice. You then nest the top slice rule, and then inside of this div you add another div that holds the bottom slice rule. Then nest inside all three divs with your div controlling content layout (such as padding).

<div class="shadow_wrapper">
     <div class="shadow_top">
           <div class="shadow_bottom">
                  <div class="shadow_content">
                    Content goes here.
                </div>
            </div>
      </div>
</div>

Practice Files

Click here to download the files I used to create this tutorial. As is customary, I validated this code before giving it to you.