Shadow Text Box

In this exercise, we'll learn how to create and modify a snazzy shadow text box, oooooh. For an example, see above! You'll notice this code snippet is a little longer than the previous two, but don't panic. Essentially, we've got one element that creates the text box with a border and another element that creates the shadow, but that doesn't really change your job: copy and paste.

The Code Snippet

Anatomy of the Code Snippet

A description of the code snippet's parts.

Steps to Create a Shadow Text Box on a Canvas Page

Select and copy the code snippet.
Navigate to an existing Canvas page and go to Edit mode.
Switch to the HTML Editor and paste the snippet where you'd like your shadow text box.
Switch back to the Rich Content Editor and type in the box to your heart's content! Note that you can also style text within the box, including adding images and other media.

Modify the Code

Change colors by changing the hex codes. Play around with each one to see what they do!
Change the line width of the border by changing the '2px' value.
While you could theoretically mess with the placement of the box and its text by fiddling with the margin, position, and padding attributes, this is only recommended for advanced users.

Troubleshooting

If you've added your shadow text box to the very end of a page and find that you can't seem to get out of the box, switch to the HTML Editor and type below the last </div> closing tag, then switch back to the Rich Content Editor.

Examples

This is the text box created by the code snippet. The following two shadow text boxes contain their respective snippets!

<div style="margin: 50px 15% 50px 15%; background-color: #ddeedd;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #ffffff; border: 4px solid #cccccc;">
<p style="text-align: center;">Your Text Here! Note that to get the same effect as the text in the opening box, you'll need to set the text as both bold and as Heading 2.</p>
</div>
</div>