Как сделать реальную тень для текста

Всем доброго времени на fast-wolker.ru! Создание текстовых эффектов для различных целей занятие не только увлекательное, но и полезное особенно для тех, кто ведет в интернете свои странички. Ведь придание тексту необычного вида всегда будет привлекать посетителей.

В этом уроке мы разберем  на примерах, как сделать тень для текста. Я предложу два разных варианта с разным изображением тени. Может у кого-то есть свои идеи и наработки,  тогда поделитесь ими в х.

Вариант создания  тени текста в фотошопе № 1

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

Как сделать реальную тень для текста

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

Как сделать реальную тень для текста

Затем, для лучшего отображения будущей тени создадим тексту обводку. Для этого зажимаем клавишу ctrl и кликаем по иконке текстового слоя в окне слоев. В результате появится выделение текста.

  • Как сделать реальную тень для текста
  • Затем создаем новый слой. В «палитре слоев»  (в самом низу) кликаем на иконку нового слоя…
  • Как сделать реальную тень для текста

Теперь необходимо сделать обводку. Для этого идем в меню «редактирование» и там выбираем «выполнить обводку«.

Как сделать реальную тень для текста

Выбираем любой цвет. Остальные параметры остаются без изменений.

Как сделать реальную тень для текста

Далее, выбираем слой с текстом и дублируем его. Затем выбираем основной текстовый слой, два раза кликаем по нему, вызывая окно свойств слоя. Выбираем пункт «наложение цвета«. Устанавливаем черный цвет.

  1. Как сделать реальную тень для текста
  2. Далее слой «основной слой » смещаем немного в сторону и вниз, пока он не выйдет из-за букв, как тень.
  3. Как сделать реальную тень для текста

Делаем это при помощи стрелок на клавиатуре. Тень можно сделать и пообъемнее. Для этого слой текста, (который играет роль тени) дублируем несколько раз, каждый раз смещая новый слой в том направлении, в котором смещали изначально.

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

Как сделать реальную тень для текста

Теперь все слои с тенью выделяем и объединяем их вместе. Для этого в меню слои выбираем пункт «объединить слои«.

Как сделать реальную тень для текста

Далее, можно немного размыть тень. Заходим в меню «фильтр», выбираем «размытие-размытие по гауссу«.

  • В открывшемся окне выбираем значение 2.
  • Что бы тень не выглядела слишком ярко немного снижаем уровень ее прозрачности.
  • В результате получаем готовый текст с тенью.

Вариант создания тени текста в фотошоп № 2

Все так же, создаем документ, пишем текст. Затем создаем слой-копию, а оригинал переименовываем в «Тень». Теперь слой «Тень» надо растрировать. Идем меню «слои«-«растрировать«-«слои«.

  1. Затем идем в меню «редактирование» и там выбираем «трансформирование-масштабирование«.

Уменьшаем размер букв по высоте, перемещая за серединную точку текст вниз, примерно процентов на 60. В результате увидите задний текст и передний, который стал ниже. В центре находится опорная точка, ее смещаем вниз до центральной нижней.

  • Далее, идем вновь в  «редактирование-трансформирование«, но выбираем уже «перспектива«:

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

После этого заливку слоя «Тень» надо понизить до 0%. Далее, вызываем окно свойств слоя, два раза кликнув по нему. Здесь выбираем пункт «градиентная заливка» и применяем к слою «Тень» любой градиент.

Практически тень готова, но чтобы она не выглядела так резко — ее надо смягчить. Для этого воспользуемся фильтром «размытие по гауссу«.

  1. В установках ставим такое значение, какое устраивает. В конечном итоге получаем следующее:

Получилось довольно неплохо. Это вариант, когда тень лежит за текстом, но если нужно тень положить перед текстом? Делаем все так же.

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

  • В результате увидим один текст на другом, но в перевернутом виде.

Идем в меню «трансформирование-масштабирование«. Появится рамка, за которую перемещаем вниз перевернутый слой и ставим его точно под буквы оригинала.

  1. Затем здесь же выбираем пункт «перспектива» и раздвигаем за любой угол тень в стороны.

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

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

Вот и все, тень готова. Аналогично можно сделать любую тень в любом направлении и любого цвета. Успехов в творчестве!

Источник: https://fast-wolker.ru/kak-sdelat-ten-teksta-fotoshop.html

Тень текста в фотошопе

Пожалуй, один из самых полезных навыков в фотошопе – создание красивых надписей. Вариаций сотни. Но некоторые основополагающие вещи встречаются практически везде.

Одна из таких вещей – тень текста. Уж она-то точно используется практически везде. Вариантов ее создания не так уже и много (я имею ввиду самые простые).

