Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS3 Текстовые Эффекты


« Назад Далее »

CSS3 Текстовые Эффекты

CSS3 включает несколько новых текстовых свойств.

В этом уроке вы узнаете о следующих свойствах текста:

  • text-shadow
  • word-wrap

Поддержка Браузерами

Свойство Поддержка Браузерами
text-shadow
word-wrap

Internet Explorer пока еще не поддерживает свойство text-shadow.

Firefox, Chrome, Safari и Opera поддерживают свойство text-shadow.

Все основные браузеры поддерживают свойство word-wrap.


CSS3 Тень от Текста

В CSS3 свойство text-shadow добавляет тень к тексту.

Эффект тени от текста!

Вы указываете горизонтальную тень, вертикальную тень, расстояние размывания и цвет тени:

Opera Safari Chrome Firefox Internet Explorer

Пример

Добавить тень к заголовку:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Попробуйте сами »


CSS3 Перенос Слов

Если слово слишком длинное, чтобы уместиться в области, оно вылезает за ее пределы:

Этот параграф содержит очень длинное слово: этооченьоченьоченьоченьоченьдлинноеслово. Слишком длинное слово вылезает за пределы границы.

В CSS3 свойство word-wrap позволяет вам принудительно переносить текст на новую строку - даже если это означает разрыв посредине слова:

Этот параграф содержит очень длинное слово: этооченьоченьоченьоченьоченьдлинноеслово. Длинное слово будет разорвано и перенесено на следующую строку.

CSS код следующий:

Opera Safari Chrome Firefox Internet Explorer

Пример

Разрешить длинным словам разрываться и переноситься на следующую строку:

p {word-wrap:break-word;}

Попробуйте сами »


Новые Свойства Текста

Свойство Описание CSS
hanging-punctuation Указывает, когда символ пунктуации может быть расположен за пределами строкового контейнера (висячая пунктуация) 3
punctuation-trim Указывает, следует ли обрезать символ пунктуации 3
text-align-last Описывает, как последняя строка контейнера или строка перед принудительным разрывом строки выравнивается, когда свойство text-align установлено в "justify" 3
text-emphasis Применяет маркеры выразительности и цвет переднего плана маркеров выразительности к тексту элемента 3
text-justify Указывает метод выравнивания, используемый, когда свойство text-align установлено в "justify" 3
text-outline Определяет контур текста 3
text-overflow Указывает, что должно произойти, когда текст переполняет содержаший его элемент 3
text-shadow Добавляет тень к тексту 3
text-wrap Указывает правила переноса строк для текста 3
word-break Указывает правила переноса строк для не-CJK документов 3
word-wrap Разрешает длинным, неразрывным словам разрываться и переноситься на следующую строку 3






« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru