🚀 Полное руководство по созданию анимированного фона на CSS и HTML
Делаем анимацию фона (background) на css
Добрый день. Рассмотрим как просто сделать анимированный градиентный фон на чистом css. В этой статье сделаем градиентный фон и при помощи CSS стилей анимируем плавную смену градиента фона. Делаем простую страничку в HTML, примерно так: <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Тест</h1> </body> На этой странице подключена только таблица стилей и в теге body указан заголовок h1. Далее в файле styles.css вставляем такой текст: body { background: linear-gradient(90deg, rgba(132,128,194,1) 0%, rgba(177,177,218,0...
Анимация CSS grid (как сделать + примеры)
Я рад пролить свет на тот факт, что свойства CSS grid-template-rows и grid-template-columns теперь можно анимировать во всех основных веб-браузерах! Что ж, CSS Grid уже давно технически поддерживает анимацию, поскольку она встроена прямо в спецификацию CSS Grid Layout Module Level 1. Но анимация этих свойств сетки только недавно стала поддерживаться всеми тремя основными браузерами. Давайте посмотрим на несколько примеров, чтобы дать волю творчеству? Пример 1: Расширение боковой панели Прежде всего, это то, о чем мы говорим: Простая двухколоночная сетка...