Наверное, урок, в котором будет освещено просто создание тени будет не слишком интересен. Потому предлагаю несколько модернизировать его, создав красивую объемную надпись.

Для начала, создадим рабочую область и зальем ее градиентом. Если вы хотите воспроизвести тот же градиент, приведу настройки и его цвета: #596178 #474c5f #23262f #1b1e25.

Как сделать реальную тень для текста Как сделать реальную тень для текста

Пишем текст. Для текста следует выбрать объемный шрифт, дабы эффект получился наглядным. Я использовала шрифт Humnst777 Blk BT. К шрифту применила градиент (цвета: #b2c9ff #7ba3ff). Совету применить именно линейный градиент с тем же углом наклона, что был использован при создании рабочей области.

Как сделать реальную тень для текста

Предлагаю сделать наш текст несколько интереснее, создав градиентную обводку вокруг букв.

Теперь, заживая ctrl, кликаем по слою с текстом в окне слоев.

Как сделать реальную тень для текста Как сделать реальную тень для текста

Как видите, на тексте появилось выделение.

Нажимаем комбинацию клавиш ctrl+shift+n чтобы создать новый слой.

Сделаем обводку выделения. На верхней панели ищем команду «редактировать» – «обводка». Накладываем любой цвет, потому как впоследствии мы все равно перекроем его градиентом.

Как сделать реальную тень для текста Как сделать реальную тень для текста

Цвета для градиента: #ffffff #4b80f8. Что имеем в итоге:

Как сделать реальную тень для текста

А теперь добавим к тексту тень. В окне слоев выбираем слой с текстом. И дублируем его.

Как сделать реальную тень для текста

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

Как сделать реальную тень для текста

Теперь смещаем текст вниз и вправо. Получилась своеобразная тень.

Но я предлагаю сделать ее интереснее. Продублируйте слои с «тенью» несколько раз . Каждую смещайте вниз и вправо.

Добиваемся вот такого эффекта. Тень от текста стала объемнее.

  • О окне слоем выделяем все слои с тенью и объединяем в один при помощи комбинации клавиш ctrl+e.
  • Теперь размоем тень.
  • Что получилось:
  • Понижаем уровень прозрачности текста.

Все! Готово!

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

Источник: http://photoshop-work.ru/ten-teksta-v-fotoshope

12 эффектов для текста с использованием теней CSS

  • Главная»
  • Уроки»
  • CSS»
  • 12 эффектов для текста с использованием теней CSS

Типографика является самой любимой игрушкой веб дизайнеров.

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

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

Свойство 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);
}
Как сделать реальную тень для текста

Четкая тень

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

Читайте также:  Улучшение рисунка с помощью применения кривых в photohop

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);
Как сделать реальную тень для текста

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

Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.

В примере используется четыре тени, все смещены вниз на разные дистанции и размыты.

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);
Как сделать реальную тень для текста

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

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

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;
Как сделать реальную тень для текста

Свечение

text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
Как сделать реальную тень для текста

Супергерой

text-shadow: -10px 10px 0px #00e6e6,
-20px 20px 0px #01cccc,
-30px 30px 0px #00bdbd;
Как сделать реальную тень для текста

Множественные источники света

text-shadow: 0px 15px 5px rgba(0,0,0,0.1),
10px 20px 5px rgba(0,0,0,0.05),
-10px 20px 5px rgba(0,0,0,0.05);

Мягкое тиснение

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);

Заключение

