<div id="complete_example"></div>

<div id="e_example">
	<div class="palm-text-wrapper">
		<div class="palm-body-text" x-mojo-loc=''>
			Masks allow you to obscure areas of a box element by overlaying it with an alpha mask.
		</div>
		
		<div class="palm-body-title" x-mojo-loc=''>
			Examples
		</div>
		
		<div class="palm-body-text" x-mojo-loc=''>
			An example of using <em>-webkit-mask</em> property, to clip the image to create a fuzzy edge effect.
		</div>
		
		<div style="text-align:center">
			<img src="images/photo.jpg" alt="photo" style="-webkit-mask-box-image: url(images/mask.png);"/>
		</div>
			
		<div class="palm-body-text" x-mojo-loc=''>
			<div style="width:165px;float:left"><img src="images/mask.png"/></div>
			<div style="padding-top:1.5em">This is the alpha mask image (png-24) applied to created the effect above.</div>
		</div>
		
		
		<div class="palm-body-text" x-mojo-loc='' style="clear:both">
			Another example of the same image with a different mask.
		</div>
		
		<div style="text-align:center">
			<img src="images/photo.jpg" alt="photo" style="-webkit-mask-box-image: url(images/mask-dots.png);"/>
		<div>
		
	</div>
</div>

<div id="e_about">
</div>

<div id="e_html">
<img src="images/photo.jpg" id="photo" alt="photo" />	
</div>

<div id="e_css">
#photo {
	-webkit-mask-box-image: url(images/mask.png);
}
</div>