How to Create Shadow/Call-Out Boxes

Traditional print textbooks have for years used the "call out box" or shadow box as a way to call attention to key information. You can use the same style cue on your Canvas content pages, assignments, quizzes, and syllabus. 

<div style="margin: 20px 20% 20px 20%; border: 5px solid #000000; padding: 5px 10px 5px 10px;">
<p>YOUR TEXT GOES HERE</p>
</div>

<div style="margin: 20px 20% 20px 20%; border: double 5px; border-color: #106ffe; padding: 5px 10px 5px 10px;">
<p>YOUR TEXT GOES HERE</p>
</div>

<div style="margin: 30px 25% 10px 25%; background-color: #bf4ae3;">
<div style="position: relative; top: -20px; left: -20px; padding: 30px; background: #ffffff; border: 4px solid #7c3093;">
<p>TEXT HERE.</p>
</div>
</div>    

Single Line Style

Double Line Style

Shadow Box Style

You can change the colors by adding a new hex code into the background-color, background, or solid color section (anytime you see something like #bf4ae3; that is a "hex code" for color.) You can easily find hex codes here Links to an external site..

Don't forget that color is an accessibility concern, so be sure to choose colors with enough contrast that they can be easily viewed (the built-in accessibility checker will also help.) 

The various numbers and percentages change the placement, margins, size, and "padding" of the box. In HTML, padding is the amount of empty space around an image or object. These numbers also change the box and the shadow behind the box. You can read a line-by-line breakdown of the code here.

Practice

• Open a blank content page and switch to the HTML editor. 
• Copy the code included above into the HTML editor. You can change the colors or numbers. 
• Switch back to "rich text editor" and see what your changes have done. 
• Add the sample code to the note page app on your computer or a reference page on Canvas. You can copy/paste the sample code anytime you need it. 

Demo Video