Используем маску изображений в браузерах WebKit

Это не прописано в спецификациях, но браузеры WebKit поддерживают маскирование изображений. И работает оно также, как и в Photoshop. Вы определяете изображение, которое будет использоваться как маска. Черная часть изображения скрывает то, на что она накладывается. Белая - показывает то, что оказывается под ней. Серая часть изображения маски - частично прозрачная. Например, если у вас есть изображение:

<img src="/orig.jpg" alt="trees" class="circle-mask">

И у вас есть изображение, которое вы хотите использовать как маску:

То с помощью следующего набора CSS:

.circle-mask {

  -webkit-mask-box-image: url(mask.png);

}


Мы получим результат:

 

В действительности изображение маски не нужно

Первый трюк, который мы рассмотрим в данном уроке, это то, что объявленное в правиле -webkit-mask-box-image изображение не обязательно должно существовать. Мы можем использовать -webkit-gradient для создания графического образа маски. Да, мы можем сделать изображение, которое будет использовать только градиент, но создание градиентной маски программно означает, что ее можно настраивать "на лету" без использования дополнительного запроса HTTP.

-webkit-mask-position: 0 0;

-webkit-mask-size: 200px 200px;

-webkit-mask-image: -webkit-gradient(linear, left top, right bottom,

   color-stop(0.00,  rgba(0,0,0,1)),

   color-stop(0.45,  rgba(0,0,0,1)),

   color-stop(0.50,  rgba(0,0,0,0)),

   color-stop(0.55,  rgba(0,0,0,0)),

   color-stop(1.00,  rgba(0,0,0,0)));


Выше приведенный код CSS создает изображение размером 200px на 200px с переходом от полной непроницаемости в верхнем левом углу до полной прозрачности в правом нижнем углу с наклоном 45 градусов:

 

Перемещение маски

Обратите внимание, что мы устанавливали положение маски в свойстве -webkit-mask-position. Так как мы можем установить положение, то мы можем его изменять. То есть маску можно передвигать, например,  с помощью псевдо класса :hover

.circle-mask {

        -webkit-mask-position: 0 0;

}

.circle-mask:hover {

        -webkit-mask-position: -300px -300px;

}


Или можно использовать -webkit-animation :

@-webkit-keyframes wipe {

        0% {

                -webkit-mask-position: 0 0;

        }

        100% {

                -webkit-mask-position: -300px -300px;

        }

}

.circle-mask {

        -webkit-animation: wipe 6s infinite;

        -webkit-animation-delay: 3s;

        -webkit-animation-direction: alternate;

}


 

Делаем смену изображений

Объединение выше сказанного достаточно очевидно. Идея заключается в том, что у нас есть одно изображение поверх другого, и мы просто перемещаем маску:

<div id="banner">

        <div><img src="/images/banner-1.jpg" alt="Skyline 1"></div>

        <div><img src="/images/banner-2.jpg" alt="Skyline 2"></div>

</div>


 

#banner {

        width: 800px;        /* Устанавливаем размер изображения */

        height: 300px;

        position: relative;  /* Для абсолютного позиционирования внутри */

        border: 8px solid #eee;

        -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);

}



#banner div {

        position: absolute; /* По умолчанию позиционироуется вверху слева */

}



/* Второе изображение размещается сверху */

#banner div:nth-child(2) {

        -webkit-animation: wipe 6s infinite;

        -webkit-animation-delay: 3s;

        -webkit-animation-direction: alternate;

        -webkit-mask-size: 2000px 2000px;

        -webkit-mask-image: -webkit-gradient(linear, left top, right bottom,

                        color-stop(0.00,  rgba(0,0,0,1)),

                        color-stop(0.45,  rgba(0,0,0,1)),

                        color-stop(0.50,  rgba(0,0,0,0)),

                        color-stop(0.55,  rgba(0,0,0,0)),

                        color-stop(1.00,  rgba(0,0,0,0)));

}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/exlmVMGHb0w/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Используем маску изображений в браузерах WebKit | | 2012-06-25 16:21:53 | | Статьи Web-мастеру | | Это не прописано в спецификациях, но браузеры WebKit поддерживают маскирование изображений. И работает оно также, как и в Photoshop. Вы определяете изображение, которое будет использоваться как маска | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: