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 attribute specifies the HTTP method (GET, POST) used to submit the form-data?
action method value
<form action="script.php" method="post"> ... </form>
Which CSS property allows to add shadow to boxes?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Which function removes the first element from an array?
pop() push() shift()
var fruits = ["apple", "apricot", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicate the function that can be used to check if a PHP extension is instaled.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO is available."
CSS3 - text-shadow, word-wrap, text-overflow

Last accessed pages

  1. Contact page - CoursesWeb (46065)
  2. Tabs effect with CSS (46651)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (54099)
  4. Ajax-PHP Chat Script (43725)
  5. Understanding Events (142)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (492)
  2. Contact page - CoursesWeb (477)
  3. Tabs effect with CSS (477)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (172)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (99)