Создание потрясающей галереи на HTML, CSS и JavaScript | CSS-анимация, Blur, Parallax, Gradient
2016 смотрели · 2 года назад
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...
CSS эффект исчезновения или fadeOUT + BLUR без JavaScript
Интересный анимированный эффект на CSS3 без JavaScript (кроссбраузерность подключать не стал), но это возможно. Создаем в HTML обертку: <div class="wrapper">
<span>A</span><span>P</span><span>E</span><span>X</span><span>W</span><span>E</span><span>B</span>
</div> Прописываем CSS для обертки:.
wrapper {
display: block;
text-align:center;
font-size: 60px;
font-weight: bold;
} CSS для каждого элемента: .wrapper span {
line-height:500px
} .wrapper span:nth-child(1) {
animation: blur 3s ease 0s 1;
animation-fill-mode: forwards;
} ...