HTML: Shadow Box

Shadow boxes are another great way to break up a content page or bring students' attention to a particular section.

Here is the code that makes this shadow box possible:

 

<div style="margin: 50px 15% 50px 15%; background-color: #cfcfcf;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #ffffff; border: 2px solid #cfcfcf;">
<p>Your Text...</p>
</div>
</div>

Anatomy of a Code Snippet

Screen Shot 2017-06-07 at 12.31.47 PM.png

 

How to Add a Shadow Box

1. Copy the code snippet:

<div style="margin: 50px 15% 50px 15%; background-color: #cfcfcf;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #ffffff; border: 2px solid #cfcfcf;">
<p>Your Text...</p>
</div>
</div>

 

2. Open a content page, click Edit, and switch the the HTML Editor.

3. Paste the code and change the color (if desired).

4. Switch back to the Rich Content Editor to preview and change the text in the shadow box.

 

Change colors to have some fun!

Use hex color codes to change the background and foreground colors in your shadow box:

 

<div style="margin: 50px 15% 50px 15%; background-color: #004a67;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #c2dff0; border: 2px solid #004a67;">
<p>Your Text...</p>
</div>
</div>