712 читали · 5 лет назад
CSS Magic #2. Блюр-эффект (css blur effect)
Привет! В четвертом выпуске CSS Magic расскажу, как сделать красивый блюр эффект для карточки. Поехали! И так, сегодня мы будем делать блюр-эффект. Вот такого типа: Сделать такое можно вполне несложно с помощью filter: blur(). Но, конечно, не все так просто :) Начнем с разметки: HTML <div class="block block--blur">   <div class="block__man" id="superman">     <figure>       <img class="lazy lazy-hidden" src="//blog.maxgraph.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder...
349 читали · 1 год назад
Делаем анимацию фона (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...