10 простых эффектов при наведении без плагинов.

10 простых эффектов при наведении без плагинов.

Приветствую вас, дорогие друзья!

В этой статье я покажу вам 10 простых эффектов при наведении, для реализации которых не нужно устанавливать какие-то дополнительные плагины, модули, подключать библиотеки. Данные эффекты можно реализовать абсолютно на любом сайте, не зависимо от того, на какой CMS он у вас работает, и для этого практически не нужно вникать в код.

Обучение фотошоп

1. CSS-эффект появления тени при наведении

Начнем с самого простого эффекта – это эффект появления тени при наведении.

Заказать звонок

Пример изображения для эффектов при наведении

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

  1. 1.Прежде всего, мы открываем страницу или запись или виджет, или файл темы, где у вас расположен этот элемент.
  2. 2.Далее нам нужно будет присвоить ему класс с названием hover-effect1. В моём примере он присвоен для кнопки и для изображения.

    Кстати, в WordPress, для того, что бы присвоить CSS-класс изображению не нужно переходить на вкладку «Текст», а можно просто кликнуть по изображению на вкладке «Визуально», далее кликнуть по значку карандашика.

    Дополнительные настройки изображения

    Затем разворачиваем дополнительные настройки, и здесь мы можем дописать дополнительный CSS-класс. После чего нажимаем на кнопку «Обновить».

    Добавляем класс для изображения
  3. 3.После того как мы присвоили нужный класс, нам нужно в файл style.css активной темы добавить определенный фрагмент кода, который собственно говоря, и позволит нам добавить тень.
  4. 4.Для внесения изменений в файл стилей либо подключаемся к нашему сайту по FTP. Я для этого обычно использую программу NotePad++.
    Как пользоваться программой NotePad++ я рассказывала в этой статье: Редактирование файлов сайта в Notepad++

    Либо же можно перейти в раздел «Внешний вид» => «Редактор». Здесь у нас обычно файл стилей открыт сразу же по умолчанию. Но на всякий случай убедитесь, что у вас в заголовке над рабочей областью написано «Таблица стилей (style.css)».

    Редактирование файлов в админке WordPress
  5. 5.Прокручиваем в самый конец и здесь, в самом конце нашего файла нам необходимо добавить следующий CSS-код:

После чего нажать на кнопку «Обновить файл» внизу страницы

Для того, чтобы у нас определённые CSS-свойства работали при наведении, нам необходимо использовать псевдокласс :hover.
CSS-стили, которые написаны для этого селектора будет работать только в том случае, когда на элемент наведен указатель мышки.

box-shadow – данное CSS свойство отвечает за добавление тени. Более подробно об особенностях этого свойства и значении его параметров я писала в этой статье.

Далее для того, что бы эффект был более плавным, мы используем CSS-свойство transition. И здесь у нас указывается задержка в секундах, то есть, насколько плавно будет происходить смена CSS-эффектов.

Плавная анимация CSS

Так же, для того, что бы эта тень у нас не только появлялась, но и исчезала плавно, нам необходимо свойство transition для самого класса hover-effect1

Так же для этой тени вы можете изменять смещение, уровень размытия, цвет и т.д. Более подробно об этом у меня было отдельное видео и отдельная статья, с которой вы можете ознакомиться по этой ссылке: Как сделать тень картинки в CSS?

2. CSS-эффект увеличения при наведении

Заказать звонок

Пример изображения для эффектов при наведении

Этот эффект при наведении создаётся аналогично предыдущему. Нам просто нужно присвоить нужному элементу на сайте класс «hover-effect2» и добавить в файл стилей style.css следующий код:

Для увеличения элемента мы используем CSS свойство transform: scale(1.1);

В скобочках указывается значение увеличения или уменьшения. 1 это размер 100%, если нам нужно увеличить элемент на 10% указываем в скобочках 1.1. Для увеличения на 20% указываем 1.2 и так далее. Для уменьшения на 10% пишем 0.9.

Это CSS-свойство, так же как и предыдущее указывается с кроссбраузерными префиксами.
Ну и, конечно же, везде добавляем CSS свойство transition для более плавной анимации.

3. CSS-эффект плавного смещения при наведении

Заказать звонок

Пример изображения для эффектов при наведении

Как и для предыдущих примеров присваиваем нужному элементу СSS-класс «hover-effect3»

И в файле style.css дописываем код:

Здесь для смещения элемента используется CSS свойство margin, которое отвечает за внешний отступ.
Для него мы можем задать следующие значения:

  • margin-top:20px; — для отступа сверху
  • margin-bottom: 20px; — для отступа снизу
  • margin-left: 20px; — для отступа слева
  • margin-right: 20px; — для отступа справа

Значение может быть как положительным так и отрицательным.

4. CSS – эффект поворота при наведении

Заказать звонок

Пример изображения для эффектов при наведении

Точно так же дописываем элементу класс «hover-effect4». А в файле стилей пишем следующее:

В основе этого эффекта при наведении лежит CSS свойство transform со значением rotate(15deg);, в скобочках указываем на сколько градусов нужно сделать поворот. Значение может быть как положительным так и отрицательным.

5. Эффект скругления углов при наведении

Заказать звонок

Пример изображения для эффектов при наведении

Присваиваем нужном элементу CSS-класс «hover-effect5» и в файле стилей пишем код:

Здесь за скругление углов отвечает свойство border-radius, подробнее о нём я писала в отдельной статье: «Скругление углов CSS»

Поэкспериментировав с его значениями можно получить интересные эффекты.

6. Изменение цвета рамки при наведении

Заказать звонок

Пример изображения для эффектов при наведении

Для этого эффекта мы будем использовать класс «hover-effect6» и добавим в файл стилей следующий код:

Здесь мы сначала для элемента с классом .hover-effect6 задаём рамку толщиной в 10px светлого цвета, а при наведении изменяем цвет рамки и добавляем тень. Значения рамки вы можете менять под себя.

Параметры свойства border

7. Изменение прозрачности при наведении

Заказать звонок

Пример изображения для эффектов при наведении

Для этого эффекта присвоим элементу класс «hover-effect7» и добавим такие стили:

Сначала мы задаём прозрачность 50% при помощи CSS свойства opacity:0.5;

Значение у него изменяется от 0 до 1. Потом при наведении прозрачность становится 100%, т.е. opacity:1;

8. Эффект размытия при наведении

Заказать звонок

Пример изображения для эффектов при наведении

Для этого эффекта присвоим элементу класс «hover-effect8» и воспользуемся свойством -webkit-filter: blur(2px);

В скобках мы можем изменять параметры размытия.

9. Эффект окрашивания в чёрно-белый цвет при наведении

Заказать звонок

Пример изображения для эффектов при наведении

Добавляем класс «hover-effect9» и для него в CSS файле задаём такие свойства:

Здесь мы используем свойство -webkit-filter: grayscale(100%);

При необходимости можно изменить значение в процентах.

10. Изменение контраста при наведении

Заказать звонок

Пример изображения для эффектов при наведении

Присваиваем элементу класс «hover-effect10» и пишем в файле стилей следующее:

Для этого эффекта нам понадобится свойство -webkit-filter: contrast(185%);

Значение контраста указывается в скобках в процентах.

Что делать если не получается задать класс для элемента?

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

В этом случае мы можем:

  1. 1.Проинспектировать код данного элемента при помощи встроенных инструментов для вебразработчиков в любом браузере. Как это делается я писала в этой статье: «Как определить ID и класс элемента на странице?»
  2. 2.Определить его класс и вставить в CSS файл вместо класса того эффекта, который вам понравился. Например:

Видеоинструкция

Как научиться продвигать сайты?

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

Если данная статья была для вас полезной – делитесь ею в соцсетях и оставляйте свои комментарии.

Успехов вам в освоении сайтостроения!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

1 комментарий

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

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

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif