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 attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
CSS3 - text-shadow, word-wrap, text-overflow

Last accessed pages

  1. XML sitemap with data from MySQL (215)
  2. JQZoom Image Magnifier (972)
  3. PHP Chat Script (4321)
  4. Get Mouse coordinates inside a Div or an Image (793)
  5. Texarea with buttons to format text, colors and smiles (331)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (5162)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (4946)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (4740)
  4. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (4596)
  5. PHP Chat Script (4321)