12 интересных вариантов тени для текста с помощью свойства CSS text-shadow.

12 интересных вариантов тени для текста с помощью свойства CSS text-shadow.

Типографика – это один из самых любимых инструментов в веб-дизайне. И что самое приятное, так это то, что CSS дает нам возможность «играть» с текстом, особенно его тенью. Причем на первый взгляд, это может казаться простым элементом, но в сочетании с общей картиной принять действительно приятный глазу эффект.

Мы попытаемся рассмотреть несколько вариантов теней с помощью свойства text-shadow для текста. Все это можно будет скопировать и вставить в свою работу.

Базовая тень.

Свойство text-shadow достаточно хорошо работает на всех современных браузерах. Ну а если вы хотите определить (на всякий случай), что то или иное свойство будет восприниматься браузерами более старого поколения, то можете воспользоваться ресурсом https://modernizr.com/

- Синтаксис.

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

text-shadow: horizontal-offset vertical-offset blur color;

Теперь на практике: тень была опущена на 2 пикселя, сдвинута вправо на 4 пикселя с размытием в 4 пикселя черным цветом с прозрачностью 30%

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

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

css,свойство text-shadow,тень в css,интересная тень в css

 

- Почему rgba?

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

Иллюзия вдавленного текста.

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

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

body {

    background: #222;

}

#text h1 {

    color: rgba(0,0,0,0.6);

    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);

}

Как вы могли заметить, мы задали основному фону цвет #222, а тексту – черный с прозрачностью 60%. А наша белая тень была расположена немного ниже и правее основного текста.

css,свойство text-shadow,тень в css,интересная тень в css,вдавленный текст css,внутренняя тень css

Жесткая тень.

Помните, что совсем не обязательно размывать тень. Не стесняйтесь экспериментировать, например, с жесткими ретро-текстами.    

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

css,свойство text-shadow,тень в css,интересная тень в css,жесткая тень css 

Двойная тень.

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

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

text-shadow: shadow1, shadow2, shadow3;

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

тень css,двойная тень css,свойство text-shadow

Убираем вниз и увеличиваем дистанцию.

Как только начинаешь экспериментировать с text-shadow, результаты с каждым разом становятся все более впечатляющими. Можно даже попробовать создавать 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); 

тень css,свойство text-shadow

 Подчеркивая значимость.

И еще один пример применения нескольких теней в одном свойстве. Но на этот раз, их меньше и они находятся ближе к основному тексту. Все это создает эффект значимости теста.

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

несколько теней css,тени в css,свойство text-shadow,тень в css,интересная тень в css

Помощник.

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

1. Серьезный 3D текст.

Здесь для получения необходимого результата используется 12 отдельных теней.

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,свойство text-shadow,тень в css,интересная тень в css,3D текст с помощью css

2. Вжатый текст.

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

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;

css,свойство text-shadow,тень в css,интересная тень в css,вдавленный текст css,внутренняя тень css,вжатый текст css

Еще несколько забавных теней.

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

- Светящаяся.

text-shadow: 0px 0px 6pxrgba(255,255,255,0.7);

css,свойство text-shadow,тень в css,интересная тень в css,светящийся текст css,светящаяся тень в css

- Супергерой.

text-shadow: -10px 10px 0px #00e6e6,

                 -20px 20px 0px #01cccc,

                 -30px 30px 0px #00bdbd;

css,свойство text-shadow,тень в css,интересная тень в css,текст супергерой css

- Несколько источников света.

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

css,свойство text-shadow,тень в css,интересная тень в css,тень с источниками света css

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

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,свойство text-shadow,тень в css,интересная тень в css,мягкое свечение css.мягкая тень css

И в заключении.

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

Источник https://designshack.net/

 

Читайте также:

5 простых дизайнерских лайфхаков для "прокачки" вашей страницы в социальных сетях.

Тенденция дизайна: волнистая и "мягкая" линии.

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

Веб-студия Интех

Веб-студия "Интех"

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

Комментарии (1)

  • Freeman - Аватар Freeman 06 ноября 2020, 22:48
    Спасибо. Пригодилось

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