Safari Technology Demos

Back to Overview
Web Gallery
Best Viewed: Safari on iOS, Mac OS X, Windows

Web Gallery

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.

In this example:

  • Photos are positioned with -webkit-transform.
  • Photos are animated with CSS3 transitions.
  • The spotlight effect is drawn with -webkit-gradient.

Related Resources