Панель Управления





Курс CSS. Урок 48. CSS3. Текстовые эффекты. Text Effects.
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 48. CSS3. Текстовые эффекты. Text Effects. Тему отображения текстов мы достаточно глубоко и широко изучали на уроках 07, 08, 09, 10, 11, 12, 13. Cтандарт CSS3 добавляет к предыдущим стандартам такие возможности как эффект отброса текстом тени (text-shadow) и разбивку слова на части (word-wrap). Свойства text-shadow, text-overflow, word-wrap, word-break.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Курс CSS. Урок 48.
CSS3. Текстовые эффекты. Text Effects.
Тему отображения текстов мы достаточно глубоко и широко изучали на предыдущих уроках, см урок 07, урок 08, урок 09, урок 10, урок 11, урок 12, урок 13, правда, не выходя за пределы стандарта CSS2.

Cтандарт CSS3 добавляет к предыдущим стандартам такие возможности как эффект отброса текстом тени (text-shadow) и разбивку слова на части (word-wrap).

Начнем с теории вопроса.
Таблица свойств CSS 3. Текстовые эффекты. Text Effects.
NN Свойство Гугль Хром FireFox IE Safari Opera
70 hanging-punctuation - - - - -
108 punctuation-trim - - - - -
126 text-align-last - - - - -
127 text-emphasis - - - - -
128 text-height - - - - -
129 text-justify - - 5 - -
130 text-outline - - - - -
131 text-overflow 4 7 6 3.1 11
132 text-shadow 4 3.5 10 4 9.5
133 text-wrap - - - - -
142 word-break 4 15 5.5 3 -
143 word-wrap 4 3.5 5 3.1 10.5

Рассмотрим только те свойства, которые на сегодня имеют практическую ценность и работают во всех браузерах.

Свойство text-overflow для определения способа обрезания длинного текста.

В примерах ниже используется -
white-space:nowrap;
чтобы избежать перехода на новую строку.

text-overflow:clip; - грубое обрезание, как только место заканчивается, текст резко обрезается.
text-overflow:clip; - грубое обрезание, как только место заканчивается, текст резко обрезается.

text-overflow:ellipsis; - мягкое обрезание, добавляет троеточие ("..."), чтобы показать пользователю, что текст обрезан.
text-overflow:ellipsis; - мягкое обрезание, добавляет троеточие ("..."), чтобы показать пользователю, что текст обрезан.

text-overflow:"...обрыв..."; - можно указать свою строку, которая будет на месте обрезания.
text-overflow:"...обрыв..."; - можно указать свою строку, которая будет на месте обрезания. В данном примере рискнул использовать для строки обрыва строку на русском языке. Вроде работает, но не удивляйтесь, если ваш браузер вруг как-то глюкнет на таких экспериментах.

Свойство text-shadow для создания эффекта отброса текстом тени (text-shadow).

В стандарте CSS3 есть интересное свойство text-shadow, которое позволяет добиться эффекта отбрасывания текстом тени. Это свойство удобно использовать для заголовков, рекламных призывов и т.п.

Для свойства text-shadow можно определить величину горизонтальной тени, величину вертикальной тени, размер блюра (размытости) и цвет тени.

Не позволим!
Отбрасывать тень на нашу плетень!
text-shadow: 12px 5px 2px #707070;
В данном примере тень смещается на 12 пиклелей по горизонтали, 5 пикселей по вертикали, имеет блюр 2 пикселя и цвет #707070 (т.е. серый, близкий к черному).

Свойство word-wrap дает возможность производить разбивку слова на части.

Рассмотрим два примера.
Если_слово_очень_длинное_и_не_влезает_по_длине_в_родительский_элемент_то_тогда
word-wrap: normal;
Если_слово_очень_длинное_и_не_влезает_по_длине_в_родительский_элемент_то_тогда
word-wrap: break-word;
Как видно из этих примеров при использовании свойства word-wrap со значением break-word происходит его разбивка, чтобы текст не выходил за пределы родительского элемента.

Свойство word-break дает возможность производить разбивку слова на части.

Свойство word-break похоже на свойство word-wrap, рассмотренное ранее, но чуть более сложное в использовании.

Рассмотрим три примера.
Если_слово_очень_длинное_и_не_влезает_по_длине_в_родительский_элемент_то_тогда
word-break: normal;
Если_слово_очень_длинное_и_не_влезает_по_длине_в_родительский_элемент_то_тогда
word-break: break-all;
Если_слово_очень_длинное_и_не_влезает_по_длине_в_родительский_элемент_то_тогда
word-break: keep-all;
Описания значений свойств:
  • word-break: normal; - разделяет слова по из обычным правилам.
  • word-break: break-all; - строки могут разделятся между любыми двумя знаками.
  • word-break: keep-all; - запрещается раздел между парой знаков.
Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_048_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_048_001.zip ← скачайте пример, чтобы установить на свой сайт...

***** Машина-Функционал для передвижения по страничкам курса CSS *****
:: ::  / 


Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.


Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/css/p048.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
***** Реклама *****
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа
Красивая девушка блондинка слева Красивая девушка брюнетка справа
Наверх ↑