Text Shadow (and Effects)

Submitted by: 
Language: 

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

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.