<meta http-equiv="pics-label" content='(pics-1.1 "http://www.icra.org/ratingsv02.html" l gen true for "http://www.apple.com" r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.apple.com" r (n 0 s 0 v 0 l 0))'>
<p>You can create rich, interactive photo galleries by combining CSS 2D and 3D transforms with CSS transitions. By animating the -webkit-transform CSS property in your code, you can enable hardware-accelerated animations and deliver a top-notch experience in web pages on iPad and iPhone. You can also use CSS gradients to add a highlight to your photos, without having to add an additional image to the web page. Since these effects are defined in CSS, an older browser that doesn't support these properties will simply ignore them and your web page will degrade gracefully, automatically.</p>
<p class="aboveList">In this example:</p>
<ul class="square">
<li>Photos are positioned with <code>-webkit-transform</code>.</li>
<li>Photos are animated with CSS3 transitions.</li>
<li>The spotlight effect is drawn with <code>-webkit-gradient</code>.</li>
<h1>You’ll need to download Safari to view this demo.</h1>
</header>
<p>This demo was designed with the latest web standards supported by Safari. If you’d like to experience this demo, simply download Safari. It’s free for Mac and PC, and it only takes a few minutes.</p>
<li class="promo"><h3>Preparing Your Web Content for iPad</h3>
<p><a href="http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html">Learn how to make your website look and work great on iPad.</a></p>
<p class="cheat"><a href="http://webkit.org/">Developed by Apple, WebKit is the most advanced browser engine, drawing the web pages you see in Safari.</a></p>
<p class="gf-buy">Shop the <a href="http://www.apple.com/store/">Apple Online Store</a> (1-800-MY-APPLE), visit an <a href="http://www.apple.com/retail/">Apple Retail Store</a>, or find a <a href="http://www.apple.com/buy/locator/">reseller</a>.</p>