НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.
WebDesignMagazine.ru – Журнал о веб-дизайне

4 jQuery плагина для улучшения типографики сайта

0

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

Если вы нуждаетесь в лучшем контроле над типографикой в своих проектах, тогда попробуйте использовать некоторые из следующих плагинов jQuery:

Lettering.js

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

  • Манипуляция и управление кернингом каждого отдельного текста
  • Раскраска отдельных букв заголовков
  • “Ералаш” вращения отдельных букв, для создания игривого эффекта

Пример кода

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

При таргетировании заголовка, вам нужно использовать функцию “надписи” (lettering):

Затем, добавьте использование custom_title класс для заголовка, который вам необходим:

Функция “lettering” автоматически добавит спан к каждой букве custom_title заголовка, вроде этого:

Теперь просто используйте стандартный CSS, в целях таргетирования отдельных спанов в заголовоке:

 

eralash

Скачать здесь.

FitText

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

Пример кода

FitText чрезвычайно прост в реализации:

В style.css, убедитесь, что у вашего заголовка заданна ширина:

Просто используйте указанный CSS элемент, чтобы выполнить fitText:

 

fittext

Скачать здесь.

ArcText

ArcText является jQuery плагином, который позволяет закрутить слова по криволинейной траектории. Он использует Lettering.js для автоматического расчета вращения для каждой буквы в слове, и гарантирует, что повернутые буквы будут распределены равномерно вокруг воображаемой криволинейной траектории. Фактическое вращение осуществляется с помощью трансформаций CSS3, и рассчитывается на основании радиуса, а также ширины текста.

Пример кода

Для получения изогнутого текста:

Модификация направления:

Как удалить вращения, чтобы буквы оставались выложенными над аркой:

 

curevdtext

Скачать здесь.

SlabText

SlabText похож на FitText, за исключением, того что он работает на нескольких строках. SlabText позволяет вам сделать жирные (bold), привлекающие внимание респонсивные заголовки. SlabText позволяет создавать многострочные заголовки, которые подгоняются под размер любого браузера, разделив заголовки в строки, затем изменяя размер каждой строки для того, чтобы заполнить пространство по горизонтали окна.
Вы можете позволить SlabText автоматически создавать отдельные строки, или вы даже можете указать слова, которые вы хотите, чтобы оставались вместе на линии, с расчетной и заданной функцией словосочетаний.

Пример кода

Для работы плагина требуется следующие правила CSS:

Добавьте slabtexed класс к body элементу, и используйте slabtextdone для заголовков, которые вы хотите изменить, это будет динамически изменять размер заголовка по умолчанию, с автоматической вставкой span class= “slabtext”.

Вы также можете задать слова для каждой строки вручную с помощью span class= “slabtext” обертки вокруг каждой строки.

 

slab-text

Скачать здесь.

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

Поделиться:

Об Авторе

Главный редактор портала WebDesignMagazine.ru. Пишу статьи и делаю переводы для веб-сайта, занимаюсь продвижением журнала в социальных сетях и PR-каналах, а также несу ответственность за маркетинговые стратегии нашего проекта.