Как в css сделать обводку текста – Делаем тень к тексту на CSS. Обводка текста с помощью CSS. Как сделать несколько границ border у элемента html. Новый инструмент для решения поставленной задачи

Содержание

Как делается в css обводка текста. Делаем тень к тексту на CSS. Обводка текста с помощью CSS

Приветствую всех читателей текущей публикации! Сегодня мы разберем с вами, как создается обводка текста css-средствами. Я расскажу вам, какие на данный момент существуют инструменты для реализации обводки вокруг текстового контента, как все это работает в различных браузерах и конечно же приведу конкретные примеры. А теперь давайте приступать к делу!

Обратимся к привычным инструментам

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

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

Преимущество текущего инструмента состоит в том, что:

  • он привычен девелоперам в использовании;
  • корректно отображается во без исключения;
  • прост в использовании;
  • позволяет создавать различные эффекты для контента.

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

Пример создания черного контура

Однако в таком случае обводку практически не видно. Поэтому приготовьтесь к тому, что в данном придется создавать несколько слоев:

text-shadow: 0 0 2px #010010, 0 0 3px #010010, 1px 1px 2px #010010, 2px 2px 2px #010010, 3px 3px 1px #010010;

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

Новый инструмент для решения поставленной задачи

Среди свойств стилевых таблиц css3 появилось новое, имя которому -webkit-text-stroke . Названное свойство работает только в браузерах, созданных на движке Webkit . А значит, к сожалению, оно не будет отображаться в Firefox и Internet Explorer.

Хочу вас сразу предупредить, что текущий инструмент находится в так называемой экспериментальной стадии. Его вы не найдете даже в спецификациях W3C. Хотя ранее он был описан под наименованием text-outline, а после удален из документации.

Работать с -webkit-text-stroke достаточно просто, так как он функционирует как и border . Для установки определенного цвета к указанному выше названию добавляется -color, а для определения толщины – -width. Однако, как и в border, можно использовать сокращенный вид описания стилей. Т.е. указать вначале толщину обводки, а после – ее цвет. Для лучшего понимания материала давайте разберем пример.

Пример реализации яркого контура

Как вы видите, в этом случае обводка выглядит аккуратно и создается намного проще.

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

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

Несколько слов о генераторах

Если вы не знаете какой код стоит писать для реализации того или иного дизайна, то воспользуйтесь онлайн-генераторами. В качестве примера могу привести ссылку http://protocoder.ru/css/strokeTextGen . Перейдя по ней, вы сможете сгенерировать определенный вид контура для текста, а также в конструкторе ниже посмотреть полученный код css.

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

С уважением, Роман Чуешов

(Пока оценок нет)

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

Тонкая четкая обводка

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

Окантовка css. Как делается в css обводка текста

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .

Оформление рамок и границ HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

border-style
(border-top-style, border-right-style, border-bottom-style, border-left-style)
Значения:
noneЗначение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hiddenЭквивалентно none .
dotted
dotted
dashed
dashed
solid
solid
double
double
groove
groove
ridge
ridge
inset
inset
outset
outset
{1,4}
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style:
{border-style: solid dotted none dotted;}
initial
inherit

Синтаксис

P {border-style: solid;} p {border-top-style: solid;}

2. Цвет рамки border-color

Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.

