Как сделать анимированный эффект для тени используя HTML & CSS || Animated effect for shadow CSS

Всем привет!

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

Итак, у нас есть горизонтальное меню и с левой стороны у нас размещается логотип.

И как мы видим, он у нас поднимается вверх, тень уменьшается, опускается вниз, тень увеличивается.

Такой эффект можно делать также для других элементов.

И в этом видео вы узнаете, как сделать такой вот анимированный эффект для тени, используя HTML и CSS шаг за шагом.

Итак, приступим к созданию анимации для логотипа и тени.

У нас есть файл index.html, style.css.

В стиле подключены также подключены шрифты и добавлены простые обновляющие стили.

Теперь давайте внутри в баге создадим разметку, создадим

Внутри него у нас будет размещаться ссылка с классом Logo.

Внутри ссылки будет идти изображение AMG.

И за логотипом у нас будет размещаться ненумерованный список с классом NowBar.

Внутри него будет размещаться 5 пунктов.

Внутри них будут размещаться ссылки.

Добавим заглушку и открываем структуру.

И у нас открылась такая вот структура.

Давайте ее рассмотрим.

У нас есть тег Now.

Затем у нас есть ссылка с классом Logo.

Сюда также можно добавить заглушку.

И внутри нее размещается у нас IMG.

В IMG нам нужно добавить логотип.

Из папки IMG выбираем логотип.

И также у нас дальше идет ненумерованный список с классом NowBar.

И здесь идут пункты и ссылки.

Сюда давайте добавим название для ссылок.

Home, About, Services, Projects и допустим Contacts.

Теперь давайте откроем страницу в браузере.

И посмотрим, что у нас добавилось.

Итак, мы видим, у нас есть логотип и есть ссылки.

Логотип я брал на сайте, который называется logoipsum.com.

Эту вот ссылку оставлю в описании, чтобы вы могли перейти и посмотреть, какие есть здесь логотипы, выбрать и на них попрактиковаться.

Итак, давайте продолжим.

У нас есть логотип и есть ссылки.

Давайте свернем браузер, свернем в Visual Studio Code.

Перейдем в стили.

В стилях обратимся к селектору тега body.

Здесь укажем

Бэкграунд черного цвета добавим.

Теперь обратимся к тегу num.

И до него укажем.

Бэкграунд будет белого цвета.

Ширина будет 100% для нашего меню.

И сделаем так, чтобы оно было фиксированным.

Укажем position fixed.

Прижмем его к верху и к левой части.

Top 0, left также 0.

Добавим padding.

Внутренний отступ 2.5 рам и 5% справа и слева.

И давайте сделаем размещение.

Для него укажем Display Flex, чтобы элементы размещались один за одним в ряд.

И также сделаем, чтобы они размещались по разные стороны.

Укажем Justify Content, Space Between и Align Items Center, чтобы они размещались по центру.

Теперь нам нужно обратиться к тегу Nav и NavBar.

Работаем с этой частью нашего меню.

Также укажем display flex, чтобы они размещались один за одним и сделаем между ними отступ.

Укажем gap на 2rem.

Так, есть отступы.

Теперь нам нужно обратиться к navbar, к пунктам и к ссылкам и указать font-size.

Будет 2rem, увеличим размер шифта и цвет укажем черный.

Итак, есть у нас ссылки, есть у нас отступы.

Теперь давайте поработаем с логотипом.

Здесь мы обращаемся к классу Logo, к ссылке с классом Logo.

Туда укажем Position Relative.

Относительное позиционирование будет у нас.

И также добавим Animation свойства.

Дадим название Move на 3 секунды.

Дадим Easy In-Out.

для эффекта перемещения то есть в начале быстро и в начале медленно и в конце также медленно и infinity бесконечность теперь давайте применим правило keyframes сюда к этому логотипу чтобы он у нас перемещался сюда укажем название move 0% добавим запятая 100% у нас будет идти

Свойство transform translate y это по вертикали минус 1.

И здесь ниже укажем 50%.

Transform translate y будет 0.

И как мы видим у нас есть такая вот анимация для логотипа.

Теперь давайте создадим еще анимацию для теней.

Создадим саму тень.

Для этого нам нужно здесь ниже обратиться к лого.

И будем использовать псевдоэлемент before.

Затем здесь внутри в блоке объявления нам нужно добавить обязательное свойство content, чтобы псевдоэлемент before или after срабатывали.

Обязательно нужно не забывать добавлять это свойство.

Также укажем position absolute, чтобы этот элемент у нас абсолютно позиционировался относительно конкретно нашего логотипа.

Укажем ширина для него будет.

12 рэм.

Высота будет 0.5 рэм.

Также укажем дисплей блок.

Сделаем блочным этот элемент.

И размещение.

Top будет 8 рэм.

Относительно логотипа.

А left минус 1.5 рэм.

Также укажем margin auto.

Чтобы он размещался по центру.

border-radius будет 50% скругленный и также добавим box-shadow чтобы он у нас отобразился смещение по горизонтали будет 0 по вертикали 15 пикселей 10 пикселей размытия и цвет будет rgba 0,0,0 и альфа канал будет на 100% чтобы у нас тень отображалась как мы видим у нас под логотипом появилась такая вот тень но

Получается эффект такой, что этот вот наш псевдоэлемент вместе с логотипом перемещается.

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

Когда он опускается вниз, тень увеличивается.

Для этого нам нужно здесь для нашего псевдоэлемента добавить также свойство Animation.

Дадим название.

mu, shadow, 3 секунды, easy in out и infinity.

Затем здесь обращаемся также к keyframes.

Давайте отсюда, чтобы не было ошибок, скопируем название анимации, вставим сюда и укажем 0%, 100%.

У нас будет свойство transform translate y 1rem без минусового значения.

И также добавим Opacity на 0.5.

На 0.5.

Будет исчезать немного.

Теперь укажем здесь 50%.

Transform.

Translate.

Y будет 0.

И здесь Opacity 1.

И теперь у нас, как мы видим, такой вот эффект.

Когда логотип поднимается, тень уменьшается.

Опускается она на 0.

становится более четче.

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

Итак, в этом видео вы узнали, как сделать такой вот анимированный эффект для тени, используя только HTML и CSS шаг за шагом.

На этом все.

Спасибо за просмотр и успехов в обучении.

Если вам понравилось данное видео, ставьте лайк и подписывайтесь на мой канал.