Давайте посмотрим на тень элементов, и сделаем маленькие анимации при наведении. Тень делается с помощью css, а точнее с помощью атрибута box-shadow, он очень сложный, но мы рассмотрим его! Пример CSS: И у нас будет красивая серая тень! Теперь попробуем сделать свою, четыре цифры означают сдвиг тени. Это сразу сложно понять, поэтому после урока попробуйте изменить код в начале урока под себя. Теперь сделаем анимацию при наведению ссылку: HTML: В стилях к кнопке мы добавили цвет и отступы, а потом к a добавили :hover, это псевдокласс, который добавляет настройку к элементам на которые наведена мышка или нажато с телефона! Псевдокласс hover можно добавить к многим тегом, но вы должны уметь остановиться вовремя! Подписывайтесь и ставьте лайки, а это конец, попробуйте использовать тень!!!
Давайте посмотрим на тень элементов, и сделаем маленькие анимации при наведении. Тень делается с помощью css, а точнее с помощью атрибута box-shadow, он очень сложный, но мы рассмотрим его!
Пример CSS:
- div {
- box-shadow: 5px 5px 10px 2px gray;
- }
И у нас будет красивая серая тень! Теперь попробуем сделать свою, четыре цифры означают сдвиг тени.
- Первое значение, это сдвиг по горизонтали, плюсовое значение значит тень слева, а отрицательное справа.
- Второе, это сдвиг по вертикали, и всё так же, плюсовое сдвиг вниз, а отрицательное вверх.
- Третье значение, это радиус размытия, на сколько далеко будет размыта тень.
- Четвёртое, насколько тень будет большая, растяжение тени.
- После идёт цвет тени, его вы выберете по своему вкусу.
- Ещё в начало можно добавить inset, если его добавить, то тень будет внутри, а не снаружи!
Это сразу сложно понять, поэтому после урока попробуйте изменить код в начале урока под себя.
Теперь сделаем анимацию при наведению ссылку:
HTML:
- <!DOCTYPE html>
- <html>
- <head>
- <title>HOVER</title>
- <meta charset="UTF-8">
- <style>
- a {
- margin 15px;
- color: red;
- background-color: blue;
- }
- a:hover {
- color: blue;
- background-color: red;
- }
- </style>
- </head>
- <body>
- <a href="https://zen.yandex.ru/id/5e7c78ee99d560276a9df6e4">НАЖМИ</a>
- </body>
- </html>
В стилях к кнопке мы добавили цвет и отступы, а потом к a добавили :hover, это псевдокласс, который добавляет настройку к элементам на которые наведена мышка или нажато с телефона! Псевдокласс hover можно добавить к многим тегом, но вы должны уметь остановиться вовремя!
Подписывайтесь и ставьте лайки, а это конец, попробуйте использовать тень!!!