Как и большинство эффектов CSS, тени очень легко реализовать. Но сочетание простых действий могут в результате привести к поразительным эффектам.

  • Небольшой эффект с интерактивной анимацией букв.
  • Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
  • Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
  • Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
  • Экспериментальный скрипт раскрывающейся навигации.
  • CSS (55)
  • Изображения (40)
  • Разное (53)
  • Подобрать хостинг
  • Источник: https://ruseller.com/lessons.php?id=1285

    2.18. CSS3-оформление текста

    Как сделать реальную тень для текста

    Модуль содержит возможности CSS, относящиеся к оформлению текста, такие как подчеркивание, тени текста, а также акценты в тексте восточно-азиатских языков.

    Свойства для оформления текста

    1. Оформление линии: подчеркивание, обводка и зачеркивание

    Подчеркивание, обводка и перечеркивающие линии отображаются только для незамещаемых блоков уровня строки (display: inline) и отображаются по всему тексту, включая пробелы между символами и словами, за исключением отступов в начале и конце строки.

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

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

    Однако, спецификация не предписывает конкретный метод для «следования форме» глифа, оставляя это на усмотрение браузеру.

    Как сделать реальную тень для текстаРис. 1. Прерывание линии подчеркивания

    1.1. Вид линии оформления: свойство text-decoration-line

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

    IE:
    Edge:
    Firefox: 36, 35 -moz-
    Chrome: 57
    Safari: 12.1, 7.1 -webkit-
    Opera: 44
    iOS Safari: 8 -webkit-
    UC Browser for Android: 11.8
    Chrome for Android: 73
    Samsung Internet: 7.2

    Свойство text-decoration-line определяет, какой тип линии, если таковые имеются, добавляется к элементу.

    Свойство не наследуется.

    text-decoration-line
    Значения:
    none Ни оформляет, ни запрещает оформление текста. Значение по умолчанию.
    underline Подчёркивает каждую строку текста.
    overline Каждая строка текста имеет линию над ней (то есть на противоположной стороне от подчеркивания).
    line-through Добавляет линию через середину каждой строки текста.
    inherit Наследует значение свойства от родительского элемента.
    initial Устанавливает значение свойства в значение по умолчанию.

    Синтаксис

    text-decoration-line: none;
    text-decoration-line: underline;
    text-decoration-line: overline;
    text-decoration-line: line-through;
    text-decoration-line: blink;
    text-decoration-line: underline overline;
    text-decoration-line: overline underline line-through;
    text-decoration-line: inherit;
    text-decoration-line: initial;

    1.2. Стиль линии оформления: свойство text-decoration-style

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

    IE:
    Edge:
    Firefox: 36, 35 -moz-
    Chrome: 57
    Safari: 12.1, 7.1 -webkit-
    Opera: 44
    iOS Safari: 8 -webkit-
    UC Browser for Android: 11.8
    Chrome for Android: 73
    Samsung Internet: 7.2

    Свойство text-decoration-style определяет стиль линий, нарисованных для оформления текста, указанного в элементе. Значения имеют то же значение, что и для свойства border-style.

    Свойство не наследуется.

    text-decoration-style
    Значения:
    solid Добавляет отрезок простой линии. Значение по умолчанию.
    double Две параллельные сплошные линии с небольшим промежутком между ними.
    dotted Последовательность круглых точек.
    dashed Последовательность прямоугольных штрихов.
    wavy Указывает на волнистую линию.
    inherit Наследует значение свойства от родительского элемента.
    initial Устанавливает значение свойства в значение по умолчанию.

    Синтаксис

    text-decoration-style: solid;
    text-decoration-style: double;
    text-decoration-style: dotted;
    text-decoration-style: dashed;
    text-decoration-style: wavy;
    text-decoration-style: inherit;
    text-decoration-style: initial;

    1.3. Цвет линии оформления: свойство text-decoration-color

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

    IE:
    Edge:
    Firefox: 36, 35 -moz-
    Chrome: 57
    Safari: 12.1, 7.1 -webkit-
    Opera: 44
    iOS Safari: 8 -webkit-
    UC Browser for Android: 11.8
    Chrome for Android: 73
    Samsung Internet: 7.2

    Свойство text-decoration-color определяет цвет линии оформления текста, установленный для элемента с text-decoration-line.

    Свойство не наследуется.

    Значения:
    цвет Значение принимает все форматы цвета свойства color. Значение по умолчанию currentColor.
    inherit Наследует значение свойства от родительского элемента.
    initial Устанавливает значение свойства в значение по умолчанию.

    Синтаксис

    text-decoration-color: currentColor;
    text-decoration-color: salmon;
    text-decoration-color: #00ff00;
    text-decoration-color: rgba(255, 128, 128, 0.5);
    text-decoration-color: transparent;
    text-decoration-color: inherit;
    text-decoration-color: initial;

    1.4. Краткая запись свойств линии оформления: свойство text-decoration

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

    IE:
    Edge:
    Firefox: 36, 35 -moz-
    Chrome: 57
    Safari: 12.1, 7.1 -webkit-
    Opera: 44
    iOS Safari: 8 -webkit-
    UC Browser for Android: 11.8
    Chrome for Android: 73
    Samsung Internet: 7.2

    Свойство text-decoration является краткой формой записи свойств text-decoration-line text-decoration-style text-decoration-color в одном объявлении.

    Пропущенные значения устанавливаются на их начальные значения. Значение по умолчанию text-decoration: none solid currentColor;. Свойство не наследуется.

    Тем не менее, стиль всех линий оформления текста должен быть одинаковый для одного элемента.

    1.5. Расположение линии оформления: свойство text-underline-position

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

    IE:
    Edge: 12
    Firefox:
    Chrome: 71
    Safari:
    Opera:
    iOS Safari:
    UC Browser for Android: ?
    Chrome for Android: 71
    Samsung Internet:

    Свойство text-underline-position устанавливает положение линии подчеркивания, указанного в элементе.

    Свойство наследуется.

    Значения:
    auto Браузер может использовать любой алгоритм для определения позиции подчеркивания, тем не менее линия должна быть размещена на или под базовой линией текста. Значение по умолчанию.
    under Подчеркивание расположено под текстовым содержимым элемента. В этом случае подчеркивание обычно не пересекает нижний выносной элемент. Это значение можно комбинировать с left или right, если конкретная сторона предпочтительна в вертикальных типографских режимах.
    left В вертикальных типографских режимах подчеркивание выравнивается по левому краю текста. Тем не менее, это значение интерпретируется как under.
    right В вертикальных типографских режимах подчеркивание выравнивается по правому краю текста. Тем не менее, это значение интерпретируется как under.
    inherit Наследует значение свойства от родительского элемента.
    initial Устанавливает значение свойства в значение по умолчанию.

    Синтаксис

    text-underline-position: auto;
    text-underline-position: under;
    text-underline-position: left;
    text-underline-position: right;
    text-underline-position: under left;
    text-underline-position: under right;
    text-underline-position: inherit;
    text-underline-position: initial;
    Как сделать реальную тень для текстаРис. 2. Подчеркивание текста с обеих сторон в вертикальных типографских режимах с помощью значений left и right

    2. Тень текста: свойство text-shadow

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

    IE: 10
    Edge: 12
    Firefox: 3.5
    Chrome: 4
    Safari: 4
    Opera: 10
    iOS Safari: 3.2
    UC Browser for Android: 11.8
    Chrome for Android: 73
    Samsung Internet: 4

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

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

    Также, с помощью тени можно сделать текст более читаемым, если контраст между цветом текста и фоном невелик.

    Каждая тень применяется как к самому тексту, так и к элементам его оформления (свойство text-decoration). Одновременно можно задавать несколько теней, указывая их через запятую. Тени накладываются друг на друга, но не перекрывают сам текст. Первая тень всегда расположена сверху над остальными тенями. Свойство наследуется.

    Каждая тень определяется двумя или тремя значениями длины и необязательным цветом. Допустимы длины, равные 0.

    Свойство не наследуется.

    Как сделать реальную тень для текстаРис. 3. Синтаксис свойства text-shadow

    text-shadow
    Значения:
    x-offset Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево.
    y-offset Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх.
    blur Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени.
    цвет Задает цвет тени. Если цвет отсутствует, используемый цвет берется из свойства color.
    none Значение по умолчанию, означает отсутствие тени текста. Убирает тень элемента из группы элементов с заданным свойством.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента.
    Читайте также:  Удаление прыщей, пятен и угрей с лица с помощью photoshop

    В отличие от box-shadow, текстовые тени не обрезаются и могут отображаться, если текст частично прозрачен. Как и box-shadow, текстовые тени не влияют на макет и не вызывают прокрутку или увеличение размера прокручиваемой области.

    Синтаксис

    text-shadow: 2px 2px 4px pink;
    text-shadow: #fc0 1px 0 10px;
    text-shadow: 5px 5px #4D4644;
    text-shadow: blue 2px 5px;
    text-shadow: 5px 10px;
    text-shadow: inherit;
    text-shadow: initial;

    2.1. Примеры тени текста

    Плакатная тень

    Тень текста

    .text-shadow-1 {
    background: #77F7DE;
    color: white;
    text-shadow: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 white, 5px 5px 0 white, 6px 6px 0 white;
    letter-spacing: 0.1em;
    }

    3D тень

    Тень текста

    .text-shadow-2 {
    background: linear-gradient(-45deg, #FEE864, #F5965E);
    color: #f4f4f4;
    text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4);
    }

    Тень-текст

    Тень текста

    .text-shadow-3 {
    background: #FFE6DB;
    color: #FFE6DB;
    letter-spacing: .1em;
    text-shadow: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142, .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1);
    }

    Ретро-тень

    Тень текста

    .text-shadow-4 {
    color: #FB631E;
    letter-spacing: .1em;
    text-shadow: 4px 4px white, 6px 6px #D7CC88;
    }

    Многослойная тень

    Тень текста

    .text-shadow-5 {
    background: #f1f1f1;
    color: #fcc105;
    letter-spacing: .1em;
    text-shadow: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2);
    }

    Прозрачная тень

    Тень текста

    .text-shadow-6 {
    color: transparent;
    text-shadow: 4px -4px rgba(157, 217, 227, .7), -2px -2px rgba(159, 141, 105, .7), 0 2px rgba(254, 216, 21, .7);
    }

    Тень-зебра

    Тень текста

    .text-shadow-7 {
    background: #E02A91;
    color: white;
    text-shadow: 2px 2px black, 4px 4px white, 6px 6px black, 8px 8px white, 10px 10px black, 12px 12px white, 14px 14px black, 16px 16px white, 18px 18px black, 20px 20px white, 22px 22px black, 24px 24px white, 26px 26px black;
    }

    Неоновая тень

    Тень текста

    .text-shadow-8 {
    background: black;
    color: white;
    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px crimson, 0 0 35px crimson, 0 0 40px crimson, 0 0 50px crimson, 0 0 75px crimson;
    }

    Тень-обводка

    Тень текста

    .text-shadow-9 {
    color: white;
    text-shadow: 1px 1px #732372, 1px -1px #732372, -1px 1px #732372, -1px -1px #732372, 3px 3px 6px rgba(0,0,0,.5);
    }

    Стиль LETTERPRESS

    Тень текста

    .text-shadow-10 {
    background: #F9C941;
    color: #F9C941;
    letter-spacing: 2px;
    text-shadow: 1px 1px #F3E7CF, -1px -1px #56433D;
    }

    Стиль ТВИТТЕР

    Тень текста

    .text-shadow-11 {
    color: #3CF;
    text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;
    }

    Тень с обводкой

    Тень текста

    .text-shadow-12 {
    color:#E34C38;
    text-shadow: 1px 1px white, 2px 2px white, -1px -1px white, -2px -2px white, -1px 1px white, 1px -1px white, -2px 2px white, 2px -2px white, -3px -3px 4px rgba(0,0,0,.3), -3px 3px 4px rgba(0,0,0,.3), 3px 3px 4px rgba(0,0,0,.3), 3px -3px 4px rgba(0,0,0,.3);
    }

    2.2. Эффекты тени при наведении

    See the Pen ENjrvy by Elena (@html5book) on CodePen.

    See the Pen yVYOdY by Elena (@html5book) on CodePen.

    2.3. Анимация тени

    • See the Pen jVbqZo by Elena (@html5book) on CodePen.
    • See the Pen NbGNBm by Elena (@html5book) on CodePen.
    • See the Pen dOYMrd by Elena (@html5book) on CodePen.
    • По материалам CSS Text Decoration Module Level 3

    Источник: https://html5book.ru/css3-oformlenie-teksta

    CSS text-shadow: текст с тенью. Несколько теней текста — учебник CSS

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

    Задать в CSS тень текста можно с помощью свойства text-shadow, которое поддерживается всеми браузерами, кроме Internet Explorer версии 9 и ранее. Также есть проблемы с Opera Mini – этот браузер лишь частично поддерживает свойство. Ниже показан пример записи стиля и значений свойства:

    h1 {
    text-shadow: 3px 5px 6px #6C9;
    }

    Как видно, мы указали целых четыре значения через пробел. Пройдемся по порядку:

    • 3px – первое значение отвечает за смещение тени по оси X (вправо, влево). Положительным значением тень сдвигается вправо, а отрицательным – влево.
    • 5px – второе значение отвечает за смещение тени по оси Y (вниз, вверх). Положительным значением тень сдвигается вниз, а отрицательным – вверх.
    • 6px – третье значение отвечает за радиус размытия тени. Этот параметр указывать необязательно. По умолчанию размытие равняется 0 пикселей, что делает тень четкой и неразмытой.
    • #6c9 – четвертое значение отвечает за цвет тени. Этот параметр указывать необязательно. По умолчанию цвет тени устанавливается такой же, как у текста, к которому применяется стиль.

    Как сделать реальную тень для текста

     
    Как выглядит тень в браузере (скриншот):

    Как сделать реальную тень для текстаСкриншот: текст с тенью, CSS

    Несколько теней CSS для текста

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

    Пример:

    h1 {
    text-shadow: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7;
    }

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

    Как сделать реальную тень для текстаСкриншот: несколько теней для текста CSS

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

    Как сделать реальную тень для текстаСкриншот: объемная тень текста в CSS

    Далее в учебнике: как задать интервалы в CSS между символами, словами и строками.

    Источник: https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/text-shadow

    text-shadow

    Internet Explorer Chrome Opera Safari Firefox Android iOS
    10.0 2.0+ 9.5+ 1.1+ 3.5+ 1.0+ 1.0+
    CSS 1 CSS 2 CSS 2.1 CSS 3

    Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.

    Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line.

    Синтаксис

    text-shadow: none | тень [,тень]*
    где тень:

    Значения

    none Отменяет добавление тени. цвет Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр. радиус Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.

    Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.

    Пример

    HTML5CSS2.1CSS3IECrOpSaFx

    В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!

    Результат примера показан на рис. 1.

    Как сделать реальную тень для текста

    Рис. 1. Вид тени в браузере Safari

    Браузеры

    Opera поддерживает максимум 6–9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera версии 9.5–10 использует отображение нескольких теней, как в CSS2.

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

    Браузер Internet Explorer понимает свойство text-shadow только с версии 10.0. Взамен используется свойство filter: Shadow(параметры). К примеру, следующая конструкция задает цвет тени (#666666), её направление (45° от вертикали) и величину смещения (4 пиксела).

    filter: Shadow(Color=#666666, Direction=45, Strength=4);

    Источник: http://htmlbook.ru/css/text-shadow

    Css тень текста генератор

    Тень текста

    Готовый код текста CSS

    Задание тени тексту может понадобится для добавления акцента тексту для читателя. Во вторых это красивый эффект контраста тени и фона лендинга. Разберем подробно как сделать тень текста css генератором.

    1. Зададим цвет тени в формате RGB.
    2. Добавим отступы тени от текста.
    3. Размоем тень.
    4. Установим прозрачность от 0.0 до 1.0.
    5. Зададим направление тени от 0 до 359 градусов по кругу.

    Копируем в буфер готовый код тени CSS.

    Как сделать реальную тень для текста

    Читать как сделать неоновый, 3д, прозрачный и выпуклый текст читать тут.

    Красивые примеры css тень текста

    Рассмотрим несколько примеров тени.

    3D тени у текста

    CSS тень текста

    Код 3D тень у текста

    .text-shadow { color: #b641b0; text-shadow:0px 0px 0 rgb(116,14,116),-1px 1px 0 rgb(109,7,109), -2px 2px 0 rgb(101,-1,101),-3px 3px 0 rgb(94,-8,94),-4px 4px 0 rgb(86,-16,86), -5px 5px 0 rgb(78,-24,78),-6px 6px 0 rgb(71,-31,71),-7px 7px 0 rgb(63,-39,63), -8px 8px 0 rgb(55,-47,55),-9px 9px 0 rgb(48,-54,48),-10px 10px 0 rgb(40,-62,40), -11px 11px 0 rgb(33,-69,33),-12px 12px 0 rgb(25,-77,25), -13px 13px 0 rgb(17,-85,17), -14px 14px 13px rgba(0,0,0,0.25),-14px 14px 1px rgba(0,0,0,0.5),0px 0px 13px rgba(0,0,0,.2);

    }

    Прозрачная тень текста css

    Прозрачная

    Читайте также:  Как отформатировать карту памяти на фотоаппарате или компьютере

    Код прозрачной тени

    .text-shadow { background: MistyRose; color: transparent; text-shadow: 5px -5px rgba(157, 215, 227, .7), -2px -2px rgba(159, 139, 105, .7), 0 2px rgba(254, 216, 21, .7);

    }

    Неоновая тень текста css

    Неоновая

    Код неоновой тени

    .text-shadow { color:white; text-shadow:0 0 11px #fff, 0 0 22px #00d2ff, 0 0 33px #00d2ff, 0 0 44px #00d2ff, 0 0 55px #00d2ff, 0 0 66px #00d2ff, 0 0 77px #00d2ff;

    }

    Выпуклая тень CSS текста

    Выпуклая

    Код выпуклой тени

    .text-shadow { background:SaddleBrown; color:SaddleBrown; text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.6);

    }

    Тень текста радуга

    Радужнаяf

    Код радужной тени

    .text-shadow { color:Crimson; text-shadow: 1px 1px Salmon, 2px 2px Salmon, 3px 3px Salmon, 4px 4px Salmon, 5px 5px Salmon, 6px 6px OrangeRed, 7px 7px OrangeRed, 8px 8px OrangeRed, 9px 9px OrangeRed, 10px 10px OrangeRed, 11px 11px Yellow, 12px 12px Yellow, 13px 13px Yellow, 14px 14px Yellow, 15px 15px Yellow, 16px 16px SpringGreen, 17px 17px SpringGreen, 18px 18px SpringGreen, 19px 19px SpringGreen, 20px 20px SpringGreen, 21px 21px Cyan, 22px 22px Cyan, 23px 23px Cyan, 24px 24px Cyan, 25px 25px Cyan;

    }

    Вырезаная тень текста css

    Вырезанная

    Код вырезанной тени css

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

    }

    Обтекаемая css тень текста

    Обтекаемая

    Код обтекаемой тени текста

    .text-shadow { text-shadow: 0 2px 2px rgba(0, 0, 30, 0.6); color: rgba(102, 0, 102, 0.5);

    }

    Тень текста css из двух цветов

    Два цвета

    Код тени текста два цвета

    .text-shadow { text-shadow: 3px 3px 10px Fuchsia, -3px -3px 10px DeepSkyBlue; color: MidnightBlue;

    }

    Ретро тень css

    Ретро стиль

    Код ретро тени текста

    .text-shadow { color: PeachPuff; text-shadow: 5px 5px 0px DarkOrange, 7px 7px 0px Tomato;

    }

    Огненная тень текста css

    Огненная

    Код огненной тени текста

    .text-shadow { background-color: DimGray; color: LightYellow; text-shadow: 0 0 20px #fefcc8, 10px -10px 30px #feec86, -20px -20px 40px #ffae35, 20px -40px 50px #ec750c, -20px -60px 60px #cd4806, 0 -80px 70px #973717, 10px -90px 80px #452b0e;

    }

    Слоеная тень текста

    Слоеная тень

    Код слоенной тени текста css

    .text-shadow { color: Purple; text-shadow: 0 1px 0 DarkOliveGreen, 0 2px 0 DarkOrchid, 0 3px 0 LightSalmon, 0 4px 0 Aquamarine, 0 5px 0 Magenta, 0 6px 0 Goldenrod, 0 7px 0 Brown, 0 8px 7px LightSeaGreen;

    }

    Источник: https://sdelatlending.ru/css-ten-teksta-generator

    Добавляем тень для текста в Фотошоп

    В этом уроке вы узнаете, как добавить тень от букв, используя такие инструменты программы Photoshop как Трансформация (Тransform tool) и стиль слоя “Наложение градиента” (Gradient Overlay).

    Уметь создавать тени в Photoshop, очень важный навык, который пригодится вам во многих сферах цифрового искусства.

    Данный урок не займет у вас много времени, но полученные навыки вы сможете успешно применять к различным объектам. Урок простой и больше подойдет для начинающих осваивать программу Photoshop.

    Начнем!

    Шаг 1

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

    1) Источник света.Прежде чем работать с тенью вы должны определить, либо выбрать источник света. Это может быть как один, так и несколько источников света. Каждый источник света создает тень для всех окружающих предметов.

    2) Характеристики света.Прежде чем приступить к работе, вы должны обратить внимание на направление света, расстояние источника света от объекта, интенсивность света, и так далее.

    Давайте поэкспериментируем на простом примере.Создайте новый документ любого размера. Залейте фоновый слой цветом # a59d87. Поверх фонового создайте новый слой и напишите произвольный текст. Цвет для шрифта используйте # e4ddc6.

    Как вы видите – текст и фон, однородные по цвету, не имеют переходов, а значит, мы можем представить, что на данном этапе источник света отсутствует.

    Шаг 2

    Рассмотрим первый вариант, в котором источник света расположен по направлению к тексту (представим что свет падает от зрителя на текст).Запомните: интенсивность источника света и расстояние объекта от источника, определяют длину и насыщенность отбрасываемой тени!

    Изменим фон, согласно выбранному освещению. Встаньте на фоновый слой, разблокируйте его, перейдите к Стиль слоя (Layer Style) и добавьте Наложениеградиент (Gradient Overlay). Настройки можно применить такие , как показаны на рисунке ниже. Так же измените цвет текста – сделайте его на 1-3 тона светлее.

    Примечание переводчика: для того что бы перейти к настройкам “Стиль слоя” сделайте двойной щелчок левой клавишей мыши по слою.

    Для создания тени скопируйте текстовый слой. Переименуйте слой-оригинал в “Тень”. Растрируйте текстовый слой “Тень”. Активируйте инструмент Трансформирование (Тransform tool) и уменьшите размер букв на 60% по высоте. Опорную точку при масштабировании установите как показано на скриншоте.

    Перейдите к Редактирование – Трансформирование – Перспектива (Edit – Transform -Perspective Tool). Исказите тень так, что бы она лежала на поверхности.

    Понизьте заливку (fill) слоя “Тень” до 0%. Перейдите к Стиль слоя (Layer Style) и добавьте к слою “Тень” Наложение градиента (Gradient Overlay).

    Для того что бы тень выглядела более естественно, сделаем ее мягче. Перейдите к Фильтр – Размытие – Размытие по Гауссу (Filter – Blur – Gaussian Blur). Так же вы можете подкорректировать фон.

    Если вы считаете, что фон слишком светлый (или темный), достаточно встать на фоновый слой, перейти к параметрам Стиль слоя и поэкспериментировать с непрозрачностью наложенного градиента.

    Тень готова!

    Шаг 3

    Рассмотрим второй вариант. Представим, что источник света расположен за текстом.Встаньте на фоновый слой и перейдите к параметрам Стиль слоя – Наложение градиента (Layer Style- Gradient Overlay). Мы будем использовать градиент, тот же что и в предыдущем варианте, все что нужно сделать это поставить галочку “Инверсия” (Reverse).

    Приступим к добавлению тени. Скопируйте текстовый слой. Переименуйте слой-оригинал в “Тень”. Растрируйте слой-оригинал. Перейдите к Редактирование – Трансформирование – Отразить по вертикали (Edit – Transform -Perspective Tool – Flip Vertical).

    Далее, повторите действия шага №2:-понизьте заливку (fill) слоя “Тень” до 0%- перейдите к Стиль слоя (Layer Style)- добавьте Наложение градиента (Gradient Overlay)- смягчаем тень используя Размытие по Гауссу (Gaussian Blur)Встаньте на текстовый слой-оригинал и добавьте к нему Стиль слоя –  Наложение градиента (Layer Style- Gradient Overlay), для того что бы затемнить нижнюю часть букв.

    Как результат, вы получите похожее изображение:

    Мы рассмотрели только два варианта освещения. Конечно свет может распространяться из различных точек, к примеру, из правого угла. В этом случае все, что вам нужно сделать, это исказить тень, воспользовавшись инструментами Трансформирования (Наклон, Перспектива, Искажение (Skew, Perspective, Distort)).

    На этом урок окончен. Удачной вам практики!

    Поделиться своей работой и задать вопрос можно на странице урока сайта photoshop-master.ru

    Источник: https://zen.yandex.ru/media/id/5ba9ebc78f43c900aac86cde/5da00b696f5f6f00ad960c00

    Создание тени для текста и других текстовых эффектов при помощи CSS

    Свойство text-shadow не новое для CSS-3, оно было введено еще в CSS-2, однако браузеры начали учитывать его только в последнее время. Как следует из названия, свойство text-shadow позволяет создавать тень для текста при помощи CSS. Ниже приводится синтаксис text-shadow.

    Синтаксис

    Первое значение определяет смещение тени по оси X, т. е. по горизонтали.

    Если значение положительное, оно определяет смещение тени справа от текста, при отрицательном значении, смещение тени влево от текста.

    Точно также, второе положительное значение определяет смещение по оси Y (по вертикале), положительное значение определяет смещение ниже текста, отрицательное создает расстояние выше текста.

    Третье положительно значение, определяет радиус размытия тени. Если значение не указанно, то размытия не будет.

    Создание текстовых эффектов при помощи свойства text-shadow.

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

    1. Простая тень для текста на CSS

    Это простой пример использования свойства text-shadow. В нем создана тень 2px по оси X и оси Y, а также радиус размытия 2px.

    color:#7690CF;
    text-shadow:2px 2px 2px #48577D;

    2. Стиль выгравированного текста

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

    color: #666;
    text-shadow: 0px 3px 0px #666;

    3. Светящийся текстовый эффект

    Светящийся эффект можно сделать добавив только радиус размытия.

    color:#FAF4E8;
    text-shadow:0 0 20px #FFE30A;

    4. Размытый текст

    В приведенном ниже примере все сделано аналогично предыдущему, т. е. указан только радиус размытия без горизонтально или вертикально смещения. Однако в этом примере, использовалось значение цвета transparent, которое указывает, что цвет фона должен быть прозрачным. Это дает эффект размытия.

    color: transparent;
    text-shadow: 0 0 10px #333;

    5. Использование нескольких теней

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

    color:#F2B405;
    text-shadow: 0 0 4px #F24405,
    0 -5px 4px #F27405,
    2px -10px 6px #F29F05,
    -2px -15px 11px #F2E205,
    2px -18px 18px #222601;

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

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

    color:#ccc;
    text-shadow: -1px -1px #FFF,
    1px 1px #333;

    7. Граница вокруг текста

    Следующий код создает эффект границы для текста.

    color:#7FCAEB;
    text-shadow: 0 -1px #00468C,
    1px 0 #00468C,
    0 1px #00468C,
    -1px 0 #00468C;

    8. Текст в стиле 3D

    3D эффект для текста, может быть создан с использованием нескольких теней. Для достижения эффекта каждая тень немного увеличивается с использованием одного и того же цвета.

    color:#F2B405;
    text-shadow: 2px 2px #F27405,
    3px 3px #F27405,
    4px 4px #F27405,
    5px 5px #F27405

    Источник

    Источник: https://vavik96.com/sozdanie-teni-dlya-teksta-i-drugix-tekstovyx-effektov-pri-pomoshhi-css/

    Ссылка на основную публикацию