Как добавить затемнение в css
Перейти к содержимому

Как добавить затемнение в css

  • автор:

Эффект «Затемнение»

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

Нажмите, чтобы открыть/закрыть панель

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

На нашем сайте вы найдете самые разнообразные учебные материалы в удобном формате.

jQuery методы, создающие эффект затемнения

В jQuery есть следующие методы, создающие эффект затемнения:

jQuery метод fadeIn()

jQuery метод fadeIn() используется, чтобы «увести» элемент в затемнение.

Необязательный параметр speed определяет продолжительность эффекта и может принимать следующие значения: «slow», «fast» или число миллисекунд.

Необязательный параметр callback – это функция, которая выполняется после того, как эффект закончится.

В следующем примере демонстрируется использование метода fadeIn() с различными параметрами:

 $("button").click(function()< $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); >); 

jQuery метод fadeOut()

jQuery метод fadeOut() используется, чтобы «вывести» элемент из затемнения.

Необязательный параметр speed определяет продолжительность эффекта и может принимать следующие значения: «slow», «fast» или число миллисекунд.

Необязательный параметр callback – это функция, которая выполняется после того, как эффект закончится.

В следующем примере демонстрируется использование метода fadeOut() с различными параметрами:

 $("button").click(function()< $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); >); 

jQuery метод fadeToggle()

jQuery метод fadeToggle() переключает между эффектами, создаваемыми методами fadeIn() и fadeOut().

Если элемент видим, то fadeToggle() «уводит» его в затемнение.

Если элемент скрыт, то fadeToggle() «выводит» его из затемнения.

Необязательный параметр speed определяет продолжительность эффекта и может принимать следующие значения: «slow», «fast» или число миллисекунд.

Необязательный параметр callback – это функция, которая выполняется после того, как эффект закончится.

В следующем примере демонстрируется использование метода fadeToggle() с различными параметрами:

 $("button").click(function()< $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); >); 

jQuery метод fadeTo()

jQuery метод fadeTo() плавно изменяет прозрачность элемента (значение между 0 и 1).

Обязательный параметр speed определяет продолжительность эффекта и может принимать следующие значения: «slow», «fast» или число миллисекунд.

Обязательный параметр opacity определяет конечное значение прозрачности (между 0 и 1).

Необязательный параметр callback – это функция, которая выполняется после того, как эффект закончится.

В следующем примере демонстрируется использование метода fadeTo() с различными параметрами:

 $("button").click(function()< $("#div1").fadeTo("slow", 0.15); $("#div2").fadeTo("slow", 0.4); $("#div3").fadeTo("slow", 0.7); >); 

