29 января 2017 г.

Эффект аннотаций с наложением

Статья о том, как создать эффект наложения, чтобы показать дополнительные детали предмета или изображения. Для этого эффекта используется только CSS, а именоно используется комбинация :checked псевдо-класса с селектором соседнего элемента.

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

Наша структура будет состоять из двух частей: названия и описания, и предварительного просмотра. Предварительный просмотр будет иметь эффект наложения. Идея заключается в том, чтобы добавить чекбокс, изображение и разделение для аннотаций, содержащие span'ы. Хитрость заключается в том, чтобы переместить чекбокс поверх остальных элементов, так что он остается кликабельным. Он должен находится первым в структуре, чтобы иметь возможность "достичь" своих соседних элементов, изображения и аннотаций.

Tags : , ,

Комментариев нет:

Отправить комментарий

Follow us

Follow.NOETIKOS

Contact Info

Как связаться с нами

Узнайте стоимость поддержки вашего проекта

Или заполните бриф на заказ услуг

Заполнить бриф
×