Оформляем текст с использованием CSS3
18 февраля 2014 | Опубликовано в css | 2 Комментариев »
Красивая типографика всегда интересна, поэтому хочется найти способы применения веб-технологий для улучшения оформления текста. В этом уроке мы покажем, как использовать свойства CSS3, чтобы разнообразить оформление текстов или создать эффекты способами, которые кажутся невозможными. Заметьте: эффекты будут работать только в браузерах Webkit, но мы добавили дополнительные свойства, чтобы они работали и в других браузерах.
Демонстрация работы – Скачать исходный код
Градиент на тексте
Это работает так же, как и создание градиента фона с помощью CSS3, но мы ограничиваем фон формой текста. Вот пример кода:
CSS:
h1#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) { 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>
К сожалению, этот способ работает только в браузерах Webkit. В браузере FireFox нет свойства, которое позволило бы свойству background-clip работать с текстом, поэтому в других браузерах он будет отображаться нормальным цветом. Мы также добавили свойству условие @media screen and (-webkit-min-device-pixel-ratio:0), чтобы у фона не было градиента в браузерах, не поддерживающих это свойство.
Эффект частичной тени
Нам хотелось добавить еще что-нибудь, кроме градиента, так что мы решили добавить глубину, применив эффект частичной тени. Это хорошо известный способ, который показывает четкое разделение между буквой и ее тенью, как будто буква парит. Этого эффекта можно достичь применением двух значений свойства text-shadow. Первый цвет тени должен совпадать с цветом фона, чтобы создать промежуток между буквой и второй тенью. Вот пример кода, созданного на основе предыдущего примера:
CSS:
body { background: #441369; } h1#gradient { text-align:center; } h1#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) { 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); // эффект частичной тени top: 0; z-index: -1; } }
HTML:
<h1 id="gradient"><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h1>
Это сложная часть. Мы столкнулись с проблемой, свойство 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; } h1#gradient { text-align:center; } h1#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) { 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); /* источник изображения для Вашей текстуры */ -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.
Демонстрация работы – Скачать исходный код
Заключение
Эффекты оформления текста CSS3 часто использовались веб-дизайнерами, но немногие использовали их настолько широко. С помощью подходящих шрифтов, цветов и расположения Вы можете создать шикарно выглядящий плакат, используя только CSS и HTML.
Автор урока Pete R.
Перевод — Дежурка
Смотрите также:
549
18 февраля 2014 в 15:39
Переведите пожалуйста вот эту статью
www.4proxy.de/index.php?q...S8%3D&hl=1ed
И пожалуйста! Делайте побольше переводов похожих статей!
УДАЧИ ВАМ! СПАСИБО БОЛЬШОЕ ЗА ВАШИ СТАРАНИЯ! ;)