border-color
(border-top-color, border-right-color, border-bottom-color, border-left-color)
Значения:
transparentУстанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
цветЦвет рамок задается при помощи значений свойства .
{border-color: #cacd58;}
{1,4}
Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color:
{border-color: #cacd58 #5faf8a #b9cea5 #aab238;}
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

P {border-color: #cacd58;}

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

Синтаксис

P {border-width: 2px;}

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:

Div { width: 100px; height: 100px; border: 2px solid grey; }

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

5. Задание рамки для одной границы элемента

В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width , border-style и border-color . Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.

Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .

Синтаксис

P {border-top: 2px solid grey;}

6. Внешний контур outline

Свойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border , применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей.

Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком.

Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius .

Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию.

Div { width: 100px; height: 100px; outline: #cacd58 solid 2px; }

6.1. Стиль внешнего контура outline-style

Вид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется.

Синтаксис

P {outline-style: ridge;}

6.2. Цвет внешнего контура outline-color

Цвет внешнего контура можно прописывать только при установленном значении outline-style . Не наследуется.

Синтаксис

P { outline-style: ridge; outline-color: silver; }

6.3. Толщина внешнего контура outline-width

Толщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется.

Синтаксис

P { outline-style: dotted; outline

Делаем тень к тексту на CSS. Обводка текста с помощью CSS. CSS: border. Границы элемента

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

Тонкая четкая обводка

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

Текст с обводкой

Тут видно, что блок с текстом имеет класс text-dec. Именно по нему мы будем обращаться к нашему элементу в css, применяя к нему нужные свойства. Итак, как же делается тоненькая обводка:

Text-dec{ font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black }

Зададим сразу большой размер шрифта, чтобы все было очень хорошо видно, а цвет текста – желтый, допустим. Третья строчка в нашем случае и реализует ту самую обводку.

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

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

В нашем случае мы сначала задали небольшое смещение вниз и влево, а потом вверх и вправо. В результате текст по всему своему контуру получил обведение. Если добавить к каждой тени еще и размытие в 10 пикселей, то она будет выглядеть так:

Размытая обводка

Другой подход заключается в том, чтобы вообще не задавать смещение, но определить размытие – тогда текст тоже будет как бы обведен, но не четко. Добавим такой же точно текст в html, но только стилевой класс задайте другой – text-dec2:

Text-dec2{ font-size: 50px; color: blue; text-shadow: 0 0 7px red; }

Это выглядит так:

Жирная обводка

Это реализовать труднее, так как слишком сильное смещение теней может привести к нечитаемости текста. И все же определенного эффекта добиться можно, хотя для этого придется добавить гораздо больше теней, чем в предыдущих случаях. Соответственно, добавьте в html новые текстовые фрагменты с классами text-dec3 и text-dec4 . И вот такие для них стили:

Text-dec3{ font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black, 2px 2px 0 black, -2px -2px 0 black, 3px 3px 0 black, -3px -3px 0 black, 4px 4px 0 black, -4px -4px 0 black } .text-dec4{ font-size: 50px; color: yellow; text-shadow: -1px 1px 0 black, 1px -1px 0 black, -2px 2px 0 black, 2px -2px 0 black, -3px 3px 0 black, 3px -3px 0 black, -4px 4px 0 black, 4px -4px 0 black }


Как видим, текст сохранил читаемость и при этом получил приличную черную обводку. Суть этого подхода в том, что мы постепенно добавляем новые тени, увеличивая смещение с каждым разом на 1 пиксель.

Еще более жирная обводка со всех сторон

Дальше — сложнее. Я лично не знал, как нормально реализовать обводку со всех сторон, но тут наткнулся в интернете на генератор text-shadow, который позволяет в визуальном режиме настроить тень, а потом нужно просто скопировать ее код. Вот ссылка на генератор.
С его помощью я смог сделать вот такую тень:

Код я приводить не буду, он занимает аж 50 строк Впрочем, сами посмотрите в генераторе.

CSS пока не всесилен

На этом возможности css заканчиваются. Если вам нужна красивая жирная обводка, например, как эта:
То сделайте ее в фотошопе, а сам текст придется вставить на веб-страницу в виде изображения

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

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .

Оформление рамок и границ HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

border-style
(border-top-style, border-right-style, border-bottom-style, border-left-style)
Значения:
noneЗначение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hiddenЭквивалентно none .
dotted
dotted
dashed
dashed
solid
solid
double
double
groove
groove
ridge
ridge
inset
inset
outset
outset
{1,4}
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style:
{border-style: solid dotted none dotted;}

Делаем тень к тексту на CSS. Обводка текста с помощью CSS. Как сделать несколько границ border у элемента html. Новый инструмент для решения поставленной задачи

Влад Мержевич

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование 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

Текст

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

Тиснение текста

Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).

Рис. 5. Рельефный текст

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

Пример 4. Рельефный текст

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Текст

Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.

Text-shadow: #333 -1px -1px 0, #fff 1px 1px 0;

Свечение

Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения достаточно изменить цвет тени и поставить желаемый радиус размытия. Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На рис. 6 показа

Делаем тень к тексту на CSS. Обводка текста с помощью CSS — LOCO.RU

Конечно, в Photoshop’е можно наводить красоту, но что делать если нужно сохранить именно текст, а не вставлять его красивой картинкой?

Например, заголовок для пущей индексации захотелось сделать текстом в тегах <h2> </h2>. Но при этом сохранить красивость. Вот так:

* — здесь применён ещё градиент к тексту, используя опять таки CSS. О том как это реализовать — читайте в статье — Делаем градиент к тексту, используя CSS

Итак, делаем текст с тенью, используя CSS:

Уровень 3 CSS обладает свойством ‘text-shadow’ для добавления тени на каждую букву любого текста.

 

Другой интересный пример:

 

Обводка текста с помощью CSS

Обводку текста с помощью CSS без прибегания к скриптам сделать возможно. Данный эффект можно создать с помощью свойства text-shadow. Хоть это свойство IE и не воспринимает ни в одной из своих версий – в остальных популярных браузерах описанный рецепт будет замечательно работать.

 

Рассмотрим приведённый ниже код:

 

Пример №1


h2{text-shadow: red 1px 0px, red 1px 1px, red 0px 1px, red -1px 1px, red -1px 0px, red -1px -1px, red 0px -1px, red 1px -1px;}

Первый параметр свойства text-shadow устанавливает цвет тени, второй смещение тени по горизонтали относительно текста, третий смещение по вертикали. При указании смещения тени во всех направлениях вокруг текста на 1 пиксель по очереди и получается эффект обводки.

 

Пример обводки №1

 

Чтобы сделать обводку более насыщенной, можно применить четвёртый параметр text-shadow, который отвечает за радиус размытия тени:

 

Пример №2


h2{text-shadow: red 1px 0px, red 1px 1px, red 0px 1px, red -1px 1px, red -1px 0px, red -1px -1px, red 0px -1px, red 1px -1px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px;}

 

Пример обводки №2

 

Если Вы заметили, свойство «red 0 0 3px» несколько раз повторяется. Именно в этом и скрывается эффект насыщенности. Для достижения более чёткого отображения обводки свойство можно добавлять с другими параметрами большое количество раз. Единственным недостатком является то, что это может сильно замедлить работу браузера на слабых компьютерах.

Контур для текста — Xiper.net

Автор: Евгений Рыжков и Анна Лысак Дата публикации: 06.07.2011

Задача

Сделать контур тексту средствами CSS.

Решение

На момент написания этого материала только разработчики Webkit предусмотрели такую возможность — CSS свойство -webkit-text-stroke. Чтобы нам сделать белый текст с черным контуром, достаточно двух строк кода:


color: white;
-webkit-text-stroke: 1px black;

Т.к. контур появится только у webkit браузеров, остальным незачем цвет текста сливать с цветом фона. Для этого предусмотрено еще одно свойство — -webkit-text-fill-color:


color: white; /* цвет текста для всех браузеров */
-webkit-text-fill-color: white; /* цвет текста для webkit */
-webkit-text-stroke: 1px black;

Само собой не подходит вариант, который работает только в паре браузеров, поэтому для остальных браузеров будет все немного сложнее. Для эмуляции контура будем использовать text-shadow:


	color: #fff;
	text-shadow:
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;

Данный прием сработает во всех распространенных ныне браузеров, кроме IE8 и ниже. Для них можно либо сделать заголовки по проще (без контура), либо использовать картинки, или же применить небольшой скрипт + несколько дополнительных CSS правил для эмуляции тени. Ниже приведенный код подключаем только для IE8 и версий ниже:


h2 {
	position: relative;
}
h2 span {
	position: absolute;
	z-index: -1;
	color: #000;
}
.h2 {
	left: -1px;
	top: -1px;
}
.h3 {
	left: 1px;
	top: -1px;
}
.h4 {
	left: -1px;
	top: 1px;
}
.h5 {
	left: 1px;
	top: 1px;
}

function stroke() {

	var header = document.getElementById("strokeHeader"),
		text = header.innerText,
		strokeIE = 	text+
					&<span><+text+&</span>&+
					&<span>&+text+&</span>&+
					&<span>&+text+&</span>&+
					&<span>&+text+&</span>&;
	header.innerHTML = strokeIE;

}

window.onload = stroke;

Демо пример. Проверено в:

  • IE 6-8
  • Firefox 4
  • Opera 11
  • Safari 5
  • Chrome

Недостатки

  • для «особых» браузеров нужен Javascript;
  • кроссбраузерно можно сделать контур только в 1px;
  • начертание в разных браузерах немного отличается.

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

И на последок более симпатичный пример.

P.S.

Интересно как на такое решение отреагируют поисковики, ведь цвет текста (color) совпадает с цветом фона (background-color).

Материалы

По теме

» Обводка текста при помощи HTML и CSS Высокотехнологичный блог

24 Авг
2011



Привет всем блогажителям. Начал я как-то теплым летним вечером рисовать дизайн сайта, попробовал применить однопиксельную обводку текста, смотрелось довольно миленько, решил оставить, наивно думая что большинство последних версий браузеров будут иметь какое-то черновое CSS3 свойство.
Когда дошло дело до верстки того самого элемента, текст в котором нужно было обвести, выяснилось, что text-stroke доступен только в webkit’ах, а это всего-лишь 20-30% браузеров.
Решение проблемы было придуманно довольно быстро: использовать множественную тень.
Если вам стало интересно то добро пожаловать под кат.
Для множественной тени (так-же применимо в современных браузерах и к background) следует описать все тени (я их использовал 4) через запятую, следующим образом:
body{
text-shadow: #000 1px 0 0px, #000 0 1px 0px, #000 -1px 0 0px, #000 0 -1px 0px;
}

в результате получаем правую, нижнюю, левую и верхнюю тени
text-shadow имеет следующий синтакс: #цвет сдвиг_по_х сдвиг_по_у размер_размытости; являеться CSS2.1 свойством.
Для большей наглядности используем сдвиг побольше и раскрасим тень в разные цвета:
body{
color: #000;
text-shadow: text-shadow: #f00 40px 0px 0px, #0f0 0px 20px 0px, #00f 0px -20px 0px, #f0f -40px 0px 0px;
}

Получим следующий результат:

Также можно поиграться с размером шрифта, сдвигом, размытием для получения желаемого результата. К примеру для получения изображения в начале поста использовался следующий вариант:
body{
font: 40px Tahoma;
color: #e7e7e7;
text-shadow: #000 2px 0px 2px, #000 0px 2px 2px, #000 0px -2px 2px, #000 -2px 0px 2px;}

Надеюсь эта информацию будет кому-то полезной.
Файл с примерами

загрузка…

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *