Как сделать затемнение при наведении css

Затенение элементов при наведении курсора с CSS

Затенение элементов при наведении курсора с CSS

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

Масштабирование элемента, на который наведен курсор

Затенение его одноуровневых элементов

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Состояния наведения традиционно оказывают влияние на элемент, на который наведен курсор (это имеет смысл, не правда ли?). Но мы также можем прослушивать событие hover для родительского элемента.

В этом суть этого трюка, мы затеняем все дочерние элементы, когда курсор наведен на родительский элемент, и присоединяем другой обработчик к одному дочернему элементу, обратно выделяя его:

Это довольно здорово, но есть небольшой неприятный побочный эффект, когда вы наводите курсор на промежутки между дочерними элементами — они затеняются все. К счастью, мы можем решить это с помощью pointer-events!

pointer-events: none; указывает браузеру игнорировать события мыши для элемента и всех дочерних элементов. Но если мы укажем дочернему элементу снова прослушивать события мыши с помощью pointer-events: auto;, мы получим аккуратный эффект, при котором события наведения запускаются только для дочерних элементах , но при этом запускают псевдо-селектор :hover для родительского элемента:

Как сделать затемнение при наведении css

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 6b8331681a7377bf • Your IP : 89.162.247.52 • Performance & security by Cloudflare

Эффект тени при наведении в CSS

Эффект тени при наведении в CSS

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

HTML разметка

Каждый тег li будет являться кнопкой, внутри которой мы вставим код иконки, обернутый в ссылку.

Подключим библиотеку с иконками между тегами <head></head>.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">

Выбираем нужные иконки на сайте FontAwesome и скопируем их код.

Разметка готова и теперь переходим к CSS стилям. Вся магия с эффектом тени будет вершиться там.

CSS стили

Зададим черный фоновый цвет и установим минимальную высоту для body на всю область просмотра браузера. Для выстраивания кнопок по центру, сделаем весь body: флекс-контейнером. Тогда в этой паре, тег ul будет флекс-элементом и разместится по центру.

body < display: flex;
justify-content: center; <!— по горизонтали—>
align-items: center; <!— по вертикали—>
min-height: 100vh; <!— область просмотра по вертикали—>
background: #000; <!— цвет фона—>
>

Выстроим дочерние элементы списка li в ряд, применив ещё раз технологию флексбокс.

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

ul li <
position: relative; <!— относительное позиционирование—>
list-style-type: none; <!— без точек—>
width: 150px; <!— ширина—>
height: 150px; <!— высота—>
margin: 0 10px; <!—отступы —>
border-radius: 50%; <!— скругление—>
>

Стилизуем ссылки-иконки: позиционируем ссылку абсолютно по отношению к тегу li. Значит, для <li> выставляем относительное позиционирование. Для вертикального выравнивания иконки, зададим высоту строки 120 пикселей. Это значение складывается из высоты блока минус сумма двух отступов (150-30). За размер иконки отвечает размер шрифта.

ul li a <
position: absolute; <!— абсолютное позиционирование—>
top:15px;
left: 15px;
right: 15px;
bottom: 15px;
text-align: center; <!— горизонтальное выравнивание —>
line-height: 120px; <!— вертикальное выравнивание —>
background: #e100ff;
color: #fff; <!— цвет иконки —>
font-size: 45px; <!— размер иконки —>
border-radius: 50%; <!— радиус скругления —>
>

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

<!—Зададим тень для иконки—>
ul li a i <
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
opacity: 0.4;
transition: 0.5s;
>

При наведении на ссылку, исчезает полупрозрачность, и размер иконки увеличивается в 1.5 раза.

ul li a:hover i <
opacity: 1;
transform: scale(1.5)
>

Делаем двойную тень, задействовав одновременно два псевдо элемента. Размываем тень при помощи фильтра и меняем порядок слоев — загоняем тень под кнопку.

ul li:before,
ul li:after <
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
filter: blur(20px); <!— размытие тени—>
z-index: -1; <!— порядок слоев—>
opacity: 0;
transition: 1s; <!— плавная прорисовка тени—>
>

Для красивого эффекта тени, дадим радиус размытия для одной тени больше.

ul li:after <
filter: blur(40px);<!— увеличим радиус размытия—>
>

Отлавливаем событие наведения на псевдо элементах. Наша тень из невидимого состояния, плавно появляется.

ul li:hover:before,
ul li:hover:after <
opacity: 1;
>

Покрасим тень с помощью градиента — сделав линейный переход от темного к светлому тону.

li a,
ul li:before,
ul li:after <
background: linear-gradient(45deg, #7F00FF, #E100FF);
>

Смотрите пример на CodePen

Вот такой у нас получился интересный эффект тени. Однако, если вы уже хорошо владеете навыками верстки, понимаете базовые принципы программирования. Но никак не решаетесь выйти на тропу заработка, видеокурс: "Своя Web-студия за 55 дней" , возьмет вас за ручку и проведет по всему пути.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

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

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