Статья связана с репозиторием на GitHub.
Сейчас немного о том, как оживить сайт без подключения JavaScript.
С тем, как описываются стили в CSS мы уже разобрались в отдельной статье. Сейчас создам простенький div с текстом. Например вот так:
Назначу блоку черную рамку, серую тень, размер 100 на 100 пикселей и отцентрированный текст шрифтом в 16 пикселей.
Теперь о том, как изменить блок при наведении. Для начала просто поменяю стили:
Наведение описывается добавлением :hover, как на скрине: если вы навели мышку на блок, то применяются правила из дополнительной инструкции. При этом, если правило описывается повторно, то заменяется, если отсутствует (как color к примеру), то оно добавляется.
Когда мышь уходит с блока, возвращаются прежние правила.
Эффект достаточно полезный например для меню: с помощью чистого CSS вы получаете возможность преобразовывать элементы.
Но что же с анимацией? В CSS существует несколько подходов - о них подробно написано в документации. Я остановлюсь на самом простом в использовании, а именно transition.
Формат написания следующий:
transition: all 1s easy;
Данное правило говорит о том, что изменение должно происходить для всех изменяемых правил за одну секунду в режиме easy. На самом деле, режим можно не указывать - он опционален. Опять же, в документации описаны все варианты.
Вместо all можно указать на какое правило должен повлиять transition:
transition: color 1s, background-color 0.5s, box-shadow 4s;
тут я задал изменение цвета шрифта за секунду, за половину секунды фон и тень будет плавно меняться за четыре секунды.
Также стоит упомянуть про обратный эффект. Если вы добавляете transition в :hover, то стоит добавить его и в основное описание. В противном случае произойдет анимация при наведении, но при уходе с элемента выполучите резкую смену.
Финальный вариант CSS выглядит так:
Все статьи попадают в "Оглавление канала". Не пропускаем новости!
