Eksperymentalne komendy CSS3: -webkit-mask

Ten obiekt jest dość obszerny, więc szczegółowy opis wykracza poza zakres tego artykułu i jest z pewnością warty dokładniejszej analizie, zwłaszcza, że ​​może to okazać się oszczędnością czasu w praktycznych zastosowaniach.

-webkit-maska ​​pozwala na zastosowanie maski do elementu, co pozwala na tworzenie wycięcia o dowolnym kształcie. Maska może być CSS3 gradient lub półprzezroczystych PNG. 

 
Przykład

Image mask:

1	.element {

2	background: url(img/image.jpg) repeat;

3	-webkit-mask: url(img/mask.png);

4

}

Przykład

Gradient mask:

1	.element2 {

2	background: url(img/image.jpg) repeat;

3	-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

4

}