Glassmorphism для приятных миниатюр изображений

внешний интерфейс
Glassmorphism для приятных миниатюр изображений

задний план

Я снова еду на рыбалку! ! Сегодня снова делал спрос, и обнаружил, что товар выдает список миниатюр (хотя в списке только один пункт аранжировки, остальные надо мозгом дополнять), но нашел!Воображение всегда прекрасно, а реальность очень худая!

Что такое эффект матового стекла?

Glassmorphism — очень популярная новая тенденция в дизайне прямо сейчас, вы можете увидеть ее на таких сайтах, как Dribbble, и даже такие крупные компании, как Apple и Microsoft, используют ее. В основном, его главная особенность — это полупрозрачный фон, а также тени и границы.

FBI Warning!Отныне я буду рисовать для вас! ! !

Мы надеемся полностью отобразить схему прототипа нашего продукта.

image

Вроде следующее...

image

В списке миниатюр изображений на странице размер, размер и соотношение сторон каждого изображения не должны совпадать. . Это приведет к следующему виду

image

image

Если что-то подобное произойдет, то это должно быть слева и справа, и будет определенное количество пробелов вверх и вниз.

Показать результаты

Официальный пример изображения компонента Image от Ant Design, использованного для изображения. Свяжитесь со мной, чтобы удалить его, если оно нарушает авторские права.

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

image

image

image

Как насчет этого? Это работает хорошо? ? Это выглядит намного лучше, чем оставить белое и черное...

image

код открыт

Сначала напишите код шаблона HTML для монтирования наших изображений и стилей.

<!DOCTYPE html>
<html>
  <head>
    <title>实现图片的毛玻璃效果</title>
  </head>
  <body>
    <div class="background">
      <div class="background-content">
        <div class="background-content-image"></div>
        <img
          src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
          alt="测试图片"
        />
      </div>
    </div>
  </body>
</html>

image

В основном часть CSS, которую мы используем на этот разfilter: blur()чтобы размыть фоновое изображение

<style>
  .background {
    width: 260px;
    height: 200px;
    overflow: hidden;
  }

  .background-content {
    width: 260px;
    height: 100%;
    position: relative;
    /* 让图片居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .background-content-image {
    position: absolute;
    /* 重点，不能让背景大过于展示的图片 */
    z-index: -1;
    width: 260px;
    height: 100%;
    filter: blur(8px);
    background-image: url(https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  img {
    max-height: 100%;
  }
</style>

image

Таким образом достигается эффект предварительного просмотра миниатюр изображения из матового стекла, который выглядит великолепно!

Не забудьте установить родительский элементoverflow: hidden;В противном случае размытые тени и границы будут переполняться и влиять на другие элементы.

мы используемfilter: blur()Чтобы достичь этого, этот стиль по-прежнему совместим с точки зрения совместимости.В настоящее время основные веб-сайты с эффектом матового стекла используютbackdrop-filter: blur();реализовать.

Ниже приведены соответствующие документы, которые я нашел, когда искал проблемы, с которыми столкнулся.Вы можете взглянуть.Эффект очень хороший и привлекательный. Я считаю, что после эффекта выравнивания это эффект матового стекла.

Что такое Глассморфизм? Реализовано с использованием только HTML и CSS

Glass UI

Glassmorphism in user interfaces

Рыбу ловить не просто! ! ! В то же время, чтобы показать вам мой последний эффект рыбалки, время планирования также сокращено. . Если это поможет вам хоть немного, пожалуйста, поставьте большой палец вверх и поехали~

Категории