Тень текста css — примеры использования

Эффект ретро-тени

Для ретро-тени не всегда нужно применять размытие.

Возьмем, к примеру, эту ретро-тень:

body {
	background: #fff3cd;		/* изменяем цвет фона */
}

.text {
	font-size: 5em; 					
	color: white;		/* изменяем цвет текста на белый */
    text-shadow: 6px 6px 0px rgba(0,0,0,0.2);	/* добавление ретро-тени */
}

Эффект ретро-тени

Эффект двойной тени

Интересно, что вы можете добавлять более одной CSS тени шрифта. Это можно сделать следующим образом: text-shadow: shadow1, shadow2, shadow3;

Давайте добавим две тени, одна — с цветом фона, а вторая немного темнее:

.text {
	font-size: 5em; 												
    text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);    /* дает две тени */
}

Фон у нас белый, так что другой цвет для него нам не нужен. В браузере эффект будет выглядеть так:

Эффект двойной тени

Эффект удаленной тени

Этот эффект основывается на функции определения нескольких красивых теней CSS. Ниже вы можете увидеть эффект с четырьмя тенями, отбрасываемыми вниз с различной степенью интенсивности:

body {
	background: #fff3cd;			/* изменяем цвет фона */
}
.text {
	font-size: 5em;
	color: white; 												
    text-shadow: 0px 3px 0px #b2a98f,
             	 0px 14px 10px rgba(0,0,0,0.15),
             	 0px 24px 2px rgba(0,0,0,0.1),
            	 0px 34px 30px rgba(0,0,0,0.1);		
}

Эффект удаленной тени

3D-эффект Марка Дотто

Следующий эффект был опубликован на MarkDotto.com, в нем используется 12 отдельных теней, чтобы создать реалистичный 3D-эффект:

body {
	background: #3495c0;			/* изменяем цвет фона */
}

.text {
	font-size: 5em;
	color: white; 												
    text-shadow: 0 1px 0 #ccc, 
              0 2px 0 #c9c9c9,
              0 3px 0 #bbb,
              0 4px 0 #b9b9b9,
              0 5px 0 #aaa,
              0 6px 1px rgba(0,0,0,.1),
              0 0 5px rgba(0,0,0,.1),
              0 1px 3px rgba(0,0,0,.3),
              0 3px 5px rgba(0,0,0,.2),
              0 5px 10px rgba(0,0,0,.25),
              0 10px 10px rgba(0,0,0,.2),
              0 20px 20px rgba(0,0,0,.15);
}

Теперь посмотрите, как эти внутренние тени текста CSS выглядят в браузере:

3D-эффект тени

Реалистичный эффект вырезанного текста Гордона Холла

Гордон использует некоторую продвинутую магию CSS, чтобы задать не только внешнюю тень, но и реалистичную внутреннюю тень:

body {
	background: #cbcbcb;			/* изменяем цвет фона */
}

