2 года назад
2.2.11 CSS: событие наведения мыши и легкая анимация
Статья связана с репозиторием на GitHub. Сейчас немного о том, как оживить сайт без подключения JavaScript. С тем, как описываются стили в CSS мы уже разобрались в отдельной статье. Сейчас создам простенький div с текстом. Например вот так: Назначу блоку черную рамку, серую тень, размер 100 на 100 пикселей и отцентрированный текст шрифтом в 16 пикселей. Теперь о том, как изменить блок при наведении. Для начала просто поменяю стили: Наведение описывается добавлением :hover, как на скрине: если вы навели мышку на блок, то применяются правила из дополнительной инструкции...
06:44
1,0×
00:00/06:44
545,2 тыс смотрели · 4 года назад
Как изменить курсор мыши в CSS3?
Свойство с помощью которого можно изменить курсор мыши называется cursor. Оно может принимать разные значения: crosshair, default, pointer и т.д. Переходим к практике. Для начала выполняем стандартные действия: создаем html-страницу и прописываем в ней ссылку на css-файл (о том как это сделать можно прочитать здесь). Далее добавляем на страницу ряд ссылок (в моем случае их 8) с атрибутом id. Вот так это должно выглядеть: В итоге у нас должен получиться ряд из восьми абсолютно одинаковых ссылок (но при этом значения атрибутов id будут разными)...
121 читали · 2 года назад
Анимации CSS: Transition,Transform,KeyFrames
TRANSITION Свойство transition позволяет плавно анимировать изменения CSS-свойств элемента. Оно позволяет задать переходные эффекты при изменении состояния элемента, таких как изменение цвета, размера, положения и других атрибутов. Применяется к элементам, которые имеют начальное и конечное состояние. Пример использования transition: Пошаговое руководство: Шаг 1: Определите элемент Сначала вам понадобится HTML-элемент, к которому вы хотите применить переходный эффект. Например, это может быть...