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

Пример 5



Пятый пример будет иметь эффект 3D, который придаст некую глубинку тексту.



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



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



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



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



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



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



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



Давайте перейдем к span'ам и переведем их на x-axis:



И это все, у нас есть аккуратный эффект 3D текста!

Пример 6



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



Нам нужно вставить текст в span:



Давайте добавим ширину, высоту, отступы и очистим выравнивание:



Все span'ы будут отображаться в виде блока элементов:



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



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



Добавим градиент как фон, который мы будем имитировать тонким слоем:



Давайте добавим некоторые произвольные повороты и наклоны преобразований:



При наведении мы будем устанавливать все пролеты в положение 0 и применять различные text-shadow в текст, чтобы создать хороший эффект:



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

Пример 7



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



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



span будет плавающим. Мы добавим эффект переходов:



Пролеты будут чередоваться в цвете фона и мы добавим тонкую текстуру к ним:



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



Все пролеты, кроме последнего будет иметь прозрачность 0:



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



При наведении, все пролеты будут установлены обратно в их естественное положение, и мы увеличим значение не прозрачности до 1:



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



Пример 8



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



Мы будем использовать lettering.js, чтобы обернуть все слова в пролетах



Добавим ширину основного заголовока и в центре ее:



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



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



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



В стилях псевдо-классы :before :after создадут две линию, слева и справа:



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



И вот оно что! Надеюсь, вам понравились примеры типографии и вы нашли их вдохновляющими! Там можно очень много экспериментировать, так что просто попробуйте!