<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

Данный курс научит Вас программировать на языке JavaScript, который крайне желательно знать любому уважающему себя программисту. Курс состоит из 8 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности. В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Эффект тени при наведении в 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);
}

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

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

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

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

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

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

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

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

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