CSS3 introduces new properties for text effect, but many of them still are not supported by major browsers. This tutorial presents those CSS3 text properties that are better supported: the text-shadow, word-wrap, and text-overflow properties.

CSS3 text-shadow

The text-shadow property introduced in CSS3 allows for one or more shadow effects to be applied to the text of an element. This shadow is drawn around the letters.
Syntax:
text-shadow: offset_X offset_Y blur color;
- offset_X - specifies the position of the horizontal shadow. Negative values are allowed.
- offset_Y - specifies the position of the vertical shadow. Negative values are allowed.
- blur - sets the blur distance (optional).
- color - defines the color of the shadow (optional). If it is not specified is set to black.

The text-shadow is supported in all major browsers, except Internet Explore. But, up to version 8 of Internet Explorer, you can use a filter property to create a text shadow effect.
Syntax:
filter:progid:DXImageTransform.Microsoft.Shadow(color=value, direction=value, strength=value);
- color - specifies the color of the shadow.
- direction - can have one of these numeric values: 0=top, 45=top right, 90=right, 135=bottom right, 180=bottom, 225=bottom left, 315=top left.
- strength - represents the amount of blur, a higher value making it lighter.

Example:
<style type="text/css"><!--
h2 {
 /* for IE8+ */
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a1fe, direction=135, strength=5);
 text-shadow: 2px 3px 3px #a0a1fe;
}
--></style>

<h2>Text with text-shadow</h2>
Result:
Text with text-shadow

You can add multiple shadows on the same element, by adding the list of shadows separated by comma, in the text-shadow property.
Multiple shadows are drawn front (first shadow listed) to back (last shadow).
The following code mixes a color of green and a color of blue to create a text-shadow effect:
<style type="text/css"><!--
h2 {
/* for IE8+ */
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a0fe, direction=135, strength=5);
 text-shadow: -1px -1px 1px rgba(110,235,155,0.2), 2px 3px rgba(0,0,181,0.2);
}
--></style>

<h2>Text with two colors for text-shadow</h2>
- Notice that the rgba(Red, Green, Blue, Alpha) formula is used to define the colors, adding transparency (Alpha) in the same time.
Result:
Text with two colors for text-shadow

CSS3 word-wrap

With word-wrap you can allow browsers to break lines in the middle of words to prevent long strings of characters from overflowing a box.
Syntax:
word-wrap: value;
"value" can be:
  - normal - Single words cannot be broken (default).
  - break-word - Allows unbreakable words to be broken. Words are broken by character, not syllables, and are not hyphenated.

Example:
<style type="text/css"><!--
#id1 {
 width:100px;
 border:1px solid blue;
 word-wrap:break-word;
}
--></style>

<div id="id1">Free CSS Course - word-wrap some_long_word.</div>
Result:
Free CSS Course - word-wrap some_long_word.

CSS3 text-overflow

With text-overflow property you can specifies what should happen when text overflows the containing element.
The text-overflow is supported in all major browsers, except Firefox.
Syntax:
text-overflow: value;
"value" can be:
  - clip - clips the text (default).
  - ellipsis - render an ellipsis ("…") to represent clipped text.

• Usualy, the text-overflow is used together with white-space:nowrap; and overflow:hidden;.
Example:
<style type="text/css"><!--
#id1 {
 width:230px;
 border:1px solid blue;
 white-space:nowrap; 
 overflow:hidden;    /* "overflow" value must be different from "visible" */
 text-overflow:ellipsis;
}
#id2 {
 width:230px;
 border:1px solid green;
 white-space:nowrap; 
 overflow:hidden;
 text-overflow:clip;
}
--></style>

<div id="id1">CSS Tutorial - some long text in a line, any good words.</div>
<div id="id2">Web site coursesweb.net - another long text in a line.</div>
Result:
CSS Tutorial - some long text in a line, any good words.
Web site coursesweb.net - another long text in a line.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to include external CSS file in web page?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Which CSS property sets the text size?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicate the JavaScript property that can add HTML code into an element.
text value innerHTML
document.getElementById("someID").innerHTML = "HTML content";
Click on the function that returns the number of characters of a string in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
CSS3 - text-shadow, word-wrap, text-overflow

Last accessed pages

  1. Remove / Get duplicate array values - Reset array keys in PHP (4839)
  2. $_GET, $_POST and $_REQUEST Variables (16462)
  3. Last Google Cache of Web Page (653)
  4. Validate and Submit Form (879)
  5. Add, Change, and Remove Attributes with jQuery (18437)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (33786)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (27292)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (25886)
  4. Read Excel file data in PHP - PhpExcelReader (25773)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (22625)