Full access to this site requires a valid registration. You can request one here.

Assignment: Creating a text shadow sampler

Start Date: 
Mon, 02/08/2016
Date Due: 
Sun, 02/14/2016
Fonts and Text
Textbook Reading: 
Chapter 7 (pg 254)


Step 1: Prepare and Review


  1. Study the Demonstration.
  2. Read the Stylin' with CSS section on text-shadow (page 254)
  3. Read W3C Style Sheets CSS tips and Tricks section

Step 2: Create Your Text Shadow Sampler

Create a text shadow sampler that is similar to—and improves on—the examples below. At a minimum, your file should include the following shadow effects:

  1. Standard text shadow
  2. Blurred shadow
  3. Transparent shadow
  4. Text with multiple shadows
  5. Readable white text on a white background
  6. Outline
  7. Embossing
  8. Engraving
  9. Neon glow

If you wish, you can begin with the following code.


#text-shadow {  text-shadow: 3px 3px 0px #666; }
#text-shadow-blur { text-shadow: 3px 3px 5px #666;}
#text-shadow-transparent {  text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); }
#text-shadow-opaque {  text-shadow: 10px 10px 10px #000; }
#text-shadow-back { background:url(/sites/default/files/assignment_resources/stripe.png); }
#text-shadow-multiple { text-shadow: 3px 3px 5px #666, -3px -3px 3px #666; }
#text-shadow-inset {  text-shadow: 0px -1px 1px #000; }

.shadow-under-white-text {
    color: white;
    text-shadow: 2px 2px 4px #000000;

.blue-shadow-under-white-text {
    color: white;
    text-shadow: 2px 2px 4px #00f;

<div id="text-shadow">
<h1 id="text-shadow-blur">Blurred Text Shadow
<div id="text-shadow-back">
  <h1 id="text-shadow-transparent">Transparent Text Shadow
  <h1 id="text-shadow-opaque">Opaque Text Shadow
<h1 id="text-shadow-multiple">Multiple Text Shadows
<h1 id="text-shadow-inset">Inset Text Shadow
<h1 class="shadow-under-white-text">Shadow Under White Text
<h1 class="blue-shadow-under-white-text">Blue Shadow Under White Text
Image icon stripe.png2.75 KB