Эффект маски с использованием CSS

Здравствуйте, друзья, читатели и гости блога. Сегодня опять статья про картинки. Очень уж мне эта тема нравится. Сделаем эффект маски для изображений используя свойство градиент. Не нужно прибегать к графическим библиотекам и другим редакторам. Всё сделаем сами просто в сообщении блога.

Градиенты используются для плавной заливки элемента страницы, когда один цвет переходит в другой. В статье красивые цветовые эффекты CSS я подробно писала о них.

Маска действует в виде наложения на элемент и обрезает его визуально. Делает участки картинки прозрачным или полупрозрачными. Маска состоит из изображения или градиента. Давайте  смотреть.

Маска с использованием градиента.

Для примера возьмём вот такую картинку jpg.

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

<img src=" адрес картинки jpg" style="-webkit-mask-box-image:
    -webkit-linear-gradient(black, transparent);">

В результате чего имеем-




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

<img src=" адрес картинки jpg" style="-webkit-mask-box-image: -webkit-linear-gradient( left,transparent, transparent 5%, white 20%, white 80%, transparent 95%); border-radius: 70px;" />

Результат-



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

<div style="background: white; padding: 20px;
     -webkit-mask-box-image: -webkit-radial-gradient(white,transparent 50%);">здесь текст </div>

 Вот результат-

ghbdtn ghbdtn ghbdtn ghbdtn ghbdtnghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtnghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtnghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtnghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtnghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn ghbdtn

Маска с использованием изображения.

В этом случае нам понадобится само изображение в формате jpg. Добавим ему свойство webkit-mask-box-image , что позволит масштабировать маску по границам картинки. И нам нужно изображение - маска, какой - то не прозрачной фигуры, на прозрачном фоне( я взяла для примера сердечко в формате PND). Чтобы было понятнее - эта картинка, будет как "трафарет" для обрезания основной .
Хочу отметить, что свойство webkit-mask-box-image не поддерживается браузером mozilla.

<img src="адрес картинки. jpg" width="250" height="140" style="-webkit-mask-box-image: url(адрес картинки .png);" />

И вот результат-

В Блоггере все эти коды с эффектом маски и вашими картинками устанавливаются в редакторе сообщения в режиме HTML в нужном месте сообщения. Попробуйте с ними поиграться. Можно создать просто необыкновенные визуальные отображения ваших изображений. У меня всё. Спасибо всем за внимание и до новых встреч.

👇

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email