Эффект маски с использованием 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


9 комментариев:

  1. Привет, Вика. Представляешь, мне тоже очень нравится тема про картинки и варианты их подачи. Спасибо. Сегодня же попробую.

    ОтветитьУдалить
    Ответы
    1. Люба, я не представляю, а знаю что ты это тоже любишь. Да к тому же у тебя фантазия работает в нужную сторону.

      Удалить
    2. Спасибо, Вика, на добром слове. Сделала картинки, всё просто и эффект понравился http://000149.blogspot.ru/ Будет тема, оформлю так в основном блоге.

      Удалить
  2. Красивые и, что касаемо создания, удивительные эффекты!

    ОтветитьУдалить
    Ответы
    1. Спасибо, Наташа. Ты и без всяких таких эффектов умеешь камерой создать фантастические снимки. Любуюсь просто, удивляюсь и восхищаюсь.

      Удалить
  3. ЗДОРОВО с картинками ты придумала. ИНТЕРЕСНО! Виктория, сегодня изменилась платформа Blogger. Я очень испугалась в начале. Потом во всем разобралась.
    Но к старому привыкаешь, и новое не всегда нравится.

    ОтветитьУдалить
    Ответы
    1. Да, Ирина. Гугл в этом году вообще сюрпризами радуете. Столько новшеств, что привыкать не успеваешь. Но к новому интерфесу админки, думаю быстро привыкнем.

      Удалить
  4. Люба, какую прелесть ты выдумала. Я же говорю-полёт фантазии в нужном направлении. С градиентом вообще если менять цвет можно всяких эффектов добиться.

    ОтветитьУдалить
    Ответы
    1. С градиентом попробовала, пока не нашла нужный вариант. Спасибо тебе, Вика, за интересные шпаргалки.

      Удалить

Пользовательский поиск
Foto Saya
My Photo