Среда, 26 Декабря 2012 13:45

Маска для блока на CSS3

Written by 
Оцени эту запись
(2 Голоса)

В данной статье рассмотрим свойство mask-image и его возможности.

 

 

Сделаем маску для блока при помощи картинок и градиентов. Свойство mask-image является новым, потому будем расматривать его работу в WebKit браузерах(Chrome и Safari). Соответственно все описаннеы свойтва должны использоваться с вендорными префиксами -webkit-.

 

Для работы с масками доступны такие свойства:

 

 

  • -webkit-mask -- общее свойство для задания маски, в нем можно задать изображение для маски, ее размер, позицию и т.д.
  • -webkit-mask-attachment -- определяет будет ли скроллиться маска при скролле страницы, значения - scroll и fixed
  • -webkit-mask-box-image -- задает маску для границы блока, в значении свойства указывается url и расположение маски
  • -webkit-mask-clip -- определяет будет ли маска блока заходить на его границы
  • -webkit-mask-composite -- устанавливает стиль композиции маски, ее распространение на границы и отступы блока, значения border и padding
  • -webkit-mask-image -- задает изображение для маски
  • -webkit-mask-origin -- задает начало расположения для значений -webkit-mask-position, значения - content, border, padding
  • -webkit-mask-position -- определяет расположение маски
  • -webkit-mask-position-x -- расположение маски по горизонтали
  • -webkit-mask-position-y -- расположение маски по вертикали
  • -webkit-mask-repeat -- задает повторение маски - repeat, repeat-x, repeat-y
  • -webkit-mask-size -- задает размеры изображения маски

 

Для первого примера зададим в роди маски маленькое изображение:

 

 

<div style="background: url(http://kate-land.net/images/stories/red_cat.jpg); -webkit-mask-image: url(http://kate-land.net/images/stories/img-masc.png); -webkit-mask-repeat: repeat; -webkit-mask-size: 5px 6px; width: 300px; height: 225px;"></div>
 
 
 
 
 
 

Теперь попробуем изменить размер маски при помощи свойства -webkit-mask-size:

 

<div style="background: url(http://kate-land.net/images/stories/red_cat.jpg); -webkit-mask-image: url(http://kate-land.net/images/stories/img-masc.png); -webkit-mask-repeat: repeat; -webkit-mask-size: 20px 20px; width: 300px; height: 225px;"></div>

 

 

 

 

 

Далее воспользуемся градиентом в роли маски:

 

 

<div style="background: url(http://kate-land.net/images/stories/red_cat.jpg); -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); width: 300px; height: 225px;"></div>
 
 
 
 
 
 

 

Или сделаем его радиальным:

 

 

<div style="background: url(http://kate-land.net/images/stories/red_cat.jpg); -webkit-mask-image: -webkit-radial-gradient(center center, circle, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 40%);  width: 300px; height: 225px;"></div>
 
 
 
 
 
 
То же самое можно сделать для блока с текстом:
 
 
 
<div style="-webkit-mask-image: -webkit-radial-gradient(center center, circle, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 40%);  width: 300px; height: 225px;">
    При помощи градиентной заливки -webkit-linear-gradient и background-size можно делать квадратики, треугольнички и полосочки на фоне.
    <br />
    Для создания полосочек задаем градиентную заливку от нужного цвета до прозрачного (transparent) и каждому цвету 50% ширины (значение может меняться в зависимости от дизайна). Свойство background-size делает повтор нашей одинокой полосочки в каждых 50 пикселях.
</div>
 
 
При помощи градиентной заливки -webkit-linear-gradient и background-size можно делать квадратики, треугольнички и полосочки на фоне.
Для создания полосочек задаем градиентную заливку от нужного цвета до прозрачного (transparent) и каждому цвету 50% ширины (значение может меняться в зависимости от дизайна). Свойство background-size делает повтор нашей одинокой полосочки в каждых 50 пикселях.
Вот, собственно, и все, на что хватило моей фантазии))) Еще могу только предложить измениние маски при наведении:
 
 
 
 
 
 
 
 
 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов