Красивое css оформление текста – 7 классных примеров с тенями для текста, которые вы просто не можете пропустить

Leave a Comment / Css / By /

Оформляем текст с использованием CSS3

Красивая типографика всегда интересна, поэтому хочется найти способы применения веб-технологий для улучшения оформления текста. В этом уроке мы покажем, как использовать свойства CSS3, чтобы разнообразить оформление текстов или создать эффекты способами, которые кажутся невозможными. Заметьте: эффекты будут работать только в браузерах Webkit, но мы добавили дополнительные свойства, чтобы они работали и в других браузерах.

 

 

Демонстрация работы – Скачать исходный код

Градиент на тексте

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

CSS:

h2#gradient {

    color: #FF0052; /* Запасной цвет */

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

    h2#gradient {

    background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    }
}

 

HTML:

<h2>CSS3 Rocks!</h2>

 

К сожалению, этот способ работает только в браузерах Webkit. В браузере FireFox нет свойства, которое позволило бы свойству background-clip работать с текстом, поэтому в других браузерах он будет отображаться нормальным цветом. Мы также добавили свойству условие @media screen and (-webkit-min-device-pixel-ratio:0), чтобы у фона не было градиента в браузерах, не поддерживающих это свойство.

Эффект частичной тени

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

CSS:

body {

    background: #441369;  

}

h2#gradient {

    text-align:center;

}

h2#gradient span {

    position:relative;

    display: inline-block;

    color: #FF0052; /* Запасной цвет */

    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);  /* Запасная тень */

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    h2#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;

    }

    h2#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); // эффект частичной тени

        top: 0;

        z-index: -1;

    }
}

 

HTML:

<h2><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h2>

 

Это сложная часть. Мы столкнулись с проблемой, свойство text-shadow и градиент не работали хорошо вместе. Тень по каким-то причинам накрывала градиент, так что мы создали обходной путь.  Мы добавили селектор CSS :after, чтобы применить каждый эффект по отдельности, и присвоили тени значение z-index -1, так что тень больше не накрывала текст.

Мы быстро поняли, что этот обходной путь не сработает, если используется свойство text-align: center. Эффект в селекторе :after будет неправильно выровнен и, чтобы избавиться от этого, нам пришлось положить текст в еще один элемент span со свойствами position: relative и display: inline-block, чтобы селектор :after был выровнен.

Так как мы выводим селектор :after отдельно, нам нужен способ описать в таблице стилей порядок вывода. Мы добавили свойство HTML data-text, содержащее фразу «CSS3 Rocks!», элементу span, и свойство CSS content: attr(data-text) селектору :after. И теперь у нас есть великолепное оформление текстов с эффектом частичной тени, работающим вместе с градиентом.

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

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

CSS:

body {

    background: #441369;  

}

h2#gradient {

    text-align:center;

}

h2#gradient span {

    position:relative;

    display: inline-block;

    color: #FF0052; /* Запасной цвет */

    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);  /* Запасная тень */

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    h2#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;

    }

    h2#gradient span:after {

        content: attr(data-text);

        left: 8px;

        position: absolute;

        background: url(http://i.imgur.com/RkDRMcJ.png); /* источник изображения для Вашей текстуры */

        -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:

<h2><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h2>

 

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

Демонстрация работы – Скачать исходный код

Заключение

Эффекты оформления текста CSS3 часто использовались веб-дизайнерами, но немногие использовали их настолько широко. С помощью подходящих шрифтов, цветов и расположения Вы можете создать шикарно выглядящий плакат, используя только CSS и HTML.

Автор урока Pete R.

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

Смотрите также:

Как оформить текст в CSS