Text Shadow (and Effects)

Introduction: This page will be covering text shadows. What Are Text Shadows? Text Shadows are exactly what they sound like, it's a shadow around the text within the given area (element, class or id). This is similar to an outline, stroke or border. Structure: text-shadow: {horizontal size} {vertical size} {blur - optional} {colour}; Example:
  1. text-shadow: 2px 2px 2px #FF0000;
Text Family: There are also many other text properties, however most of these are no longer supported in most/any of the major web browsers (Chrome, IE, FireFox, Opera and Safari)... hanging-punctuation - Specifies whether a punctuation character may be placed outside the line box. punctuation-trim - Specifies whether a punctuation character should be trimmed. text-align-last - Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify". text-emphasis - Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text. text-justify - Specifies the justification method used when text-align is "justify". text-outline - Specifies a text outline. text-overflow - Specifies what should happen when text overflows the containing element. text-shadow - Adds shadow to text. text-wrap - Specifies line breaking rules for text. word-break - Specifies line breaking rules for non-CJK scripts. word-wrap - Allows long, unbreakable words to be broken and wrap to the next line. Linking CSS To a HTML Element: To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...
  1. class='myClass'
... to the attributes of that element if you chose a class, or...
  1. id='myID'
if you chose an id. Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...
  1. .myClass {
  2.         //Properties go here
  3. }
if you chose a class, or...
  1. #myID {
  2.         //Properties go here
  3. }
(You can remove the line beginning with // if you wish). Here's an example...
  1. <html>
  2.         <head>
  3.                 <style>
  4.                         .blur {
  5.                                 color: black;
  6.                                 width: 300px;
  7.                                 height: 100px;
  8.                                 text-shadow: 2px 2px 4px #000;
  9.                                 // Black shadow with black 4px blur.
  10.                         }
  11.                         .redShadow {
  12.                                 color: black;
  13.                                 width: 300px;
  14.                                 height: 100px;
  15.                                 text-shadow: 2px 2px #FF0000; //Could be text-shadow: 2px 2px 0px #FF0000;
  16.                                 // Red shadow with no blur.
  17.                         }
  18.                         .redShadowWithBlur {
  19.                                 color: black;
  20.                                 width: 300px;
  21.                                 height: 100px;
  22.                                 text-shadow: 2px 2px 4px #FF0000;
  23.                                 // Red shadow with 4px red blur.
  24.                         }
  25.                 </style>
  26.         </head>
  27.         <body>
  28.                 <p class='blur'>This is text!</p>
  29.                 <p class='redShadow'>This is text!</p>
  30.                 <p class='redShadowWithBlur'>This is text!</p>
  31.         </body>
  32. </html>

Add new comment