CSS3 introduces new properties for text effect. This tutorial presents these CSS3 text properties: the text-shadow, word-wrap, and text-overflow.


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.

Example:
<style>
h2 {
 text-shadow: 2px 3px 3px #a0a1fe;
}
</style>

<h4>Example text-shadow</h4>

<h2>Text with text-shadow</h2>
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.

The rgba(Red, Green, Blue, Alpha) formula is used to define the colors, adding transparency (Alpha) in the same time.

<style>
h2 {
 text-shadow: -1px -1px 1px rgba(110,235,155,0.2), 2px 3px rgba(0,0,181,0.2);
}
</style>

<h4>Example multiple text-shadow</h4>

<h2>Text with two colors for text-shadow</h2>

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>
#id1 {
 width:100px;
 border:1px solid blue;
 word-wrap:break-word;
}
</style>

<h4>Example word-wrap</h4>

<div id='id1'>Free CSS Course - word-wrap some_looonnng_word.</div>

CSS3 text-overflow

With text-overflow property you can specifies what should happen when text overflows the containing element.
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>
#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;
}

#id1:hover, #id2:hover {
 text-overflow:none;
 width:auto;
}
</style>

<h4>Example text-overflow</h4>
<p>Place mouse-cursor over texts bellow.</p>

<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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
CSS3 - text-shadow, word-wrap, text-overflow

Last accessed pages

  1. Dynamic variables in JavaScript (10382)
  2. Create and Use in PHP a Simple Template Page (2845)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (92094)
  4. Insert, Select and Update NULL value in MySQL (45920)
  5. Get and Modify content of an Iframe (18907)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (9821)
  2. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2052)
  3. Contact page - CoursesWeb (1999)
  4. Tabs effect with CSS (1996)
  5. Insert, Select and Update NULL value in MySQL (915)