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

Тень при наведении курсора

Многие видели, как при наведении на элемент он выделяется путём отбрасывания тени, делается это при помощи css. Выделение тенью можно сделать при создании сайта для любого класса css путём добавления ему :hover . К примеру наш класс будет иметь имя tab

Как выглядит в неактивном положении:

Создаём элемент с таким же именем и добавляем к нему :hover (если навели мышкой).

Как будет выглядеть если на него навести мышкой:

О том какие именно параметры у box-shadow и что они означают, возможно я опишу позже.

Как сделать тень картинки в CSS?

Тень изображения

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

Навигация по статье:

Для создания тени картинки в CSS существует специальное свойство, которое называется box-shadow. Данное свойство имеет следующий набор параметров:

Параметры тени

  • Смещение тени по горизонтали. Здесь может стоять как положительное, так и отрицательное значение. Если мы задаем положительное значение, то тень смещается вправо. Если отрицательно, то тень смещается влево.
  • Смещение тени по вертикали. Если мы задаем отрицательное значение, тень смещается вверх, а если положительное – тень смещается вниз.
  • Размытие тени. Чем больше здесь значение, тем более размытая получается тень.
  • Растяжение тени. Чем это значение больше, тем на большее расстояние от картинки или блока будет расходиться тень.
  • Цвет. Можно задавать как в шестнадцатеричной системе, так при помощи кодовых слов или в формате RGB.

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

  • -moz-box-shadow — для Mozilla Firefox
  • -webkit-box-shadow — для браузеров, работающих на Webkit-платформе, таких как Opera, Google Chrome, Яндекс.Браузер и др.

Как применить тень для картинки?

Чтобы добавить тень картинке присваиваем ей какой нибудь класс или обращаемся к уже существующему классу и в CSS файле темы или сайт дописываем нужные стили.

Box-shadows.css

image

В современном дизайне, при создании сайтов и приложений, многие разработчики применяют эффект глубины и объема, нередко обращаясь к таким css свойствам как box-shadow и drop-shadow. Некоторые считают, что в 2018 году это тренд. И действительно, немало как иностранных, так и российских сайтов, которые в 2018 году стали чаще применять тени.

В связи с этим, недавно появилась небольшая коллекция простых и приятных css теней, часто встречающихся на сайтах (плюс — минус пара пикселей в сторону). Коллекция так и называется — Box-shadows.css. Она уже получила несколько положительных отзывов в сети и недавно была обновлена до версии 1.0.4, в которой появилось еще несколько красивых теней, разделенных на группы.

После последнего обновления, коллекция стала содержать более 60 актуальных вариантов теней, которые отлично подходят для использования в таблицах, для содержимого домашних страниц, контейнеров, панели навигации и других блоков вашего сайта.

Основная цель создания этой коллекции — облегчение работы начинающим веб-дизайнерам и разработчикам в создании приятного и современного дизайна. Благодаря коллекции, вы сможете упростить работу с блоками и сократить время подбора css теней в генераторе (который, кстати, тоже имеется). Конечно, опытным разработчикам она вряд ли понадобится, но может и они почерпнут для себя что-нибудь интересное. Коллекция пригодится тем, кто еще не успел полностью углубиться в верстку, но хочет создать красивые тени на кнопках, блоках и контейнерах своего сайта.

Подключение стилей

Чтобы подключить таблицу стилей, перейдите на сайт проекта и скачайте нужный вам файл. Затем, подключите файл к вашей html странице, после открывающего тега <head> удобным для вас методом.

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

Использование классов

Чтобы подключить нужную тень к вашему блоку, просто добавьте в него класс .bShadow с нужным номером:

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

Чтобы создать вашему блоку эффект при наведении, добавьте понравившийся класс с номером, например, .bShadow-1 и напишите после цифры латинскую букву h. Например:

Посмотрите на примере класса .bShadow. При наведении он присваивает теневые значения соседнего класса .bShadow-1. Если вы хотите, чтобы при наведении или клике тень не появлялась, добавьте класс .bSnone

Плавная трансформация и анимация

Класс .bShadow по умолчанию использует плавную анимацию в .2s transition: transform 0.2s ease-in-out , а также включает свойство, которое предупреждает браузер о предстоящей трансформации тени и позиции will-change: transform, box-shadow; .

Используйте это, чтобы сделать красивую анимацию ваших блоков. Например, вы можете добавить свой класс или свойства с трансформацией:

Затем, добавьте в нужный вам контейнер:

<div >ваш текст</div> и вы увидите результат

Добавление параметра inset

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

Например .bShadow-1. Чтобы указать несколько классов, разделяйте их запятыми, как в примере ниже. Не забывайте ставить точку перед классом!

Генератор css box-shadow

Коллекция также подразумевает увеличение количества классов с тенями, созданных самим пользователем. То есть, вы можете использовать классический генератор теней, чтобы дополнять коллекцию своими собственными стилями. Нажав кнопку «Сохранить и добавить следующий», вы можете создавать бесконечное количество классов. Первому сгенерированному и последующим классам присваивается порядковый номер, который не находится в коллекции. Полученные стили можно с легкостью скопировать и вставить в корневой файл css вашего проекта или в файл box-shadows.min.css, созданный на сайте коллекции.

Сейчас планируется расширение коллекции и настройка npm пакета, но с этим есть небольшие затруднения. Поэтому, пока надеюсь на получение ссылки cdnjs и дальнейшее развитие проекта.

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

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