ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простая градиентная маска на HTML + CSS

Простая градиентная маска на HTML + CSS

В статье сделаем простую градиентную маску, где соединим 2 изображение, и с помощью градиентов будет красивое сочетание и все это при HTML CSS. Если кратко и понятно, то CSS-маскирование может выставлять, а также контролировать созданную маску. Это мы говорим про то, какие нужно пикселя спрятать, и чтоб они были невидимы, а другие совершенно наоборот, видимы. Здесь говорим про прозрачны, что как раз будет маскировать слияние 2 изображений в один красивый переход.

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

Маскирование в CSS выполняется с помощью изображение-маска свойство, а в качестве маски необходимо указать изображение. Все что на 100% черное в маске изображения, изначально идет в прозрачном формате, вообще все, что на 100% идет прозрачное, а значит полностью скрыто. Что находится между ними, то все частично будет замаскированное изображение.

Так получается, когда мы подключаем CSS, где идет картинка на картинку.

Применение эффектов к изображениям с помощью CSS

Установка:

HTML

Код

CSS

Код

.maseguna {
  position: relative;
  aspect-ratio: 2.4 / 1;
}

.kadeka-1, .kadeka-2 {
  position: absolute;
  inset: 0;
  background-size: cover;
}

.kadeka-1 {
  background-image: url(https://rataku.com/images/2023/10/20/sw-simple-scene-1.jpg);
}

.kadeka-2 {
  background-image: url(https://rataku.com/images/2023/10/20/sw-simple-scene-2.jpg);
  -webkit-mask-image: linear-gradient(to right, transparent 33%, #fff 67%);
}

/* everything else */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  background-color: #111;
}

.osnovanie {
  width: min(1000px, 100%);
}

Здесь представлен пример, который выполнен на чистом CSS-маскировки, где как раз все выполнено для того, как объединить два изображения. С первого взгляда можно сказать, что так нарисовано, но все проще, с прозрачностью маски здесь идет наложение картинки на картинку.

Демонстрация

20 Октября 2023 Загрузок: 1 Просмотров: 620 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0