Затемнение в работе сайтов применяется часто. Типичные варианты — при наведении курсора мыши или после показа какого-либо элемента, чтобы подчеркнуть необходимость действий со стороны пользователя.
Содержимое сайта затемнить просто. Этим же способом можно воспользоваться, если потребуется сделать фоновое изображение темнее. А в качестве альтернативы приведу ещё пару вариантов, которые приходилось использовать.
Затемнение всего сайта
Используем очень простой способ. Создаём спец-элемент, после чего применяем к нему стили.
<style type="text/css">
#mask {
background-color:rgba(0,0,0,.3);
height:100%;
position:fixed;
width:100%;
top:0;
left:0;
}
</style>
<div id="mask"></div>
Код безусловно приводит к выводу полупрозрачного прямоугольника на активное окно. Обычно этого не требуется, поэтому задаётся дополнительное свойство display:none;, чтобы изначально элемент был скрыт. В ходе каких-либо действий пользователя элемент показается и/или скрывается. Манипуляции производятся с помощью JavaScript или
onclick="jQuery('#mask').show()"
а на саму маску:
onclick="jQuery('#mask').hide()"
полный код (по аналогии легко сделаете для показа):
<div id="mask" onclick="jQuery('#mask').hide()"></div>
Пример:
При этом, нужно помнить про css свойство z-index, когда выводите блок со свойством position, которое установлено в absolute или fixed. Большее значение располагает элемент выше, и наоборот.
Затемнение элемента при наведении
В простейшем случае, затемнение можно рассматривать как способ снятия полупрозрачности. Попробуем это сделать:
Код:
<style type="text/css">
img { opacity:.25; }
img:hover { opacity:1; }
</style>
Результат:
Изначально блёклая картинка при наведении курсора приобретает резкость.
Если фон тёмный, а изображение светлое, меняем «последовательность»: сначала элемент показываем, как есть, а при наведении курсора добавляем прозрачность.
Честное затемнение элемента
Предыдущие способы не всегда удобны — первый требует наличия дополнительного элемента и его абсолютного позиционирования по границам предка, второй действует на всё содержимое контейнера, что иногда недопустимо.
Например, есть блок с фоновым изображением. В нём — блок с текстом.
Демонстрационный пример
Нужно затенить фон, при этом не трогать текст. Как узнали ранее, свойство opacity не подходит. Внесение изменений в код тоже не всегда допустимо. Чтобы не было сомнения, добавляем прозрачности:
Демонстрационный пример
Плашка с текстом поблекла. Явно не то, что ожидаем.
Первый способ решить проблему — с помощью дополнительного элемента. Главное, не забыть про z-index, чтобы плашка с текстом всегда оставалась на переднем плане.
Самый лёгкий вариант (исключая затемнение в редакторе и заливки изменённой картинки на сервер) — добавить свойство box-shadow с включенным значением inset, выводящем тень «внутрь» элемента.
Демонстрационный пример
В CSS это выглядит так (добавить для блока-родителя плашки):
box-shadow:0 0 0 128px rgba(0, 0, 0, 0.33) inset;
Где 128px — половина высоты элемента. Если высота блока больше, чем ширина, то задавайте половину высоты. Чтобы не путаться, просто запомните: нужна половина от большего измерения.
Кстати, цвета тени смешиваются с фоном, что даёт забавный эффект:
Демонстрационный пример
box-shadow:0 0 0 128px rgba(0, 0, 153, 0.33) inset;
Неожиданно?
днём интернета
шоколадкой для работы мозга
коробочкой ароматного чая для бодрости
продлением хостинга на +1 месяц
Спасибо, помогли.
Алексей, здравствуйте.
Да пожалуйста!
Очень помогли.
Сергей, здравствуйте.
Рад, что статья оказалась полезной.
Успехов!
>Где 128px — половина высоты элемента.
А если размеры элемента не известны заранее? Элемент в респонсивной вёрстке может иметь различные размеры, на различных устройствах.
Здравствуйте.
Попробуйте задать заведомо большее значение, например, 9999px