Сейчас в арсенале веб-местера много разных техник по созданию интересных эффектов, связанных со взаимодействием пользователя с элементами веб-страницы. Но самой простой и наиболее элегантной техникой обычно является CSS, особенно учитывая те дополнения, которые нам несёт CSS3.

В старые времена мы должны были полагаться на JavaScript для подобных эффектов. Но сейчас, спасибо возрастающей поддержки браузерами CSS3, возможно установить эти эффекты вообще без написания скриптов. К сожалению, всё ещё используются браузеры (IE9 и ниже), которые не поддерживают CSS3. Вы можете пойти двумя путями — подготовить для них запасной вариант или закрыть глаза, на их существование.

Кстати, это интересный вопрос, не имеющий прямого отношения к уроку, — статистика браузеров. «Официальная» статистика (собранная неизвестно кем) похожа на машину времени — переносит нас в прошлое и говорит, что у ослика больше половины рынка… На что все остальные — от пользователей, среди которых тяжело найти тех, кто пользуется IE или у кого есть знакомые, которые пользуется IE, до веб-мастеров, у которых есть своя статистика, — сильно сомневаются в справедливости этих данных. У меня, например, так:

 01

02

Видно, что доля всех осликов = 2.4%, а доля самых старых, махровых версий — просто исчезающе мала. Мало ли какие маргинальные браузеры существуют — у меня в статистике 45 строк разных видов (НЕ версий) браузеров. И под каждый из них всё равно не подстроишься.

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

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

ДЕМО 1

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

Макет

Для нашего первого демо в HTML мы будем использовать ненумерованный список, а затем завернём в него заголовок и изображение. Обратите внимание, мы также добавили класс demo-1 и эффект внутри тега ненумерованного списка. Макет будет выглядеть примерно так:

CSS

В нашем CSS мы установим относительное позиционирование для нашего класса demo-1 и зададим ширину и высоту. Мы также спрячем переполненные элементы. Я также добавил несколько базовых стилей для моих тегов h2 и p, а также для тега изображения. Теперь для нашего класса эффекта мы зададим абсолютную позицию и дадим ему поля -15px для верха и низа. Мы будем использовать переход CSS3 для создания плавного эффекта. Наш CSS выглядит примерно так:

ДЕМО 2

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

Макет

Для html в нашем втором демо мы используем очень похожий на наше первое демо макет. Но в этот раз мы будем использовать класс demo-2 и добавим класс zero:

CSS

CSS почти такой же как и в первом демо. За исключением того, что в этот раз мы будем двигать наше изображение вниз, задав ему -96px для bottom. Мы также используем переход CSS3 для создания плавного эффекта:

ДЕМО 3

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

Макет

Для последнего макета демо, мы будем использовать другую структуру. Во-первых, мы будем использовать элемент figure из HTML5, а внутри него тег figcaption. Также мы будем использовать класс demo-3 для ненумерованного списка:

CSS

В нашем CSS мы зададим изображение для figure с относительным расположением и затем спрячем backface-visibility. Мы также будем использовать rotateY transform: -180 градусов для figcaption, а затем изменим его на 180 градусов для hover изображения и заголовка:

Похожие темы

8 простых эффектов CSS3, которые произведут впечат... CSS3 дал бесчисленные возможности для дизайнеров UX (опыта взаимодействия), а самое лучшее в этом, что самые крутые элементы действительно просты в...
Как создать анимированный липкий заголовок посредс... Мода на разные элементы дизайна приходит и уходит. Те элементы дизайна, которые решают определённые проблемы, держаться дольше других.  Элементы д...
3 трюка для добавления текстуры в ваш текст с CSS ... Вероятно, вы знакомы с использованием такой техники Photoshop, когда в качестве маски изображения выступает текст; это лучший известный способ добав...