Как креативно использовать веб-шрифты

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

Для того чтобы получить данные эффекты мы будем использовать небольшой плагин jQuery — lettering.js, а так же некоторые правила CSS. Мы рассмотрим каждый прием в детальности.

Пример 1.

Основная идея состоит в том, чтобы разделить или разрезать слово при наведении курсора и при этом показать второе слово, которое скрыто.

Для этого нам понадобится следующая html-разметка:

Следует заметить, что слово, которое будет отображаться вначале, будет дублироваться. Теперь подключим сам плагин lettering.js с помощью команды:

Теперь разберемся со стилями для данного примера. Прежде всего, мы зададим фиксированную ширину для блока с текстом:

Теги span первого уровня будут выводиться как блочные элементы:

Два span-a с классом «.cs-text-cut» будут иметь высоту 90px и мы установим overflow: hidden. Идея состоит в том, чтобы высота этого span-а была вдвое меньше его реальной высоты, таким образом мы разрежем текст на половину. Также добавим переход для этих элементов:

Теперь добавим границы сверху и снизу:

Затем установим размер шрифта и высоту строки внутреннего тега span равную 180px, которая является ровно в два раза больше высоты его родителя, также добавим некоторые стили для текста:

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

Текст в середине, который мы хотим, чтобы появлялся при наведении курсора мыши, будет позиционироваться абсолютно, и мы установим прозрачность для него равную 0. Он также будет уменьшен вдвое:

Когда мы наводим мышь на слово, мы хотим, чтобы верхняя половина перемещалась вверх, поэтому мы будем перемещать её по Y-оси и уменьшим её прозрачность:

А нижняя половина будет перемещена вниз:

И, наконец, мы изменим прозрачность для среднего текста и увеличим его. Обратите внимание, что мы добавили переход с задержкой в 0,3 секунды. Это даст нам время, чтобы сначала переместить половинки исходного слова вверх и вниз:

Пример 2. 

Во втором примере мы поиграем немного с трансформацией и создадим полупрозрачные панели с буквами.

Мы применим lettering, чтобы обернуть каждую букву в span:

Затем зададим основной оболочке фиксированную ширину и добавим clearfix hack от Nicolas Gallagher, потому что наши теги span будут плавающими (float: left):

Каждый span будет иметь обтекание слева и мы также добавим полупрозрачный фон и свойство box-shadow, которое создаст широкую границу. Затем мы «наклоним» элемент (transform: skewY(8deg)) и добавим переход:

Мы будем использовать псевдо-класс :before для того, чтобы создать эффект внутренней тени.

С помощью псевдо-класса :after добавим маленькую точку в верхней части элемента:

И, наконец, при наведении курсора мыши, мы повернем элемент и немного его увеличим, также изменим тени и повысим значение прозрачности:

Пример 3.

Третий пример полностью основан на уроке о создании поцарапанной плитки в Photoshop от textuts.com. И мы постараемся создать точно такой же эффект с помощью CSS.

Мы опять применим lettering.js к словам и буквам:

Это позволит нам обернуть каждое слово в тег span с классом, начинающимся со слова «word», и каждую букву в слове в span с классом, начинающимся со слова «char».

Отцентрируем текст:

Слова будут выводиться как inline-блоки и мы зададим им боковые отступы:

Для каждого символа мы определим цвет фона, ширину и высоту. Текст тени создаст эффект врезанных букв, а несколько теней box-shadow добавит объем плитке:

Теперь добавим немного «рандомности», незначительно поворачивая каждую нечетную и каждую третью плитку:

Пятое слово и последний заголовок будут иметь красные буквы, а также заголовок будет немного меньше, чем остальной текст:

Пример 4.

Мы сделаем буквы большими и полупрозрачными, добавим тени для текста и повернем некоторые буквы «случайным» образом.

Мы обернем каждую букву в тег span, при помощи всё того же lettering.js:

Выровним текст по центру и зададим ему ширину 100%:

Буквы будут полупрозрачными, для этого определим цвет RGBA с низким значением прозрачности. Мы также добавим тень для текста с большим смещением:

Поскольку мы хотим использовать это как фон, добавим свойство pointer-events: none. Это позволит избежать выделения текста мышью.

Теперь, давайте рандомно повернем и изменим некоторые буквы. Для этого мы будем использовать селектор :nth-child:

Пример 5.

Теперь создадим эффект 3D для текста.

Здесь мы хотим, чтобы каждая буква была обернута двумя тегами span, поэтому мы сначала применим lettering.js, а затем обернем созданые теги span в еще один:

Определим ширину/высоту и отступы для основного контейнера:

Первый слой тегов span будет иметь свойства perspective и float:

Так как мы будем вращать и перемещать внутренние теги span, нам нужно в определенном порядке расположить контейнеры (от центра к краям):

Внутренние span-ы будут иметь множественный фон: градиент и полупрозрачные текстуры. Мы также применим box-shadow, что даст некоторую глубину элементам:

Последние четыре буквы будут иметь обратный градиент, box-shadow и text-shadow:

Теперь мы переместим внутренние span-ы по Z-индексу и будем вращать их, чтобы создать нужный эффект. Каждый из них будет иметь различные значения, поэтому мы будем использовать селектор :nth-child:

Пример 6.

Для каждой буквы у нас будет несколько полупрозрачных span-ов, которые мы будем вращать и «наклонять». При наведении мыши все преобразования будут удалены.

Нам нужно каждую букву обернуть тегом span, перед которым будет три пустых тега span, и все это будет обернуто еще одним тегом span (да-да, можно мозг сломать):

Добавим ширину и некоторые отступы для основного контейнера:

Все теги span будут блочными элементами:

Первый слой span-ов будет иметь высоту и ширину 130 пикселей и некоторые отступы:

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

Последний дочерний внутренний span содержит букву, укажем для неё размер и добавим несколько цветных теней для текста. Он также будет иметь фоновый градиент, который будет имитировать тонкий изгиб:

Теперь добавим некоторые произвольные повороты и наклоны для span-ов:

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

Пример 7.

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

Сначала определим некоторые свойства текста:

Теги span будут иметь свойство float: left, и мы сделаем их круглыми. Мы также добавим переход.

Для четных и нечетных тегов span будет разный цвет фона и мы добавим тонкую текстуру для них:

Все span-ы будут перемещены в центр. Мы применим трансформацию дважды: первый раз в процентах, например, первый span нужно переместить на 3 позиции, т.е. на 300%, а второе преобразование для компенсации отступов:

Последний span будет содержать логотип. Мы зададим ему другой фон и расположим его по центру основного контейнера:

При наведении мыши все span-ы вернутся в свое естественное положение, и мы увеличим значение прозрачности до 1:

Логотип будет немного увеличен, а затем исчезнет:

Пример 8.

В последнем примере мы просто немного поиграем с несколькими тенями для текста.

Мы опять используем lettering.js, чтобы обернуть все слова в теги span:

Добавим ширину для основного заголовка и отцентрируем его. Мы также наклоним его немного:

Теги span сделаем блочными элементами, и добавим верхнее поле:

Первое слово будет иметь размер шрифта равный 100 пикселям, и большое расстояние между буквами:

Второе слово будет курсивным шрифтом с засечками, и мы зададим ему в темный цвет:

Мы используем псевдо-классы :before и :after для создания двух линий слева и справа:

Последнее слово будет иметь несколько теней для текста, чтобы создать эффект стопки букв. Хитрость заключается в чередовании цвета текста и цвета фона, который в нашем случае является темно-коричневым:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.