Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net

Скачать Простая градиентная маска на HTML + CSS бесплатно
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
21.12.2023, 16:49
Простая градиентная маска на 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-маскировки, где как раз все выполнено для того, как объединить два изображения. С первого взгляда можно сказать, что так нарисовано, но все проще, с прозрачностью маски здесь идет наложение картинки на картинку.

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

Скачать
Категория: Скачать Скрипты Ucoz бесплатно бесплатно | Добавил: diamont1977
Просмотров: 31 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
avatar
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мы в ВКонтакте
Популярные новости
Шаблон 7ol...
Шаблон для...
Уникальный...
Оригинал с...
Шаблон для...
Лучшие фай...
Последние ...
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Top.Mail.Ru

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 13
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 1407
    Всего новостей: 0
    Всего статей: 0
    Темы форума: 1533
    Категории
    Шаблоны Ucoz бесплатно [24]
    Скачать бесплатно Шаблоны Ucoz бесплатно
    Скрипты Ucoz бесплатно [94]
    Скачать Скрипты Ucoz бесплатно
    Шапки для Ucoz [0]
    Скачать Шапки Ucoz бесплатно
    Иконки для Ucoz [5]
    Иконки Ucoz бесплатно
    Кнопки Ucoz бесплатно [3]
    Тут найдете и скачаете Кнопки Ucoz бесплатно
    Уроки Ucoz бесплатно [5]
    Тут найдете и скачаете Уроки Ucoz бесплатно
    Для Форумов Ucoz бесплатно [0]
    Тут найдете и скачаете Для Форумов Ucoz бесплатно
    Разное Ucoz бесплатно [38]
    Тут найдете и скачаете Разное Ucoz бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Загрузка
    Яркий микс
    Шрифт - a ...
    Web-дизайн...
    Municipal ...
    Последние ...
    Фрукты