Как добавить затемнение в css

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

    Теория и практика

    Реализуется данный подход с помощью свойства opacity. Предлагаю рассмотреть реальный практический пример и, отталкиваясь от него, будем изучать работу данного свойства. HTML

    div class="block"> img width="400" src="img.jpg"> div class="fon">div> div>
    .fon  display:block; position:absolute; top:0px; width:400px; height:275px; background:#5a7faf; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /* IE 5.5+*/ -moz-opacity: 0.9; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.9; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.9; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */ > .block  display:block; width:400px; margin:0px auto; >

    Практический пример прозрачности

    В браузере будет примерно такая картинка: Попрактиковались? Теперь подойдем ближе к теоретической стороне рассматриваемого вопроса. Свойство opacity, которое отвечает за эффект CSS прозрачности, было создано на основе спецификации CSS3. В его значении указывается степень непрозрачности элемента в десятичных долях. Говоря более понятным языком, запись значения 0.9 для изучаемого свойства в нашем примере означает, что элемент, которому присвоено свойство, не прозрачен на 90%. Соответственно, если будет указан в значении 0, то наш блок станет полностью прозрачным и не будет заметен. Не смотря на это, он не исчезает со страницы, так как остается зарезервированное место для него среди элементов. Главная проблема в использовании этого свойства заключается в показателе его кроссбраузерности. Так как свойство считается относительно молодым, то старые версии некоторых браузеров могут конфликтовать с ним. Чтобы этого избежать, нужно воспользоваться следующими свойствами и скриптом:

    • filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); — этот код предназначен для оптимизации работы IE. Именно таким способом формируется прозрачность блоков в этих браузерах. Этот фильтр относится к Alpha DirectX, в отличие от обычного свойства, в этом фильтре непрозрачность устанавливается не в десятичных долях, а в процентах.
    • -moz-opacity — вендорное свойство, которое отвечает за прозрачность блоков в старых версиях Firefox.
    • -khtml-opacity — этот вендор оптимизирует работу свойства в Safari и Konqueror.

    К нежелательным эффектам использования этих вспомогательных свойств относится их неспособность пройти проверку на валидацию. Кстати само свойство opacity без проблем проходит проверку только в CSS Level 3 (так как свойство было включено именно в эту спецификацию).

    Чуть не забыл отметить еще один каприз его величества Internet Explorer. В некоторых версиях может не пройти прозрачность, если не указаны ширина и высота контейнера. Но паниковать еще рано, так как этот баг легко можно исправить с помощью такой записи:

    zoom: 1;

    Это свойство должно относиться к стилю просвечиваемого блока.

    На заметку

    При назначении родительскому блоку прозрачности все его дочерние элементы становится тоже полупрозрачными, что приводит к ухудшению читабельности текста этого контейнера. Чтобы избежать этого нежелательного эффекта требуется просвечивать только фон. Для этого создается отдельный контейнер для фона, и отдельный — для контента. Не забываем установить уровень наложения контента с помощью свойства z-index, в противном случае требуемый эффект достигнут не будет.

    div class="block"> p>Контент, который просвечивать не надоp> div class="fon">div> div>
    .fon  display:block; position:absolute; top:0px; width:400px; height:275px; background: #5a7faf; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; > .block  display:block; width:400px; margin:0px auto; > p  text-transform:uppercase; text-align:center; position:relative; z-index:10; padding-top:100px; >

    Вот так будет выглядеть наше решение в браузере

    Не просвечивающийся контент

    Стоит отметить, что прозрачность была увеличена специально, чтобы подчеркнуть тот факт, что контент не подсвечивается.

    Затемнение фона

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

    Не вижу смысла нагружать Вас новым кодом и предлагаю работать с предыдущим. В прошлой записи меняем только цвет фона с синего на черный и цвет шрифта на красный, чтобы сохранялся контраст. Да, еще думаю, для более эффективного затемнения повысим уровень непрозрачности до 0.7. Теперь, чтобы создать эффект затемнения, контейнер с черным фоном должен накладываться на контент, что также достигается через z-index.

    Наш предыдущий код принимает вид (HTML оставляем без изменений):

    .fon  display:block; position:absolute; top:0px; width:400px; height:275px; background: #5a7faf; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; > .block  display:block; width:400px; margin:0px auto; > p  text-transform:uppercase; text-align:center; position:relative; z-index:10; padding-top:100px; >

    По итогу получим вот такое затемнение

    затемненный фон

    В каких браузерах работает?

    6.0+ 1.0+ 9.5+ 3.1+ 2.0+

    text-shadow

    CSS-свойство text-shadow добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам decorations (en-US) . Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.

    Интерактивный пример

    Syntax

    /* смещение-x | смещение-y | радиус-размытия | цвет */ text-shadow: 1px 1px 2px black; /* цвет | смещение-x | смещение-y | радиус-размытия */ text-shadow: #fc0 1px 0 10px; /* смещение-x | смещение-y | цвет */ text-shadow: 5px 5px #558abb; /* цвет | смещение-x | смещение-y */ text-shadow: white 2px 5px; /* смещение-x | смещение-y /* Используем значения по умолчанию для цвета и радиуса-размытия */ text-shadow: 5px 10px; /* Глобальные значения */ text-shadow: inherit; text-shadow: initial; text-shadow: unset; 

    Это свойство определено как разделённый запятыми список теней.

    Каждая тень определена как два или три значения , за которыми следует необязательное значение . Первые два значения определяют параметры и . Третье необязательное значение задаёт . Значение определяет цвет тени.

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

    Значения

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

    Формальный синтаксис

    text-shadow =
    none | (en-US)
    [ (en-US) ? (en-US) && (en-US) (en-US) ] (en-US) # (en-US)

    Как сделать затемнение блока div?

    подскажите, как сделать при наведении мышью затемнение всего блока?

    • Вопрос задан более трёх лет назад
    • 12384 просмотра

    Комментировать
    Решения вопроса 1

    UnluckySerivelha

    Dymok @UnluckySerivelha

    Добавить блоку псевдоэдемент, растянуть на весь блок, задать нужный фон, при ховере на блок показывать его (при необходимости поменять z-index)
    https://codepen.io/UnluckySerivelha/pen/VBKPzv

    Ответ написан более трёх лет назад
    Комментировать
    Нравится 2 Комментировать
    Ответы на вопрос 2

    warsand

    Экспериментатор

    Сделать при наведении фон родительского div-а чёрным с нужной прозрачностью, например:
    .col-xs-6:hover
    Скорее всего вариант, который вам нужен — здесь

    Ответ написан более трёх лет назад
    Нравится 1 5 комментариев
    denism300 @denism300 Автор вопроса

    не работает. во-первых, бэкграунд не перекрывает картинки в других двух div, во-вторых, бэкграунд не перекрывает белый фон в div с текстом.

    warsand

    denism300,
    1. в примере не было (и нет) текста
    2. в примере не было (и нет) картинок
    3. вам никто не мешает нужные (подлежащие затемнению) классы перечислить через запятую в стилях.

    .col-xs-6, col-md-4, col-md-6, col-md-12:hover

    Также можно родительский, затемняющий div приподнять над остальными потомками при помощи «z-index»-ов.
    — И да, как пишет Dymok, т. е. включать псевдоэлемент при ховере — тоже можно.
    А если к ховеру добавить ещё и opacity: .4; , то получится, как здесь

    denism300 @denism300 Автор вопроса

    Варлам Ерофеич,
    1. в примере есть теги p, логично, что между ними что-то есть
    2. в примере есть теги img, логично, что там картинка.

    warsand

    denism300,
    — Ага. И уж тем более логично, что помощники сами и песочницу для автора вопроса откроют, и «пирожных напекут».
    Кроме того, теги достаточно часто применяют пустыми. Откройте любую страницу MDN в редакторе и посчитайте на досуге их количество.
    Есть и другие, более оправдывающие себя причины оставлять те или иные теги пустыми. Если интересно — обращайтесь, примеров много и я их приведу. Вот только заведомо, не глядя на сопутствующие скрипты подразумевать, что же несёт в себе пустой html-тег — нелогично.
    Пример: — Давайте же, посоревнуемся в логике. (ответ на этот пример будет позже)

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *