Вы здесь: Главная > CSS > Откаты: ролловеры

Откаты: ролловеры

Опубликовано автором Просмотры: 33

Ролловеры ─ прекрасная старая традиция в веб-дизайне. В основном они включают в себя смену одной вещи на другую при наведении на неё курсора.

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

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

Бледное изображение заменяется ярким.

Замена изображений

Самые ранние ролловеры использовали JavaScript для замены одного элемента img другим. Затем появился CSS, и с помощью :hover мы могли легче изменять фоновое изображение, используемое вместо текстовой ссылки. Более чистый, простой, семантичный, приятный и доступный код.

Очевидным решением для достижения этой цели было бы сделать что-то вроде этого:

a {
    display: block;
    width: 200px;
    height: 63px;
    background-image: url(images/toucanfade.jpg);
    text-indent: -999em;
}

a:hover {
    background-image: url(images/toucan.jpg);
}

Текст ссылки убирается с пути, на его место вставляется изображение (“toucanfade.jpg”), и это изображение заменяется (на “toucan.jpg”) при наведении курсора мыши на ссылку.

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

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

Этим изображением можно манипулировать с помощью следующего CSS, который достигает того же результата, что и в предыдущем примере, но поскольку задействован только один файл, содержащий “два” изображения, все необходимое для ролловера загружается сразу, что делает эффект мгновенным.

a {
    display: block;
    width: 200px;
    height: 63px;
    background-image: url(images/toucancombo.jpg);
    text-decoration: none;
    text-indent: -999em;
}

a:hover {
    background-position: bottom;
}

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

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

Появление / исчезновение

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

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

#toucan {
    display: block;
    width: 200px;
    height: 63px;
    background: url(images/toucancombo.jpg);
    text-indent: -999em;
    position: relative;
}

a:after {
    content: "";
    display: block;
    width: 200px;
    height: 63px;
    background: url(images/toucancombo.jpg) bottom;
    position: absolute;
    top: 0;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

a:hover:after {
    opacity: 1;
}

Здесь мы создаём ещё одну область для использования стилей :after, поэтому оставляем HTML нетронутым. Мы помещаем это поле поверх ссылки, заполняем его желаемым изображением перехода, скрываем его и устанавливаем наш переход. Затем, когда на ссылку наведён указатель мыши, это невидимое поле становится видимым. Бам. Опрокидывание.

Другие варианты

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

Манипулирование ролловерами border-radius.

Страницы в тему:

Примеры CSS:

Добавить комментарий