Как добавить эффекты для веб шрифтов от Google

Годами всё что мы могли сделать со шрифтом так это указать его цвет, размер и толщину, и только с появлениями новой спецификации CSS3 нам стала доступна такая функция как наложение стилей в качестве тени, которая открыла перед многими большие возможности. Ведь теперь сделать объёмный шрифт не представляется сложным и уже не надо думать о том, чтобы добавлять изображения, простой список стилей сам решить эту задачу.

В этой статье мы расскажем как можно задать красивые эффекты для веб шрифтов от Google, используя только файл стилей.

На самом деле существует около 25 различных эффектов, которые вы можете использовать в своих проектах.

И так, самое главное, подключаем необходимый шрифт

 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&effect=shadow-multiple' rel='stylesheet' type='text/css'> 

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

     <p class="font-effect-shadow-multiple">This is Awesome!</p>  

добавим парочку эффектов

.font-effect-shadow-multiple {  
    text-shadow: .04em .04em 0 #fff,.08em .08em 0 #aaa;  
    -webkit-text-shadow: .04em .04em 0 #fff, .08em .08em 0 #aaa;  
}  

Вот что мы получим:
без эффекта

Эффект №2 — Добавление нескольких разновидных эффектов

     <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&effect=shadow-multiple|emboss|3d' rel='stylesheet' type='text/css'>  

Для вжатого текста

<p class="font-effect-emboss">I'm Pressed</p>

Для объёмного текста

<p class="font-effect-3d">Look I'm 3D-ed</p>

Результат
Результат

Для более подробной информации загляните на официальный сайт Google, содержащий всю необходимую документацию



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

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