.text {
	font-size: 5em;
	color: transparent; 										
	background-color: #666666;
		   -webkit-background-clip: text;
		   -moz-background-clip: text;
		   background-clip: text;
		   text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

И это создает эффект вырезанного текста.

Эффект вырезанного текста

Эффект свечения текста

body {
	background: #992d23;			/* изменяем цвет фона */
}

.text {
	font-size: 5em;
	color: white; 												
	text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}

Эта тень создает эффект свечения текста:

Эффект свечения текста

Эффект выпуклого текста

body {
	background: #629552;			/* изменяем цвет фона */
}
.text {
	font-size: 5em;											
	color: rgba(0,0,0,0.6);
	text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                 0px -5px 35px rgba(255,255,255,0.3);
}

Эффект выпуклого текста

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

Поддержка браузерами очень хорошая. Правда, если вам нужно поддерживать Internet Explorer, от кастомных свойств, вероятно, придётся отказаться или для IE11 воспользоваться полифилом. Его работа основана на поддержке этим браузером специфического синтаксиса для кастомных свойств. В этой статье мы не будем рассматривать этот подход. Сфокусируемся на том, что является стандартом в работе с кастомными свойствами. В ваших проектах полифил может стать неплохим решением, но учитывайте, что он немало весит и гарантированно замедлит сайт, так как будет искать циклом на JavaScript все элементы, на которые воздействуют кастомные свойства.

Тем не менее, для браузеров, которые не поддерживают кастомные свойства, можно создавать фоллбэки:

Создание фоллбэков можно автоматизировать плагином postcss-custom-properties при постпроцессинге через POSTCSS. Этот плагин проставит фоллбэки за вас, если кастомные свойства заданы на уровне корневого элемента. Если же кастомные свойства заданы на уровне отдельных блоков, у POSTCSS возникают проблемы. Расскажем об этом в следующей статье.

Синтаксис кастомных свойств позволяет указывать альтернативное значение в случае, если доступ к кастомному свойству по имени невозможен:

В этом примере свойство будет ожидать на вход значение от кастомного свойства , а если не получит его, применит альтернативное значение #1e1e1e. POSTCSS знает такой синтаксис и сможет создать на основе альтернативного значения фоллбэк для старых браузеров.

Так выглядит наш пример, если задать все необходимые фоллбэки

Обратите внимание, что свойство для svg-иконки мы вынесли из HTML-атрибута в CSS. Если раньше мы старались показать, как по-разному можно использовать кастомные свойства, то теперь организовали код так, чтобы создание фоллбэков можно было автоматизировать одним POSTCSS-плагином

CSS3 #11 Границы и тени (Borders & Shadows)

3774

279

28

00:09:57

29.12.2020

#YauhenK #webDev #CSS #CSS3 #ityoutubersru

Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.

Репозиторий курса:
🤍

Полный список готовых и планируемых курсов:
Trello: 🤍

Автор курса:
YouTube: 🤍
Instagram: 🤍
Twitter: 🤍
VK: 🤍
LinkedIn: 🤍
GitHub: 🤍
VK (Группа): 🤍

Поддержать развитие канала:
YouTube-спонсорство: 🤍
Patreon: 🤍

Неоновое свечение CSS3

Всем привет. О CSS3 можно говорить много и предела возможностей пока не видно (конечно же они есть, но мы пока еще не все освоили и не все придумали). Тени, уголки, градиенты, изменение цвета изображений — и это только поверхностный уровень возможностей CSS3. Его нужно изучать. Ну а пока я выкладываю очередную сборку CSS3 эффектов с текстом при наведении (конечно можно сделать и не при наведении).

6 CSS3 эффекта неонового свечения: красный, голубой, желтый, зеленый, оранжевый и фиолетовый. Эффект применяется к тексту и свечение происходит при наведении. Свечение анимированное, создает эффект затухания и вспыхивания.

Долой слова, вот скрин того, что вы можете увидеть в демо и скачать себе на компьютер, поставив затем один из эффектов себе на сайт

В основе эффекта лежат атрибуты:

 -webkit-animation:

 -moz-animation:

 animation:

К каждому примеры применен определенный шрифт (Monoton, Iceland, Pacifico, PressStart, Audiowide и Vampiro One в той последовательности как они показаны на скрине). Скорее всего эти шрифты не поддерживают кириллицу, поэтому советую сразу подумать о своем шрифте.

Чтобы подключить эффекты, нужно

4. Придумать свои стили

И вместо нумерации псевдоклассом nth-child (nth-child1, nth-child2 и т.д.) можно поставить class red, blue и так далее

5. Присвоить class стилизуемому элементу

например:

<h2>Добро пожаловать</h2>

где атрибут text-effect имеет css:

.text-effect {
  color: #fff;
  font-family: Monoton;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}

.text-effect:hover {
  color: #FF1177;
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}

Это пример самого первого эффекта (RED)

Вам нужно просто повнимательнее изучить css файл и все станет понятно. Спасибо за внимания, надеюсь помог. Пока

Основы использования теней

Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr, которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.

Синтаксис

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

text-shadow: смещение_по_горизонтали  смещение_по_ вертикали размытие цвет;

Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.

text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

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

Почему используется rgba?

Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени — уровень прозрачности.

Данный метод существенно проще, чем другие способы определения цвета

Вам не надо акцентировать внимание на определении оттенка цвета тени, который может быть лишь немного темнее или светлее цвета фона. С rgba вы можете просто использовать белый или черный цвета и увеличить их прозрачность, чтобы добиться нужного оттенка фона при смешении красок

Направление письма и символов, css-свойства direction, unicode-bidi и writing-mode

В некоторых языках возникает необходимость смены направления письма. Если у нас принято направление письма слева направо, то во многих арабских языках
это делается наоборот, т.е. справа налево. Для таких случаев предусмотрено специальное наследуемое свойство
direction, значение ltr которого задает направление текста
слева направо, а значение rtl, соответственно, справа налево (см. пример №3). Если же нужно изменить еще и
направление символов, то следует воспользоваться наследуемым свойством unicode-bidi,
которое используется только совместно с direction и может принимать значения:

  • normal – право выбора направления остается за браузером, который использует собственный алгоритм для
    определения направления текста на основе стандартов Unicode; значение используется браузером по умолчанию;
  • embed – направление текста будет задаваться, как указано в свойстве
    direction;
  • bidi-override – направление текста, опять же, будет задаваться свойством
    direction, но в дополнение к этому изменится и направление символов в тексте.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Использование unicode-bidi</title>

	<style>
		
		p{
		width: 400px;
		margin: 3em;		
		}
				
		.p_1{
		direction: rtl;
		unicode-bidi: normal;
		background-color: yellow
		}
		
		.p_2{
		direction: rtl;
		unicode-bidi: bidi-override;
		background-color: violet
		}
		
	</style>
	
</head>
<body>
	
	<p class="p_1">
		Направление записи текста идет справа налево.
	</p>
	
	<p class="p_2">
		Направление записи текста и букв идет справа налево.
	</p>
	
</body>
</html>

Пример №3. Пример использования свойств direction, unicode-bidi

Отметим, что по умолчанию, если задано направление текста слева направо (как принято у нас), браузеры выравнивают текст
по левому краю. Если же задано выравнивание текста справа налево, то браузеры по умолчанию выравнивают текст по правому краю.

Помимо необходимости регулирования горизонтального направления текста время от времени может возникать и ситуация, когда текст на странице требуется
располагать не в горизонтальном, а в вертикальном направлении. В этом случае не обойтись без наследуемого css-свойства
writing-mode (см. пример №4), которое может принимать следующие значения:

  • horizontal-tb – устанавливает горизонтальное направление текста слева направо с
    заполнением строками сверху вниз;
  • vertical-rl – устанавливает вертикальное направление текста сверху вниз с заполнением
    строками справо налево;
  • vertical-lr – устанавливает вертикальное направление текста сверху вниз с заполнением
    строками слева направо.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Использование writing-mode</title>

	<style>
	
		p{
		width: 250px;
		height: 250px;
		margin: 2em;
		}
		
		.p_1{
		writing-mode: horizontal-tb;
		background-color: yellow;
		}
		
		.p_2{
		writing-mode: vertical-rl;
		background-color: green;
		}
		
		.p_3{
		writing-mode: vertical-lr;
		background-color: violet;
		}
		
	</style>
	
</head>
<body>

	<p class="p_1">
		writing-mode: horizontal-tb writing-mode: horizontal-tb 
	</p>
	
	<p class="p_2">
		writing-mode: vertical-rl writing-mode: vertical-rl
	</p>
	
	<p class="p_3">
		writing-mode: vertical-lr writing-mode: vertical-lr
	</p>
	
</body>
</html>

Пример №4. Пример использования свойства writing-mode

Отметим, что использование свойств direction и
unicode-bidi совместно с
writing-mode может привести к вполне ожидаемому дополнительному
изменению направления вдоль вертикальной прямой (попробуйте внести изменения в код примера и поэкспериментируйте со значениями).

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

Большим плюсом text-shadow
является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.

К сожалению, IE до версии 10.0 не поддерживает text-shadow
, так что в этом браузере мы никаких красивостей не увидим.

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

Текст

Контурный текст

Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).

Пример 2. Четыре тени для контура

HTML5
CSS3
IE 9
IE 10+
Cr
Op
Sa
Fx

Текст

Контурный текст

Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.

Рис. 3. Контур с помощью четырёх теней

Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.

Рис. 4. Трёхмерный текст

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

Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.

Пример 3. Тень для добавления трёхмерности

HTML5
CSS3
IE 9
IE 10+
Cr
Op
Sa
Fx

Текст

Смещение вниз на небольшое расстояние и сильное размытие

Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.

text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);

3D текст от Mark Dotto

Эффект используется на сайте MarkDotto.com. В нем используется 12 различных теней для создания отличного эффекта 3D.

text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);

Вдавленный текст от Gordon Hall

Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.

Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.

background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

3-D Text

See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.

Make your text look like a 3-D text by using just text shadows. Also notice the smoothness of the text. This is the magic of multiple text shadows.

For this effect, use a combination of text shadows having shades of the text color and set the blur radius to a very small value depending on the size of your text.

CSS

color #dfdfdf;

text-shadow  2px 2px #dfdfdf, 
      -2px 5px 1px #cbcbcb,
      -4px 8px 1px #979797, 
      -6px 11px 1px #a2a2a2, 
      -8px 14px 1px #aeaeae, 
      -10px 17px 1px #b5b5b5, 
      -12px 20px 1px #bebebe, 
      -14px 23px 1px #cecece, 
      -16px 26px 1px #dbdbdb, 
      -18px 29px 1px #dfdfdf

Основы использования теней

Свойство text-shadow
очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr , которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.

Синтаксис

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

