x
 
Олег Кузнецов
1 февраля 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как сверстать такую плашку с размытием фона?


Проще всего было бы использовать свойство backdrop-filter, которой позволяет наложить фильтр на фон:

<!-- index.html -->
<div class="box">
  <div class="panel">We are fighting
  for the survival of our culture, while
  there are cultural relativists
  in power</div>
</div>
.box {
  background: url('https://picsum.photos/500/500');
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
We are fighting for the survival of our culture, while there are cultural relativists in power

К сожалению, это свойство поддерживает только Сафари и самая свежая версия Эджа. В Хроме можно включить экспериментальную поддержку с помощью флага.

Но современные браузеры поддерживают свойство filter. Filter накладывает фильтр на сам элемент, поэтому мы можем провернуть трюк.

Сверстаем плашку без размытия:

Поддержка backdrop-filter
<!-- index.html -->
<div class="box">
  <div class="panel">We are fighting
  for the survival of our culture, while
  there are cultural relativists
  in power</div>
</div>
.box {
  background: url('https://picsum.photos/500/500');
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel {
  width: 300px;
  padding: 20px;
  border: .5px solid #fff;
  color: #fff;
  text-align: center;
  filter: blur(5px)
}
We are fighting for the survival of our culture, while there are cultural relativists in power

Продублируем фон в плашку с помощью псевдоэлемента и вынесем текст на отдельный слой, чтобы дублирующий фон не перекрывал его:

<!-- index.html -->
<div class="box">
  <div class="panel">
    <div class="text">We are fighting
    for the survival of our culture, while
    there are cultural relativists
    in power</div>
  </div>
</div>
.box {
  background: url('https://picsum.photos/500/500');
  /* ... */
}

.panel {
  position: relative;
  /* ... */
}

.panel::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url('https://picsum.photos/500/500');
}

.text {
  position: relative;
}
We are fighting for the survival of our culture, while there are cultural relativists in power

Зададим дублирующему фону такие же размеры и выравнивание, как у родительского элемента:

.panel::before {
  /* ... */
  background-size: 500px 300px;
  background-position: center;
}
We are fighting for the survival of our culture, while there are cultural relativists in power

И добавим продублированному фону размытие:

.panel::before {
  /* ... */
  filter: blur(3px);
}
We are fighting for the survival of our culture, while there are cultural relativists in power
P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Варвара Каратаева
1 февраля 2018

Будет ли работать «куцый» вариант, если фон двигается как слайд, а текст на плашке меняется через фейд, т. е. сама плашка не двигается?


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Чем плоха стилизация по айди? Вредные комментарии: зарубки, тудушки и документашки Типовые решения в вёрстке. Как сверстать визитку Когда нужно писать комментарии в коде?




Недавно всплыло

Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 1 Защититься от случайного нажатия «Сдаться» 1 Визуализация проявляет 4