Уроки по css | Эффект тени при наведении в CSS

Главная->Уроки по css->Эффект тени при наведении в CSS

На этом уроке, мы создадим красивый эффект тени при наведении, на чистом CSS. Подобный эффект можно реализовать на любом блочном элементе. В нашем же распоряжении будет навигационное меню в виде списка и шрифтовые иконки FontAwesome. HTML разметка Каждый тег li будет являться кнопкой, внутри которой мы вставим код иконки, обернутый в ссылку. <ul> <li><a href="#"><i class="fab fa-android"></i></a></li> <li><a href="#"><i class="fab fa-apple"></i></a></li> </ul> Подключим библиотеку с иконками между тегами <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 в ряд, применив ещё раз технологию флексбокс. ul { display: flex; } Убираем у списков черные точки-маркеры, зададим размеры кнопок в пикселях. Чтобы кнопки не сливались в одно целое, сделаем отступы слева и справа по 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 дней" , возьмет вас за ручку и проведет по всему пути.