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 add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
CSS3 - text-shadow, word-wrap, text-overflow

Last accessed pages

  1. PHP getElementById and getElementsByTagName (19140)
  2. Redirects (503)
  3. innerHTML and outerHTML to Get and Replace HTML content (17553)
  4. Add Pause in JavaScript script (9350)
  5. Dynamic variables in JavaScript (6330)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (300)
  5. Insert, Select and Update NULL value in MySQL (214)