CSS3 Text Effects:
CSS3 Text Effects
CSS3 contains several new text features.The following text properties are:
- text-shadow
- word-wrap
Browser Support:
Internet Explorer does not yet support the text-shadow property.Firefox, Chrome, Safari, and Opera support the text-shadow property.
All major browsers support the word-wrap property.
A. text-shadow:
Text-shadow is quite similar to box-shadow. it must be applied to text by using same four parameters:- x-offset
- y-offset
- blur
- color of shadow
h1 { text-shadow: 0 1px 0 #fff; color: #292929; }
Note: Internet Explorer does not support the text-shadow property.
Example:
B. Text-Outline:
By using a comma as the separator, we can apply multiple shadows,webkit offers a stroke effect for creating the outline for the text.
Syntax:
body { background: #ffffff; }
h1 {text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
color: #ffffff;
}
Example:
C. Text-Stroke:
Webkit supports it (Safari, Chrome, iPhone). In this case, with white text, Firefox will display a seemingly blank page. You can either use JavaScript feature detection to get around this, or make sure that your base text color is not the same as the body’s background.Syntax:
h1 {-webkit-text-stroke: 3px black; color: white ;}
Example:
D. text-overflow:
The text-overflow properties accept two values:- clip
- ellipsis
Syntax: css
.box {
Background-color:#eee;
-o-text-overflow: ellipsis;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border: 1px solid black;
width: 350px;
padding: 20px;
cursor: pointer;
}
HTML:
<div class="box">
This property can be used to cut off the over-flowing text that exceeds its container….. </div>
Example:
E. Resize: textarea
CSS3 module allows to resize a textarea . The browser support as of Firefox 4 and Safari 3. By default, webkit browsers and Firefox 4 allow to resize the textarea both in vertically and horizontally.HTML:
<textarea name="elem" id="elem" rows="5" cols="50"></textarea>
Syntax: css
textarea {
-moz-resize: vertical;
-webkit-resize: vertical;
resize: vertical;
}
Possible Values
- both: Resize vertically and horizontally
- horizontal: Limit resizing to horizontally
- vertical: Limit resizing to vertically
- none: Disable resizing
F. Word Wrapping:
- If a word is too long to fit within an area, it expands outside:
- This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
- In CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:
- This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
p {word-wrap:break-word;}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Word Wrapping </title>
<style type="text/css">
body{margin:0 auto; width:500px; background:#eee}
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
p {word-wrap:break-word;}
</body>
</html>
Result:
New Text Properties
| Property | Description |
| hanging-punctuation | Specifies whether a punctuation character may be placed outside the line box |
| punctuation-trim | Specifies whether a punctuation character should be trimmed |
| text-align-last | Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" |
| text-emphasis | Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text |
| text-justify | Specifies the justification method used when text-align is "justify" |
| text-outline | Specifies a text outline |
| text-overflow | Specifies what should happen when text overflows the containing element |
| text-shadow | Adds shadow to text |
| text-wrap | Specifies line breaking rules for text |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long, unbreakable words to be broken and wrap to the next line |
No comments:
Post a Comment