Креативные стили вэб-типографии часть 1

Не много css магии и мы можем превратить тест в красивую типографию, опустив использование изображения. В этом уроке будем создавать различные веб-типографики, используя lettering.js плагин jquery методы css. Для некоторых примеров также добавим эффекты переходов, чтобы сделать вещи немного более интерактивным.

Работает во всех браузерах кроме IE

В большинстве случаев мы будем использовать lettering.js.

В дальнейшем будет восемь примеров.

Пример 1



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



Слово, которое будет отображаться на начальном этапе, будет дублироваться. (Заметим, что все эти примеры предназначены для декоративных целей и не могут быть "SEO дружественны").
Мы будем применять lettering.js плагин для слов, означающих, что у нас будет еще один пролет вокруг первого и последнего слова (дубликатов):



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



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



Два внешних пролета с классом "cs-text-cut" будут иметь высоту 90px и мы установим скрытое переполнение. Идея состоит в том, чтобы сделать этот промежуток половинчатым. Мы также добавим переход на эти элементы:



Давайте добавим границы к верхней и к нижней части:



Давайте установим размер шрифта и высоты строки внутренней службы в 180px, и добавим несколько стилей текста:



Второй дубликат, который является последним подклассом в нашей структуре будет иметь свои службы "pulled up". Это покажет нижнюю часть слова:



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



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



В нижней половине будет перемещен вниз:



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



И это первый пример. Давайте посмотрим второй.

Пример 2



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



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



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



Мы будем использовать псевдо-класс :before того, чтобы создать другую вставку эффекта тени. Есть и другие способы сделать это, но давайте будем фантазировать
Итак, что мы делаем, чтобы растянуть ее, пока тень, которая 20px и дать ему белые тени окна и черной вставкой тень коробки (полупрозрачные RGBA):



После псевдо-класс будет маленькая точка на верхней части элемента:



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



Пример 3


Стиль-й третий пример полностью основан на уроке о создании царапин на плитке для аккуратного эффекта текста textuts.com. Это отличный учебник, так что проверим это, прежде всего, чтобы понять эффекты тени для царапин на плитке.
Мы постараемся создать такой же эффект с чистым CSS.



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



Это будет каждое слово в промежуточном классе, начиная с "слова" и каждую букву слова с определенным классом, начинающиеся с "символа".



Слова будут отображаться как инлайн-блоки и мы дадим им боковые края:



Символы будут иметь царапаный стиль цвета фона и мы установим ширину и высоту для них. Текст тени создаст резной эффект для писем и несколько теней окна добавят глубину плитке:



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



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


Пример 4


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



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



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



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



Так как мы хотим использовать этот фон аа, мы будем использовать указатель события: none. Это позволит сделать текст интерактивными / кликабельным: