| diamont1977 | Дата: Четверг, 21.12.2023, 16:50 | Сообщение # 1 |
|
Полковник
Группа: Администраторы
Сообщений: 168
Статус: Offline
| Простая градиентная маска на HTML + CSS
В статье сделаем простую градиентную маску, где соединим 2 изображение, и с помощью градиентов будет красивое сочетание и все это при HTML CSS. Если кратко и понятно, то CSS-маскирование может выставлять, а также контролировать созданную маску. Это мы говорим про то, какие нужно пикселя спрятать, и чтоб они были невидимы, а другие совершенно наоборот, видимы. Здесь говорим про прозрачны, что как раз будет маскировать слияние 2 изображений в один красивый переход.
Сама маска изначально имеет форму картинки или простого изображения, а также градиента. И когда происходит применение элемента к маске, она реально начинает делать определения видимости каждого пикселя. Не говоря про то, что сами пиксели могут быть частично невидимыми, в результате чего пикселя становятся полупрозрачными.
Маскирование в CSS выполняется с помощью изображение-маска свойство, а в качестве маски необходимо указать изображение. Все что на 100% черное в маске изображения, изначально идет в прозрачном формате, вообще все, что на 100% идет прозрачное, а значит полностью скрыто. Что находится между ними, то все частично будет замаскированное изображение.
Так получается, когда мы подключаем CSS, где идет картинка на картинку.
Установка:
HTML
Код <div class="osnovanie"> <div class="maseguna"> <div class="kadeka-1"></div> <div class="kadeka-2"></div> </div> </div>
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-маскировки, где как раз все выполнено для того, как объединить два изображения. С первого взгляда можно сказать, что так нарисовано, но все проще, с прозрачностью маски здесь идет наложение картинки на картинку.
Демонстрация
Скачать
|
| |
|
|