Text-shadow: смещение_по_горизонтали смещение_по_ вертикали размытие цвет;

Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.

Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

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

Почему используется rgba?

Вам не обязательно использовать rgba
для задания цвета тени при определении свойства. Однако, rgba
добавляет еще одну размерность при определении тени — уровень прозрачности.

Данный метод существенно проще, чем другие способы определения цвета

Вам не надо акцентировать внимание на определении оттенка цвета тени, который может быть лишь немного темнее или светлее цвета фона. С rgba
вы можете просто использовать белый или черный цвета и увеличить их прозрачность, чтобы добиться нужного оттенка фона при смешении красок

С помощью свойства text-shadow
можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.

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

Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.

Body {
background: #222;
}
#text h1 {
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.

Text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!

Text-shadow: shadow1, shadow2, shadow3;

Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.

Text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Мерцающий текст

Отличный эффект получался, если к коду HTML немного CSS добавить.
Текст начинал мигать, что так же очень здорово выделяло его от обычного, позволяя делать разные «рекламные штучки».

НО!

Видеть это могли только те, кто пришёл со старыми браузерами Firefox, Opera, а вот мой когда-то любимый Internet Explorer 8 «подмигивать» нам не желал.

Привет!

Примечание!  К тому же.
Проводя ежегодную ревизию всех страниц своего сайта, заметил, что новые версии Firefox и Opera тоже
перестали поддерживать такое очень интересное правило CSS, как text-decoration: blink.
Ну … … … оставил его в коде в качестве «раритета». Приятно вспомнить!

ОДНАКО!

С помощью более новых правил CSS заставить текст мерцать вполне возможно, причём, несколькими способами. И один из них (самый простой) Вы видите ниже.

Пример мерцающего текста.

Сделал данный простой пример мерцания текста, использовав два имеющихся в CSS свойства: «animation» и «opacity»
(об opacity — видимости текста — писал выше).  

Анимация текста CSS. Эффект дыма

989

55

12

00:06:21

21.05.2020

В этом видео мы сделаем простую анимацию текста на CSS. При наведении мышки наши буквы будут плавно растворятся и подниматься вверх, получится нечто похожее на эффект дыма.
У нас получится красивая анимация текста css.

#css #анимацияcss #animation

️Ссылка на Codepen: 🤍

CSS — плюшки: 🤍

Javascript — плюшки: 🤍

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Задать вопрос: 🤍
Разбор ваших работ: 🤍

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Вступайте в чат и общайтесь с единомышленниками: 🤍

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Получить доступ к различным плюшкам (доступы к макетам, скриптам, готовой верстке) + поддержка канала:
️ 🤍
️ 🤍

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Если вы хотите просто поощрить мои старания любой суммой, я буду вам предельно благодарен.
Мои реквизиты:
ЮMoney(Яндекс Деньги): 41001858794127
Приват24: 5363 5420 1714 8058
Monobank: 4441 1144 2283 2244

=
Всем привет! Меня зовут Алексей Перепелка. Я занимаюсь разработкой сайтов c 2008 года. На этом канале я буду делиться всеми своими знаниями от верстки до создания сайта под ключ.
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Не забудь подписаться ниже:

Мой сайт: 🤍
Я в VK: 🤍
Instagram канала: 🤍
Мой Instagram: 🤍
Чат с коллегами: 🤍
Telegram-канал: 🤍
Личный Telegram: 🤍
Профиль в Linkedin: 🤍
Я в Facebook: 🤍

Перенос длинных слов.

Свойство word-wrap позволяет переносить длинные слова и прочие группы символов, неразделённые пробелами на следующую строку, если такое слово не помещается в блок с фиксировано заданной шириной.

Свойство word-wrap имеет следующие значения:

  • normal — перенос строки не происходит там, где нет пробелов или переносов строк.
  • break-word — перенос строки происходит в тех местах, где это становится необходимо.
  • inherit — наследует значение от блока родителя.

Пример:

<!DOCTYPE html><html><head><meta charset=»utf-8″><title>Перенос слова на следующую строку</title><style type=»text/css»>.blok { border: green 6px ridge;width: 220px;padding: 10px;font-size: 20px;word-wrap: break-word;}.blok1 { border: green 6px ridge;width: 220px;padding: 10px;font-size: 20px;word-wrap: normal;}</style></head><body> <div class=»blok»><p>Мы производим ультравысокотемпературнообработанное витаминизированное молоко.</p></div><br><div class=»blok1″><p>Мы производим ультравысокотемпературнообработанное витаминизированное молоко.</p></div></body></html>

смотреть пример  

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Adblock
detector