12 эффектов с использованием text-shadow

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


Перед тем как начать, советую ознакомиться вам со следующими статьями:
Текст и CSS3: примеры эффектов с использованием text-shadow
7 простых эффектов для текста с использованием CSS3
3D текст с помощью CSS
CSS3 для начинающих. Часть 3. Текст в CSS3

Простая тень

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

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

Применим это на практике. Ниже пример простой тени, которая сдвинута вниз на 2 пикселя, вправо на 4 пикселя, с размытием на 3 пикселя и цвет этой тени черный с непрозрачностью в 30%.

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

А вот и результат, который мы получим:
css textshadow

Почему RGBA?

В принципе, вы можете использовать любой метод задания цвета, не обязательно RGBA. Но именно RGBA добавляет еще одно измерение — непрозрачность (opacity), которое позволяет получить масссу новых оттенков для вашей тени. Использование opacity дает вам возможность легко подобрать нужный оттенок под ваш фон, что тяжело сделать используя другие варианты задания цвета в CSS.

Простой эффект вдавленного текста

Прелесть свойства text-shadow в том, что вы можете создавать различные эффекты, а не просто тени. Для того, чтобы осознать это — вот простой эффект вдавленного текста. Первое, что нужно сделать — это выбрать для текста цвет, который будет немного темнее чем цвет фона. Далее, применим свойство text-shadow, цвет зададим белым и непрозрачность в 10%.
Конкретно по примеру, для фона используется цвет #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);
}

css textshadow

Жесткая тень

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

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

css textshadow

Двойная тень

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

text-shadow: тень1, тень2, тень3;

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

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

В итоге мы имеем эффект чем то схожий в тем, что используют в прессе.
css textshadow

Вниз и на расстоянии

Как только вы попробуете накладывать тени друг на друга слоями вам сразу же захочется сделать что-то похожее на 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 textshadow

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

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 textshadow

Эффект 3D текста от Марка Дотто

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

css textshadow

Настоящий эффект вдавленного текста от Гордона Холла

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

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 textshadow

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

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

css textshadow

Эффект мягкого выделения

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 textshadow

Углубляясь в верстку и кодинг для вашего сайта не забывайте что есть еще и оптимизация сайта, как внутренняя так и внешняя. Именно этим и занимается профессионально компания ТОП-10 — один из лидеров на рынке создания, оптимизации и продвижения сайтов.



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

4 комментария: 12 эффектов с использованием text-shadow

  1. Аблай Исмагулов говорит:

    Отлично! То, что нужно, но не подскажете, что это за шрифт на скриншотах?

  2. Volcha говорит:

    ни в одном браузере не работает… установлены последние версии браузеров… при этом демо со страницы автора я также вижу как расплывчатый текст… и это ни разу не сексуально 🙂
    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;

    • Антон говорит:

      padding: 100px;
      font: bold 8em sans-serif;
      background-color: #666;
      color: rgba(0,0,0,0.7);
      text-shadow: 1px 2px 3px rgba(255,255,255,0.5);

      попробуй так, так сексуально!

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

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