Типографика играет очень важную роль при создании сайта, и благодаря нововведениям в  CSS уже сейчас можно создавать потрясающие текстовые  эффекты. Они становятся всё более популярными с каждым днём. В этой статье мы будем рассматривать, как можно создать интересную типографику, используя только средства CSS. В уроке будет рассмотрена добавление градиента к тени, добавление эффекта рельефной тени к тексту с градиентом и добавление текстурной тени. Увы, эти эффекты будут работать только в браузерах Webkit. 

Градиент

Это работает точно так же, как и создание градиентного фона с  помощью CSS3, но мы будем накладывать фон на текст. Вот пример кода:

CSS: 

h1#gradient {
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    h1#gradient {
    background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
}

HTML: 

<h1 id="gradient">CSS3 Rocks!</h1>

Unfortunately, This technique only works on webkit browsers. The problem with Firefox is that there’s no properties that allow background-clip to work with text, so when viewing on other browsers, it will fall back to a normal color. I also wrapped the effect with @media screen and (-webkit-min-device-pixel-ratio:0) to prevent the background gradient showing up on unsupported browsers.

К сожалению, этот метод работает только в браузерах WebKit. Проблема с Firefox является то, что нет никаких свойств, которые позволяют <span><span> <code>background-clipработать с текстом, так что при просмотре в других браузерах текст будет иметь нормальный цвет.  Также  браузеры не поддерживают эффект <span><span><code>@media screen и (-webkit-min-device-pixel-ratio:0).

Эффект рельефной тени

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

CSS: 

body {
    background: #441369;
}
h1#gradient {
    text-align:center;
}
h1#gradient span {
    position:relative;
    display: inline-block;
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
    text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1);  /* Fallback Shadow */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    h1#gradient span{
        background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow:none !important;
    }
    h1#gradient span:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); //relief shade effect
        top: 0;
        z-index: -1;
    }
}

HTML: 

<h1 id="gradient"><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h1>

Эта часть является сложнее. Проблема возникла,  с тем, что text-shadow и градиент не совсем хорошо смотрелись вместе. Был добавлен селектор :after и значение  z-index -1 , чтобы тень не перекрывала текст. Но такое решение не обеспечит нормальное отображение, если у нас будет выравнивание ext-align: center. Эффект в :after будет отображаться неровно, и чтобы решить эту проблемы, нужно для текста прописать: position: relative и display: inline-block. Добавляем HTML атрибут  data-text и  надпись «CSS3 Rocks!» в теге span и в css прописываем acontent: attr(data-text) в селекторе :after. после селектора. Вот мы и получили эффект рельефной тени совместно с градиентом. 

Эффект текстурной тени

Добавляем небольшие изменения к предыдущему коду:

CSS: 

body {
    background: #441369;
}
h1#gradient {
    text-align:center;
}
h1#gradient span {
    position:relative;
    display: inline-block;
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
    text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1);  /* Fallback Shadow */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    h1#gradient span{
      background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:none !important;
    }
    h1#gradient span:after {
        content: attr(data-text);
        left: 8px;
        position: absolute;
        background: url(http://i.imgur.com/RkDRMcJ.png); /* image source for your texture */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: -4px -4px 0px #441369, -1px 0px 0px rgba(255, 255, 255, 0.1);
        top: 8px;
        z-index: -1;
        width: 100%;
    }
}

HTML: 

<h1 id="gradient"><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h1>

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

Автор:  Pete R.

Перевод — Дежурка