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

Как создать открывающиеся 3D буквы при помощи CSS

0

В этом уроке мы покажем вам, как создать интересный 3D анимированный эффект открытия букв с псевдо-элементами, CSS transforms и transitions. Целью этого урока является демонстрация того, как мы можем воплотить это все в жизнь, используя данные методы CSS.

 

Смотреть Демо Скачать урок

Разметка

[alert alert_type=”” ]Обратите внимание, что псевдо-элементы Transitions работают не во всех браузерах. Лучше всего они просматриваются в Chrome и Firefox.[/alert]

Необходимая разметка довольно проста, всего лишь span, который содержат символы, но, так как мы собираемся работать с генерируемым контентом, мы должны добавить пользовательский дата-атрибут (data-attribute) для повторения текста каждой буквы. Мы также будем использовать сетку в качестве нашей основной wrapping структуры, где каждая буква будет внутри элемента списка. У каждого элемента списка будет определенный класс направления для буквы:

CSS

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

Обратите внимание на то, что мы добавили position:relative к span для того, чтобы абсолютное позиционирования псевдо-элементов работало.

Для клонирования символов, мы используем content свойства для доступа к дата-атрибуту. Затем мы позиционируем наши оба псевдо-элемента поверх их родителя (реальной буквы).

Таким образом, у нас будет три слоя: первым будут наши основные темные буквы;  :before псевдо-элемент, который будет нашей темной полупрозрачной тенью на нем; и последним слоем поверх всего будет  :after псевдо-элемент, – открытие.

Пришло время добавить наши transformations. Давайте взглянем на букву, которая открывается по правой стороне, там, где “открытие” привязано слева (мы используем  transform-origin для того, чтобы левая сторона стала стержнем поворота):

Мы добавим трехмерное вращение на Y-ось  :after элемента, пока будем масштабировать тень на Y-оси и добавлять вертикальный наклон к нему. Text-shadow сделает сторону открытие более заметной, добавив немного толщины и скрыв стержень поворота.

 

Теперь будет применен настоящий эффект на :hover состояния элемента списка. Мы увеличим вращение и наклон наших псевдо-элементов так, чтобы буква открывалась и тень менялась соответственно:

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

Мы установили цвет фона для элемента сетки, после этого мы применили вставку text-shadow эффекта к вырезанной части (основной спан). Именно поэтому мы должны были установить text-shadow  .grid li span:before на none, чтобы он не применялся в противном случае.  :after псевдо-элемент, самая верхняя часть отслойки, получит тот же цвет, что и фон, а при наведении мыши, тон будет посветлее, так как наш воображаемый источник света находится на противоположной стороне открытия.

Вот как работает наш эффект “открытия”. Помимо этого, мы можем изменить направление открывания букв, поиграв с transform-origin, осями вращения, углами перекоса и некоторыми другими незначительными настройками. Следующий стиль является примером того, как наш эффект будет работать в нижнем направлении:

Как вы видите,  transform-origin всегда находится на противоположной открытия и  text-shadow регулируется по той же логике.
Кроме того, ось вращения изменяется на оси X и оба, масштаб и перекос тени псевдо-элемента устанавливаются так, чтобы следовать направлению света. В качестве последнего штриха, мы переместили оба псевдо-элемента, используя  translateY для чистого смещения стержня.

 

Смотреть Демо Скачать урок

Поделиться: