Текстови ефекти в CSS3

CSS3 съдържа няколко нови текстови функции.
В този урок ще разглеждаме следните функции:

text-shadow
word-wrap

Поддържащи браузъри:

Числата в таблицата отговарят на най-ниската версия на браузъра която поддържа функциите:

Свойство
text-shadow	10.0	4.0	3.5	4.0	9.5
word-wrap	5.5	23.0	3.5	6.1	12.1

CSS3 свойството text-shadow

В CSS3, свойството text-shadow прилага сянка върху текста.

Вие задавате хоризонталната сянка(horizontal shadow),вертикалната сянка(vertical shadow), разстоянието на размазването (blur distance) и цвета на сянката.

You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

Пример

Добавяне на сянка върху заглавие (h1):

h1 {

    text-shadow: 2px 2px 2px #526790;

}

PC-Tools Guides

CSS3 Word Wrapping

До сега думата оставаше на същият ред и ако е прекалено дълга излизаше от полето ето така:

Този параграф съдържа много дълга дума:
товаемногодългадумаиизлизаотполето.

В CSS3, свойството word-wrap ви позволява да принуждавате текста да се разделя на различни редове - wrap, дори ако това означава думата да бъде прекъсната по-средата..Като тя ще бъде принесена на следващият ред ето така:

Този параграф съдържа много дълга дума: товаемногодългадумаинеизлизаотполето

Кода е следния :

Пример

Позволява на дълги думи да могат да се пренасят автоматично на нов ред когато стигнат до края на полето (break)..

p {

    word-wrap: break-word;

}

CSS3 Свойства - Текст

Свойство	Описание	CSS
hanging-punctuation	Указва дали препинателен знак може да бъде поставен извън кутията.	3
punctuation-trim	Указва дали препинателните знаци да бъдат подрязвани.	3
text-align-last	Дава указание за това как последната линия на блок или линия преди предизвикан line break трябва да е подредена при зададен text-align "justify".	3
text-emphasis	Прилага акцентирани знаци, и цвета на акцентираните знаци, върху текста на елемента.	3
text-justify	Задава метода за подреждане както когато използваме text-align "justify".	3
text-outline	Задава очертание на текста.	3
text-overflow	Указва какво трябва да се случи когато текста "прелее" с други думи излезе от елемента в който е поставен.	3
text-shadow	Добавя сянка към текста.	3
text-wrap	Задава правила за преминаването на нов ред (line breaking).	3
word-break	Задава line breaking правила за non-CJK скриптове	3
word-wrap	Позволява на дълги и неразрушими по структура думи да се пренасят на нов ред.	3

Ако нещо не ви е ясно или искате да допълните нещо, моля направете го в коментарите след урока. : )

Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :

Всички коментари: 0