Как сделать эффект лайтбокса

Оцените материал
(0 голосов)

Проблема

Нередко возникает необходимость затемнить все содержимое позади элемента с помощью полупрозрачной темной подложки, для того чтобы подчеркнуть данный элемент пользовательского интерфейса и привлечь к нему внимание пользователя. Например, этот эффект часто используется для создания «световых коробов» или лайтбоксов  и «экскурсий» по интерфейсу. В самой распространенной технике реализации роль затемняющего занавеса играет новый элемент HTML, к которому применено немного стилизации CSS, как в следующем
фрагменте кода:
.overlay { /* Для затемнения */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.lightbox { /* Элемент, к которому мы хотим привлечь внимание */
position: absolute;
z-index: 1;
/* [остальные стили] */
}


Подложка затеняет все содержимое позади того элемента, к которому мы хотим привлечь внимание.  .lightbox получает более высокое значение  z-index , для того чтобы этот элемент выводился поверх подложки. Это, конечно, прекрасно, но все же данное решение требует дополнительного элемента HTML, то есть реализовать его с помощью чистого CSS невозможно. Не самая большая проблема, но по возможности нам все же хотелось бы избежать этого неудобства. К счастью, в большинстве случаев это возможно.

Решение с псевдоэлементом

Мы можем использовать псевдоэлементы для устранения необходимости в дополнительном элементе HTML, например, так:
body.dimmed::before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0,0,0,.8);
}
Это решение чуть лучше, так как теперь мы можем применять нужный эффект напрямую из CSS-кода. Однако его проблема в плохой переносимости, так как к элементу  <body> уже может применяться какая-то другая стилизация посредством его псевдоэлемента  ::before . Также это означает, что для применения этого эффекта нам обычно требуется код JavaScript, реализующий класс  dimmed. Решить эту проблему можно было бы путем добавления подложки через собственный псевдоэлемент  ::before элемента, установив для него значение z-index: -1; , для того чтобы подложка отображалась под элементом. Однако, хотя это устраняет проблему переносимости, мы все же не можем полностью контролировать положение псевдоэлемента по оси Z.

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

Решение с box-shadow

Решение с псевдоэлементом более гибкое и чаще всего его хватает для реализации подложки в привычном понимании этого слова. Однако для более простых сценариев использования или при разработке макетов мы также можем пользоваться преимуществом того факта, что радиус размазывания элемента box-shadow увеличивает его на значение, указанное для каждой стороны. Это означает, что мы можем создать очень большую тень без смещения и размытия,наспех сварганив некое подобие подложки:

box-shadow: 0 0 0 999px rgba(0,0,0,.8);

Очевидная проблема этого дешевого и сердитого решения — оно не работает при очень большом разрешении (> 2000px). Для устранения этого недостатка можно просто указать очень большое значение. Но можно также полностью избавиться от конкретных значений, прибегнув к помощи единиц измерения окна просмотра, которые способны гарантировать, что «подложка» всегда будет больше нашего окна просмотра. Так как мы не можем использовать разные значения радиуса размазывания по горизонтали и по вертикали, единица измерения окна просмотра, которую логично использовать в нашем случае, — это  vmax . На случай, если вы не знакомы с единицей  vmax , сообщаю, что  1vmax эквивалентно либо  1vw , либо  1vh , смотря какое из этих двух значений больше.
100vw эквивалентно ширине окна просмотра, и, аналогично,  100vh эквивалентно его высоте. Следовательно, минимальное значение, удовлетворяющее нашим требованиям, —  50vmax , и его необходимо добавить с каждой стороны, чтобы итоговые габаритные размеры подложки на  100vmax  превосходили габаритныеразмеры нашего элемента:

box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);

Это простая и быстрая в применении техника, но с ней связаны две довольно серьезные проблемы, ограничивающие ее применение. Можете догадаться какие? Во-первых, так как размеры нашего элемента определяются относительно размеров окна просмотра, а не страницы, при прокрутке мы будем видеть границы подложки, если только для элемента не установлено свойство  position: fixed; или если страница не слишком короткая, чтобы ее можно было прокрутить. Но так как страницы могут быть очень длинными, не следует пытаться преодолеть это ограничение, попросту еще сильнее увеличивая радиус размазывания. Вместо этого лучше ограничить использование данной техники элементами с фиксированным позиционированием или страницами с минимальным объемом прокрутки или вообще ее не требующих.Во-вторых, использование в качестве подложки отдельного элемента (или псевдоэлемента) не только визуально направляет фокус внимания пользователя к требуемому элементу. Это также предотвращает взаимодействие с остальными элементами страницы посредством мыши, так как события указателя мыши захватываются подложкой.

Свойство  box-shadow такой возможности не предлагает. Следовательно, оно только визуально притягивает внимание пользователя к определенному элементу, но само по себе не захватывает никакое взаимодействие с мышью. Подходит это вам или нет — зависит от вашего конкретного сценария использования.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/dimming-box-shadow

Решение с задним фоном

Если элемент, к которому вы желаете привлечь внимание пользователя, — модальное диалоговое окно (элемент  <dialog>, отображаемый посредством его метода  showModal() ), то у него уже есть подложка, определенная в таблице стилей User Agent. К этой родной подложке также можно добавить стили через псевдоэлемент  ::backdrop , например, чтобы сделать ее темнее:
Ограниченная
поддержка

dialog::backdrop {
background: rgba(0, 0, 0, .8);
}
Единственный недостаток этого метода заключается в том, что на момент написания данной главы он практически не поддерживается браузерами, поэтому, прежде чем применять его, проверьте актуальный уровень поддержки. Помните, однако, что даже если задний фон не поддерживается, то ничего не сломается, так как это всего лишь усовершенствование восприятия пользователем — просто у диалогового окна не будет подложки.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/native-modal

Десерт на сегодня - видео о бейсджамперах. Прямо дух захватывает!

Прочитано 181 раз Последнее изменение Понедельник, 08 мая 2017 11:14
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Wix.com INT

TemplateMonster

Поиск по сайту

Kwork

Google+