—»     —»   8 простых CSS3-переходов, которые точно удивят ваших посетителей
  Раздел: CSS/Style Sheets   Комментариев: 1  

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-переходов, которые точно удивят ваших посетителей
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 5669   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 16 июля 2014 @ 11:09
Написал: Кирилл — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Демо нет, но вот ссылка http://jsfiddle.net/michenus/75B2P/embedded/result

/
В демо я использовал SCSS.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июнь 2017    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
2627282930