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

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

  • автор:

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

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

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

HTML разметка

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

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

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

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

CSS стили

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

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

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

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

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

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: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 дней» , возьмет вас за ручку и проведет по всему пути.

Создано 27.12.2019 10:32:45

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

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

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

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

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

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

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

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

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Свойство box-shadow CSS

    box-shadow CSS — это свойство, которое позволяет создать практически для любого элемента эффект тени.

    Обновлено: 2022-01-13 17:49:29 Вадим Дворников автор материала

    Синтаксис

    Свойство box-shadow принимает значение, состоящее из пяти различных частей:

    box-shadow: offset-x offset-y blur spread color position;

    Свойство box-shadow является единым свойством. Это означает, что важно учитывать порядок, в котором объявляются значения, в частности, длины.

    offset-x

    Первое указываемое значение — это горизонтальное смещение тени, то есть положение тени по оси x . Положительные значения задают положение тени справа от элемента, а отрицательные — слева от элемента.

    .left < box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) >.right

    offset-x

    offset-y

    Второе значение, в CSS shadow — это вертикальное смещение тени, то есть положения тени по оси y . Положительные значения задают тень ниже элемента, тогда как отрицательные значения задают положение тени над элементом.

    .left < box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) >.right

    offset-y

    blur

    Задает радиус размытия тени, которое, в частности, можно получить с помощью фильтра « Размытие по Гауссу » в Photoshop . Значение 0 означает, что тень полностью однородная и резкая, без размытия. Чем больше значение размытия, тем менее резкой и размытой будет тень. Отрицательные значения не допускаются и приводятся к значению 0 .

    .left < box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) >.middle < box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) >.right

    blur

    spread

    Определяет размер тени. Это значение box shadow CSS также можно представить себе, как расстояние от края тени до элемента. Положительные значения задают распространение тени за пределы элемента во всех направлениях на указанное значение.

    Отрицательные значения уменьшают размеры тени относительно элемента. Значение по умолчанию равно 0 , при котором тень будет иметь тот же размер, что и элемент.

    .left < box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) >.middle < box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) >.right

    Как сделать плавное отображение тени текста при наведении

    При наведении курсором на ссылку должна плавно появиться тень. Не могу сделать процесс плавным. Долго гуглил но не смог найти.

    Отслеживать

    110k 23 23 золотых знака 114 114 серебряных знаков 382 382 бронзовых знака

    задан 23 мар 2020 в 2:42

    Voron_Dead Voron_Dead

    43 3 3 бронзовых знака

    Вторая ссылка в google: webformyself.com/…

    23 мар 2020 в 2:47

    2 ответа 2

    Сортировка: Сброс на вариант по умолчанию

    Вот так чуть чуть вроде красиво

    .inner < cursor: pointer; >span < font-size: 60px; font-family: sans-serif; transition: 1s; font-weight: 600; >.inner:hover span < text-shadow: 0 0 3px #000; color: #fff; >span:nth-child(1) < transition-delay: 0.1s; >span:nth-child(2) < transition-delay: 0.2s; >span:nth-child(3) < transition-delay: 0.3s; >span:nth-child(4) < transition-delay: 0.4s; >span:nth-child(5) < transition-delay: 0.5s; >span:nth-child(6) < transition-delay: 0.6s; >span:nth-child(7) < transition-delay: 0.7s; >span:nth-child(8) < transition-delay: 0.8s; >span:nth-child(9) < transition-delay: 0.9s; >span:nth-child(10)
     
    t e x t s h a d o w

    Отслеживать

    ответ дан 23 мар 2020 в 3:10

    Резидент Казахстана Резидент Казахстана

    13.5k 2 2 золотых знака 19 19 серебряных знаков 62 62 бронзовых знака

    Свойство box-shadow в css: как анимировать без потери производительности

    От автора: как анимировать CSS свойство box-shadow таким образом, чтобы объект на каждом кадре не отрисовывался заново, а также без потери в производительности страницы? Если коротко, то никак. Анимация свойства box-shadow сильно влияет на производительность.

    Тем не менее, есть более простой способ имитировать этот эффект с минимальной перерисовкой объекта и с 60FPS: анимация свойства opacity на псевдоклассе.

    Демо

    Посмотрите на демо и сравните две разных техники, которые мы сегодня разберем. Если вы не видите разницы, то мы добились того, чего хотели. Разница только в том, как мы назначаем и анимируем тень объекта. Слева мы анимируем свойство box-shadow по событию hover, а справа мы добавляем псевдокласс, к нему добавляем тень, а затем анимируем свойство opacity данного элемента.

    Если вы воспользуетесь панелью разработчика и наведете курсор мыши на одно из двух демо, то вы увидите что-то похожее на (зеленые столбцы это перерисовка, чем меньше, тем лучше):

    Четко видно, что по сравнению с карточкой справа (анимация свойства opacity псевдокласса) перерисовок больше при наведении на карточку слева (анимация свойства box-shadow).

    Почему же мы наблюдаем такой эффект? В CSS есть несколько свойств, которые можно анимировать без вызова постоянной перерисовки объекта на каждом кадре, и это opacity и transform. Изменяя только эти два свойства во время анимации, мы минимизируем количество перерисовок объекта (тем самым уменьшаем работу браузеру). Разница между подходами существенна, напишем стили:

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

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