15.07.14, 23:29
0 комментарий
  Уроки

8 простых CSS3-переходов, которые удивят ваших посетителей

Спецификация CSS3 представила UX-дизайнерам невероятные возможности, и что самое интересное, – все это очень просто реализовать.

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

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

Все эти эффекты управляются посредством свойства transition. Итак, для того, чтобы увидеть эти эффекты в действии, нам нужно создать div-элемент на HTML-странице:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    </style>
</head>
<body>
    <div></div>
</body>
</html>


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

<style type="text/css">
body > div
{
            width:483px;
            height:298px;
            background:#676470;
            transition:all 0.3s ease;
}
</style>


Свойство transition имеет три значения: свойства для переходов (в нашем случае все из них), скорости переходов (в данном случае 0,3 секунды), а также третье значение, которое позволяет вам изменять процесс вычисления ускорения и замедления, но его мы оставим по умолчанию.

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

Если вы хотите продолжить изучение данной статьи, предлагаем вам скачать демо-файлы.

1. Fade In (Появление)

Такой эффект довольно востребован среди клиентов. Это отличный способ сделать акцент на функциональности и привлечь внимание к CTA-элементам.

Эффект появления реализуются в два этапа: сначала вы выставляете исходное состояние, а затем изменяете его при, к примеру, наведении курсора на элемент:

.fade
{
        opacity:0.5;
}
.fade:hover
{
        opacity:1;
}


(Не забудьте выставить класс вашего div-элемента на fade, чтобы эффект заработал.)

8 простых CSS3-переходов, которые удивят ваших посетителей


2. Change Color (Изменение цвета)

Раньше было довольно сложно добиться эффекта изменения цвета, учитывая все эти вычисления отдельных RGB-значений. Теперь же, вы можете просто установить класс div’а на color и указать нужный вам цвет в коде CSS:

.color:hover
{
        background:#53a7ea;
}


8 простых CSS3-переходов, которые удивят ваших посетителей


3. Grow & Shrink (Увеличение и уменьшение)

Чтобы увеличить элемент, раньше нужно было изменять свойства width и height, а также устанавливать отступы. Теперь же, мы можем просто использовать CSS3-свойство transform.

Установите класс вашего div-элемента на grow, а затем добавьте этот код в блок стилей:

.grow:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}


8 простых CSS3-переходов, которые удивят ваших посетителей


Уменьшать элементы теперь так же просто, как и увеличивать. Чтобы увеличить элемент, мы указываем значение больше 1, а для уменьшения используются значения меньше 1:

.shrink:hover
{
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
}


8 простых CSS3-переходов, которые удивят ваших посетителей


4. Rotate Elements (Вращение элементов)

CSS Transforms можно использовать в различных задачах, среди которых можно выделить вращение элемента.

Задайте вашему div-элементу класс rotate и добавьте следующий CSS-код:

.rotate:hover
{
        -webkit-transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        transform: rotateZ(-30deg);
}


8 простых CSS3-переходов, которые удивят ваших посетителей


5. Square to circle (Преобразование квадрата в окружность)

Очень популярный эффект – преобразование квадрата в окружность и наоборот. Этот эффект стало очень просто реализовать при помощи CSS-кода: нам нужно просто добавить и изменить свойство border-radius.

Задайте вашему div-элементу класс circle и добавьте следующий CSS-код к вашим стилям:

.circle:hover
{
        border-radius:50%;
}


8 простых CSS3-переходов, которые удивят ваших посетителей


6. 3D Shadow (Трехмерная тень)

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

Этого эффекта можно добиться путем добавления свойства box-shadow, и последующего перемещения элемента по оси Х при помощи свойств transform и translate.

Задайте вашему div-элементу класс threed и добавьте следующий CSS-код к вашим стилям:

.threed:hover
{
        box-shadow:
                1px 1px #53a7ea,
                2px 2px #53a7ea,
                3px 3px #53a7ea;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
}


8 простых CSS3-переходов, которые удивят ваших посетителей


7. Swing (Качание)

Не всем элементам подходит свойство transition. Мы также можем создавать действительно комплексные анимации при помощи @keyframe, animation и animation-iteration.

В данном случае, нам нужно сначала определить CSS-анимацию в наших стилях. Вы заметите, что ввиду проблемам с реализацией, нам нужно использовать @-webkit-keyframes и @keyframes (да-да, Internet Explorer на данный момент работает лучше Chrome, при всем уважении к последнему).

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}


Эта анимация просто перемещает элемент влево и вправо, и теперь нам нужно просто добавить следующий фрагмент кода в документ:

.swing:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}


8 простых CSS3-переходов, которые удивят ваших посетителей


8. Inset border (Внутренний контур)

Один из самых популярных эффектов для кнопок сегодня – это кнопка-призрак. Кнопка без фона и громоздкого контура. Конечно же, мы без труда можем добавить border к элементу, но это также приведет к изменению расположения элемента. Эту проблему можно использовать при помощи box-sizing, однако гораздо проще будет использовать переход в border при помощи inset-box-shadow.

Задайте вашему div-элементу класс border и добавьте следующий CSS-код к вашим стилям:

.border:hover
{
        box-shadow: inset 0 0 0 25px #53a7ea;
}


8 простых CSS3-переходов, которые удивят ваших посетителей

Напишите своё мнение