Создание современных CSS3 hover-эффектов


Создание современных CSS3 hover-эффектов

В этом уроке, мы создадим несколько современных CSS3 hover-эффектов, используя CSS transitions (переходы), transforms (трансформации) и delays (задержки).

Создание современных CSS3 hover-эффектов

CSS transition дает нам возможность анимировать изменения в значениях CSS property. При помощи transition delays мы можем подтолкнуть переход (transition) элементов. CSS transformsпозволяют нам трансформировать элементы в двух или,стоимость юридических услуг, трехмерном пространстве. В этом уроке, мы будем использовать 2D трансформацию. В Демо ниже представлены различные вариации этого эффекта, но в уроке мы рассмотрим создание одного из них.

ДЕМО

Шаг 1 – создание базового HTML

Первым шагом является создание простой HTML базы.

Мы создали контейнер для нашего блока. Он содержит наше изображение и hover_info div, который, как следует из названия, будет содержать информацию, которую мы хотим отобразить при наведении курсора мыши (hover).

Шаг 2 – создание базового CSS

Следующее, что нам нужно сделать, это создать CSS для стилизации базы и создания первой transition. Для удобства чтения, этот урок будет написан без префиксов для всех браузеров.

После добавления CSS у нас есть блок, который содержит изображение и div под названиемhover_info. В этом CSS мы добавили несколько основных стилей к нашим block_holder и блоку. Мы добавили фон с прозрачностью 80% к hover_info div; использовали абсолютное позиционирование, чтобы разместить div подальше от блока; и использовали overflow hidden на блоке, чтобы убедиться, что он не появится вне границ.

Затем мы использовали свойство CSS transition, которое позволяет определить элементы, к которым мы хотели бы применить переходы. Для этого элемента, мы использовали all, для того чтобы переход применился ко всем элементам, где изменилось значение. Мы задали продолжительность в 200 мс , это то, сколько измененным элементам потребуется времени для перехода. Наконец, мы использовали linear  в качестве функции для нашего времени, которая означает, что наш переход будет иметь постоянную скорость от начала до конца. Затем, мы использовали transform для вращения div на 90 градусов.

Последней частью этого кода, будет установка нашего CSS, для использования hover на блоке.

В этом CSS мы меняем top, left и transform свойства hover_info div на hover блока. Это анимирует div, для его накладывания поверх изображения.

Шаг 3 – добавление заключительного HTML

Так как у нас уже есть база с начальным hover transition, нам нужно добавить содержимое в hover_info div, в виде названия(title), параграфа(paragraph) и ссылки(link).

Шаг 4 – добавление заключительного CSS

Теперь, когда у нас есть HTML, мы можем добавить стили, ко всем элементам.


Мы позиционировали H1 25px сверху и, первоначально 100% влево, чтобы убедиться, что оно скрыто в самом начале. При hover, мы меняем левое положение на 0, чтобы H1 мог появиться слева. Мы используем transition-delay свойство на hover c настройками в 200 мс, так чтобы это произошло после первого перехода наложения.

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


Параграф был позиционирован 85px сверху и 10% по левой стороне, с шириной 80%. Это создаст впечатление, что параграф находится в центре блока, когда он охватывает более 3 линии. Мы поставили непрозрачность до 0, чтобы он не появлялся на начальном этапе, и установили переход на непрозрачность со скоростью 200 мс использую линейную (linear)функцию времени.

При hover, мы устанавливаем непрозрачность к 1, что заставляет текст исчезать. Мы установили задержку на 600 мс, обозначая, что переход произойдет после первого поворота и slide-in заголовка.

Мы стилизовали этот тег, так же как и тег заголовка. Но, на этот раз, он находится в правом нижнем углу, а изначально позиционирован справа. При наведении мыши, мы переходим с правой стороны со скоростью 200 мс, используя линейную функцию времени, на этот раз с задержкой в ​​700 мс. Эта задержка означает, что переход начнется в середине перехода параграфа. Теперь, у нас есть окончательная пара переходов для цвета и фона, с той же скоростью и функцией времени, но без задержки. Это, когда пользователь наведет курсор на тег, будет меняться цвет фона и текста.

Источник: www.webdesignmagazine.ru

Previous Эффективные приемы для респонсивного веб-дизайна
Next Оформление списка HTML5 с использованием иконок WebFonts

Suggested Posts

Хаки wordpress. Топ 10

Простые ползунки для публикаций с отражением

Полезные плагины на WordPress для сервисов Google часть-2

YML импорт экспорт Яндекс Маркет для OpenCart 2

Плагин для увеличения изображения картинок

Подборка шаблонов Opencert за Октябрь