Эффект тени при наведении в 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);
}
Вот такой у нас получился интересный эффект тени. Однако, если вы уже хорошо владеете навыками верстки, понимаете базовые принципы программирования. Но никак не решаетесь выйти на тропу заработка, видеокурс: "Своя Web-студия за 55 дней" , возьмет вас за ручку и проведет по всему пути.
-
Создано 27.12.2019 10:32:45
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.