Latest web development tutorials

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

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

CSS3 текст содержит несколько новых функций.

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

  • текст-тень
  • коробка-тень
  • текст переполнения
  • перенос слов
  • слово-брейк

Поддержка браузеров

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

Текст тень CSS3

В CSS3, текст-тень свойство применяется к тексту тени.

Текст эффект тени!

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

OperaSafariChromeFirefoxInternet Explorer

примеров

Добавьте тень к названию:

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

Попробуйте »

CSS3 коробчатого тень недвижимость

В CSS3 CSS3 коробчатого теневое свойство применяется к хвалимся

примеров

DIV {
коробка-тень: 10px 10px;
}

Попробуйте »

Затем добавить цвет в тени

примеров

DIV {
коробка-тень: 10px 10px серый;
}

Попробуйте »

Затем добавьте тень к эффекту размытия

примеров

DIV {
коробка-тень: 10px 10px 5px серый;
}

Попробуйте »

Вы можете также добавить эффект тени в двух :: Befor и :: после того, как псевдо-элементов

примеров

# Boxshadow {
позиция: относительная;
б вола тень: 1px 2px 4px RGBA (0, 0, 0, 0,5);
ра dding: 10px;
BAC kground: белый;
}
#boxshadow IMG {
ширина: 100%;
границы: 1px твердый # 8a4419;
стиль границы: вставка;
}
#b oxshadow :: после того, как {
Содержание: '';
позицию: абсолютная;
г-индекс: -1; / * скрыть тень позади изображения * /
коробка-тень: 0 15px 20px RGBA (0, 0, 0, 0,3);
ширина: 70%;
Слева направо: 15%; / * одна половина из оставшихся 30% * /
высота: 100px;
снизу: 0;
}

Попробуйте »

Особый случай является использование эффекта теневой карты

примеров

div.card {
ширина: 250px;
коробка-тень: 0 4px 8px 0 RGBA (0, 0, 0, 0,2), 0 6px 20px 0 RGBA (0, 0, 0, 0.19);
выравнивания текста: центр;
}
}

Текст карты >> Picture Card >>

CSS3 Text Переполнение недвижимость

атрибут CSS3 переполнения текста определяет, каким образом пользователи должны отображать содержимое переполнения

примеров

p.test1 {
бело-пространство: Nowrap;
ширина: 200px;
границы: 1px твердый # 000000;
переполнение: скрытый;
текста переполнения: клип;
}

p.test2 {
бело-пространство: Nowrap;
ширина: 200px;
границы: 1px твердый # 000000;
переполнение: скрытый;
текст переполнение: многоточие;
}

Попробуйте »

CSS3 новой строки

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

CSS3, свойство позволяет обернуть перенос текста обязательным - даже если это означает расщепление его в середине слова:

код CSS выглядит следующим образом:

OperaSafariChromeFirefoxInternet Explorer

примеров

Позволяет длинный перенос текста:

p {word-wrap:break-word;}

Попробуйте »

CSS3 Слово Ломать

CSS3 Слово Ломать атрибут, чтобы указать строки нарушение правил:

код CSS выглядит следующим образом:

примеров

p.test1 {
Слово-брейк: держать-все;
}

p.test2 {
слово-брейк: брейк-все;
}

Попробуйте »

Новые атрибуты текста

свойство описание CSS
подвешивание-пунктуации Положения препинания находится за пределами кадра. 3
пунктуация обрезкой Независимо от положений обрезке символов пунктуации. 3
Текст-Align-последний Установка, как выровнять последнюю строку или непосредственно перед строкой, чтобы заставить разрыв строки. 3
текста акцент Основные элементы приложения к текстовой метке и ключевого тега переднем плане. 3
текста оправдать Когда заданный способ выравнивания, когда текст выравнивания установлен в положение "оправдать" использование. 3
текст контурные Уточнение контура текста. 3
текст переполнения Положения, когда вещи происходят, когда текст переполняет содержащий элемент. 3
текст-тень Добавление тени к тексту. 3
текст-обертка Положения текста правила обертке. 3
слово-брейк CJK текст положений в условиях отсутствия прямой нарушение правил. 3
перенос слов Это позволяет разделить длинные и неделимой перенос слов на следующую строку. 3