Content Box with Unique Shadow

I'll describe a way to make the content of a div stand out by using an image to give it a unique shadow.

The content can be anything. Generally, however, it would be content that's special or important in some way.

1. A testimonial.

2. The most important product feature.

3. Class or webinar dates and times.

4. A pull-quote from an article.

5. A special image.

6. The end date of a sale.

7. A special request for the reader.

Here is an example with a testimonial.

I highly recommend Will Bontrager for custom programming! In addition to a number of off-the-shelf programs I have purchased from him, he has also written several complex custom scripts, and modified several others for me over the past 8 years. His work is always done promptly and meets my specifications exactly. He is a pleasure to work with, being both friendly and professional. I *always* think of Will first when I have something special I want for my websites!

Terri Zwierzynski
SoloWiz Services - Making Your WordPress Website Beautiful and Worry‑Free

The shadow below the content box is different than the regular CSS shadows. CSS shadows are used so frequently they no longer grab the attention as they used to immediately after they first became available.

The shadow in the example is an image. It's shape and positioning are different enough to make the content box stand out.

Because the shadow is an image, it can be created any color and shape image creation software is capable of.

In the above example, the image is half the width of the content area and slants enough for an illusion that the right half of the content box has a slight lift.

How To Implement Your Own

In essence, implementation consists of a div with a background image and content.

The shadow image is the background image. The div specifies padding sufficient to expose the background image.

The content is in a div with a border.

Here is the source code of the example, followed by notes about the source code.

<!-- The div with the background image. -->
<div style="width:500px;
            background-image:url(https://www.willmaster.com/library/images/shadow275W.png);
            background-color:#fff;
            background-position:right bottom;
            background-repeat:no-repeat;
            padding-bottom:20px;">

<!-- CONTENT -->

<!-- The div with a border around the content. -->
<div style="position:relative;
            background-color:#fff;
            padding:25px;
            border:1px solid #000;">

<!-- Image in a div floated right. -->
<div style="float:right;background-color:#fff; 
   width:148px; 
   height:auto;
   padding:4px; 
   border:1px solid #000; 
   margin:0 0 10px 10px;">
<img src="//www.willmaster.com/library/images/terriSerenbezoom148WH.jpg" 
     style="width:148px; height:auto;"
     alt="Terri Zwierzynski">
</div><!-- End of image in a div floated right. -->

<!-- Text. -->
<p style="margin-top:0; font-style:italic;">
I highly recommend Will Bontrager for custom programming! In addition to a number of off-the-shelf programs I have purchased from him, he has also written several complex custom scripts, and modified several others for me over the past 8 years. His work is always done promptly and meets my specifications exactly. He is a pleasure to work with, being both friendly and professional. I *always* think of Will first when I have something special I want for my websites!
</p>
<p style="margin-bottom:0;">
Terri Zwierzynski<br>
<a href="https://solowiz.com/">SoloWiz Services - Making Your WordPress Website Beautiful and Worry‑Free</a>
</p>
<!-- End of text. -->

</div><!-- End of div with a border around the content. -->

<!-- End of CONTENT. -->

</div><!-- End of div with the background image. -->

Notes:

In the example, the CSS definitions are inline. Generally, for live web pages, CSS definitions are in a style sheet. Inline works fine, though.

The example code above contains a div with a background image and the content.

1. The background image.

   The background image is the shadow. It's the most important aspect of the presentation. Without it, you have just a normal div, no shadow to make it stand out.

   Here is a note about each CSS property for the example div with the background image.

   • width:

     Optional. If removed, the width of the div will be as wide as it can go.

   • background-image:

     The value is the URL of the background image. The image can be anything, although for this purpose it would remind viewers of a shadow.

   • background-color:

     Make the value of the background color the background color of the content.

   • background-position:

     This value depends on the shadow image. In the example, the shadow image is at the right bottom. Depending on where you want the shadow image placed, use one of the following two-word values for the background-position property:

     left top
     left center
     left bottom
     right top
     right center
     right bottom
     center top
     center center
     center bottom

   • background-repeat

     The value is no-repeat so the background image doesn't tile.

   • padding-bottom:

     The value is the amount of space required to ensure the background image is visible. The example image is 20 pixels in height and is located at the bottom of the div. It's the reason for the padding-bottom:20px; declaration.

     If the background image was positioned at the right and 25 pixels of the image needed to be visible, the declaration would be padding-right:25px;

   Your CSS declarations may of course be different. The main properties are the URL of the shadow image, the positioning of the image, and the padding to reveal the image.

2. The content.

   The content can be whatever you want.

   In the example, the content is in a div with a border. It defines the area and provides a reason for the shadow.

The content of the div stands out because of its unique shadow. It's unique in the sense that it's rarely seen. Using your own shadow image, one you create or have created for you, would make it truly unique.

Will Bontrager