Lecaw

Учимся создавать Web-сайты

Создание эффекта открытия элементов

November 21, 2013
CSS
201hits

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

ДЕМО Исходные файлы

 

 

HTML разметка

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

<ul class="grid">
    <li class="ot-letter-left"><span data-letter="C">C</span></li>
    <li class="ot-letter-top"><span data-letter="J">J</span></li>
    <li class="ot-letter-right"><span data-letter="8">8</span></li>
    <li class="ot-letter-bottom"><span data-letter="A">A</span></li>
</ul>

CSS

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

.grid li span {
    display: inline-block;
    font-weight: 900;
    line-height: 1;
    position: relative;
    color: hsla(0, 0%, 0%, 0.6);
    transform-style: preserve-3d;
    perspective: 550px;
    z-index: 1;
}

Чтобы сделать несколько букв, мы используем свойство content для доступа к атрибуту data.

.grid li span:before,
.grid li span:after {
    position: absolute;
    content: attr(data-letter);
    line-height: inherit;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    transition: all 0.3s;
}
 
.grid li span:before {
    text-shadow: none;
    color: hsla(0, 0%, 0%, 0.12);
}

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

Настало время перейти к transforms. Давайте взглянем на букву, которая открывается с правой стороны. Мы будем использовать свойство transform-origin для того, чтобы левая сторона расширялась при вращении:

.ot-letter-left span:before,
.ot-letter-left span:after {
    transform-origin: 0 50%;
}

Теперь мы установим небольшое 3D вращение по оси Y на псевдо-элемент :after, таким образом тень будет масштабироваться по оси Y, также добавим небольшой скос по вертикали. Тень сделает эффект открытия буквы более заметным.

.ot-letter-left span:before {
    transform: scale(1.08, 1) skew(0deg, 1deg);
}
 
.ot-letter-left span:after {
    text-shadow: 
        -1px 0px 0px hsla(360, 100%, 100%, 0.1), 
        3px 0px 1px hsla(0, 0%, 0%, 0.4);
    transform: rotateY(-15deg);
}

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

.ot-letter-left:hover span:before {
    transform: scale(0.85,1) skew(0deg,20deg);
}
 
.ot-letter-left:hover span:after {
    transform: rotateY(-40deg);
}

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

.ot-letter-left { 
    background: #e74d3c; 
}
 
.ot-letter-left span { 
    text-shadow: 
        1px 4px 6px #e74d3c, 
        0 0 0 hsla(0, 0%, 0%, 0.3), 
        1px 4px 6px #e74d3c; 
}
 
.ot-letter-left span:after { 
    color: #e74d3c; 
}
 
.ot-letter-left:hover span:after { 
    color: #ea6253; 
}

Мы установили цвет фона каждого элемента сетки, а затем применили свойство text-shadow для вырезания части буквы от фона (основной элемент span).

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

.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
    transform-origin: 50% 0;
}
 
.ot-letter-bottom span:before {
    transform: scale(1,1.05) skew(4deg,0deg);
}
 
.ot-letter-bottom span:after {
    text-shadow: 
        0px -1px 0px hsla(360, 100%, 100%, 0.1), 
        0px 3px 1px hsla(0, 0%, 0%, 0.4);
    transform: rotateX(15deg);
}
 
.ot-letter-bottom:hover span:before {
    transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
}
 
.ot-letter-bottom:hover span:after {
    transform: translateY(0.045em) rotateX(40deg);
}

Обратите внимание что свойство transform-origin всегда находится на противоположной стороне открытия элемента.

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

ДЕМО Исходные файлы

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий