Как часто вы задумывались о том как можно оригинально оформить элементы веб-дизайна на своем сайте, да еще так, чтобы ранее никто и нигде не встречал. Думаю об этом подумывал каждый из наших читателей. В данном уроке мы рассмотрим как можно красиво оформить круговые элементы с помощью эффектов hover и трансформаций css. Мы рассмотрим замечательные примеры hover-эффектов от известного разработчика Mary Lou. Многим понравились её примеры с hover-эффектами для меню и на этот раз она решила порадовать нас не менее замечательными примерами.

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

Шаг 1. HTML

Для большинства примеров, мы будем использовать следующую структуру:

Хотя мы могли бы использовать изображения здесь, мы дадим себе немного больше свободы, и используем фоновые изображения вместо картинок. Мы определим их в классах, которые начинаются с «ch-img-». Кроме того, у нас будут блоки с описанием отдельных элементов, и их названием.

Шаг 2. CSS

Давайте определим общие стили для списка и элементов списка:

Мы можем отцентрировать элемент списка, используя display: inline-block и определив свойство text-align.

Пример 1.

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

Мы определим два класса для элемента: один — это ch-item, а другой будет использоваться для определения фонового изображения:

Описание элемента будет позиционироваться абсолютно, и мы зададим ему полупрозрачный фон, установив значение для RGBA. Его прозрачность будет равна 0, и мы будем уменьшать масштаб его также до 0:

Заголовок элемента будет иметь некоторые отступы и сглаженные тени для текста:

Тег P имеет непрозрачность равную 0 и переход (мы хотим, чтобы он появлялся при наведении курсора мыши, но с задержкой):

Ссылка будет в верхнем регистре, и мы поменяем цвет при наведении на желтый:

А теперь, самое интересное, что будет происходить при наведении мыши! Этот элемент будет анимирован, и его тень изменит радиус с 16px до 1px:

Описание будет плавно появляться и масштабироваться до 1:

Параграф будет просто появляться (с задержкой):

С первым примером мы закончили! Давайте взглянем на следующий.

Пример 2.

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

Изображения для фона:

Описание будет опять же спрятано:

Зададим стили для типографских элементов:

При наведении мы анимируем внутреннюю тень элемента (она будет у нас красноватая) до 110px в радиусе. Она покроет весь круг:

Мы увеличим описание, чтобы оно появилось:

Пример 3.

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

Блок элемента будет иметь такие же стили, как и раньше (с тонкой тенью):

Для эскиза определим свойство transform-origin и переходы. Это будет элемент, который мы хотим, чтобы он поворачивался вниз при наведении курсора мыши, и при этом раскрывал описание элементов:

С помощью псевдо-класса :after мы создадим небольшую медную защелку с радиальным градиентом:

Давайте определим фоновые изображения для каждого элемента:

Описание элемента будет иметь следующие стили:

Типографские элементы стилизованны следующим образом:

Ссылка будет в виде маленького кружка, который должен двигаться вправо при наведении:

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

При наведении мы повернем эскиз и переместим/повернем ссылку:

Пример 4.

Четвертый пример будет включать в себя элементы 3D. Таким образом, нам нужно немного изменить структуру, чтобы иметь контейнер для перспективы и лицевую и обратную сторону. Таким образом, элемент списка будет выглядеть следующим образом:

Как вы можете видеть, мы добавили фоновое изображение для блока элемента, а также лицевой части переворачивающегося элемента. Трюк заключается в том, чтобы задать такой же фон для ch-info-wrap, как и на остальной странице. Это создаст иллюзию, что наш элемент имеет отверстие.

Этот элемент будет иметь обычные стили:

Дополнительный блок будет использоваться для перспективы, и мы добавим ему переход для тени:

Блок с классом ch-info будет иметь значение preserve-3d для transform-style, и мы зададим ему переход, так как этот элемент будет вращаться в 3D:

Лицевая и обратная стороны будут иметь следующие стили:

Обратная сторона будет поворачиваться, так что мы не должны видеть ее изначально:

И снова, фоновые изображения:

… и типографские элементы:

При наведении, мы будем изменять тени враппера и поворачивать так, чтобы мы видели обратную сторону:

Пример 5.

В этом примере мы хотим уменьшить внутреннюю часть эскиза до 0 и сделать, чтобы описание элементов появлялось и масштабировалось до 1.

Структура пятого примера будет такой же, как и в предыдущем примере.

Этот элемент имеет обычные стили:

Враппер и блок с описанием будут иметь следующие общие стили:

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

Общие стили для «переднего» и «заднего» блока:

«Передний» будет иметь переход (он будет уменьшаться и исчезать):

«Задний» блок, который содержит описание, будет иметь изначально прозрачность равную 0, а затем будет увеличиваться до 1.5:

Фоновые изображения и типографские элементы будут иметь такие же стили как и в предыдущих примерах, только с несколькими разными цветами:

При наведении мы уменьшим внутреннюю часть эскиза до 0 и установим непрозрачность равную 0 для «переднего» блока.

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

Пример 6.

В этом примере мы хотим перевернуть внутреннюю часть миниатюры вниз, для того, чтобы показать описание. HTML-код будет таким же, как и в предыдущих двух примерах.

Элемент будет иметь такие же стили, как и раньше:

Общие стили для враппера и элемента с описанием:

Оболочка будет иметь перспективу:

Элементу info установим следующие стили для трансформации:

Передняя и задняя стороны будут иметь переход. Обратите внимание, что на этот раз мы не будем устанавливать backface-visibility: hidden, так как мы хотим показать обратную сторону внутренней части эскиза, когда она переворачивается вниз:

Давайте установим правильный transform-origin, так чтобы мы могли открыть его вниз:

Мы установим RGBA значение с непрозрачностью равную 0 для фона элемента с описанием:

И обычные стили для других элементов:

При наведении, мы будем вращать переднюю часть и немного анимировать тень.

Пример 7

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

Мы определим для элемента свойство perspective:

Для элемента с классом ch-info понадобится preserve-3d:

Лицевая и обратная сторона будут иметь переходы, transform-origin будет установлен как 50% 0%:

Давайте создадим симпатичную тень для передней части:

Противоположная сторона будет спрятана изначально:

Зададим обычные стили для фоновых изображений и текстовых элементов:

Мы будем использовать translate3d, чтобы перемещать лицевую часть по оси Y нашего 3D пространства, и rotate3d, чтобы на самом деле повернуть её. Мы также постепенно её спрячем, чтобы какая-либо часть не была видна впоследствии:

Противоположная сторона будет поворачиваться «назад» до 0 градусов (первоначально она была повернута вниз):

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.