CSS Text Effects ใน css3 มีคุณสมบัติในเรื่องของข้อความใหม่ โดยในบทความนี้จะนำเสนอเกี่ยวกับคุณสมบัติของข้อความต่อไปนี้
- text-shadow
- word-wrap
สนับสนุน Browser
text-shadow : Internet Explorer 10, Firefox, Chrome, Safari, Opera support
word-wrap : สนับสนุนทุก browser
CSS3 Text Shadow คือ การทำข้อความให้มีเงา โดย สามารถระบุ เงาแนวตั้ง เงาแนวนอน ระยะของความเบลอ และสีของเงา
ตัวอย่าง codel
Textshadow
[css]
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
[/css]
CSS3 Word Wrapping คือ การตัดคำที่ยาวจนล้นพื้นที่ออกจากข้างนอกให้อยู่ในกรอบ
ใน css3 จะช่วยทำให้บังคับข้อความ ที่ติดกันยาวๆ ที่จะล้นออกจากกรอบให้ัเลื่อนลงบรรทัดใหม่ได้
ตัวอย่าง code
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
[css]p {word-wrap:normal;} [/css]
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
[css]p {word-wrap:break-word;} [/css]
CSS3 Text Properties
Property | Description | CSS |
---|---|---|
hanging-punctuation | Specifies whether a punctuation character may be placed outside the line box | 3 |
punctuation-trim | Specifies whether a punctuation character should be trimmed | 3 |
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” | 3 |
text-emphasis | Applies emphasis marks, and the foreground color of the emphasis marks, to the element’s text | 3 |
text-justify | Specifies the justification method used when text-align is “justify” | 3 |
text-outline | Specifies a text outline | 3 |
text-overflow | Specifies what should happen when text overflows the containing element | 3 |
text-shadow | Adds shadow to text | 3 |
text-wrap | Specifies line breaking rules for text | 3 |
word-break | Specifies line breaking rules for non-CJK scripts | 3 |
word-wrap | Allows long, unbreakable words to be broken and wrap to the next line | 3 |
ที่มา : http://www.w3schools.com/css3/css3_text_effects.asp