Shadow Text Box

A shadow text box is a great way to add a little bit of visual flair and emphasis. It's fairly easy to add the coding using the HTML Editor. You can also change the colors of the border and shadow by changing the background-color and solid line color.

Courtesy of James Henson, U of Alabama at Birmingham Links to an external site.

<div style="margin: 50px 15% 50px 15%; background-color: #ccc;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #fff; border: 2px solid #ccc;">
<p>Lorem ipsum...</p>
</div>
</div>

Your text/content that you want inside the box goes between the <p> tags.

Information: Remember to add both of the </div> tags after your content.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec rutrum neque. Suspendisse pretium turpis leo, nec fermentum tortor egestas at. Duis aliquet, ante ac faucibus interdum, felis tortor rutrum ante, aliquet vestibulum metus ipsum eu lectus. Vestibulum interdum quis tortor non vulputate. Donec consequat facilisis ante at condimentum. Morbi tincidunt tincidunt ligula. Nulla semper nec felis vitae imperdiet. Suspendisse non blandit dolor.

Quisque consectetur erat nec posuere facilisis. Donec ut tristique sapien, id pulvinar risus. Sed a odio lectus. Proin mollis lorem purus, vel porttitor turpis malesuada feugiat. Proin vehicula risus a diam tincidunt molestie. Mauris enim velit, semper in pharetra et, sodales eget nulla. Phasellus vulputate lectus at sem tempus, id pellentesque turpis tempus. Nam ornare purus a ligula posuere tempus. Integer ut tempus mauris. Mauris non ipsum urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in ex sem. Ut tincidunt leo et tellus gravida, eu interdum metus dignissim. Phasellus scelerisque aliquam justo ac egestas.