HTML and CSS Reference
In-Depth Information
.mask {
-webkit-mask-position: -60 -60;/*x and y for mask position*/
-webkit-mask-size:600px 400px;
-webkit-mask-image: url(star.png);
}
</style>
</head>
<body>
<div id='theImage' class='mask'></div>
</body>
</html>
From Listing 12-4, you can see you have an image with an ID of theImage and a mask class called mask . On the
div with the image, you apply the class mask that uses CSS to apply a Webkit-only property called webkit-mask-image ,
which uses a star.png asset to create the mask over the image asset. You can also tweak some of the mask properties
such as position and size by using -webkit-mask-position and -webkit-mask-size so you can get more accurate
position and center the image within the star.png mask (see Figure 12-5 ).
Figure 12-5. An example of Webkit masks
Note
You can use SVg shapes, CSS gradients, and images to mask dOM elements instead of png images.
As you can see from this example, adjusting your star.png file could drastically affect the quality of output.
It's ideal to use SVG if you're going to scale or adjust your masks. For a great write-up on masks in CSS3, visit
http://css-tricks.com/webkit-image-wipes . While browser support is minimal for cross-browser production
work, it still looks like a valid solution on iOS, Android, and BlackBerry where saving k-weight on mobile is a must!
 
 
Search WWH ::




Custom Search