Gmail on iPad Gets CSS3 powered "Stacked Cards" Interface

Google released a new "stacked cards" interface for selecting and managing multiple conversations on Gmail on iPad. "In the new interface, selected conversations are displayed stacked on the right panel for easy organizing, archiving or deleting. The second toolbar is gone so it's always clear which conversations you're working with. This new interface has also […]

Google released a new "stacked cards" interface for selecting and managing multiple conversations on Gmail on iPad. "In the new interface, selected conversations are displayed stacked on the right panel for easy organizing, archiving or deleting. The second toolbar is gone so it's always clear which conversations you're working with. This new interface has also been an opportunity to experiment with CSS3 transitions, which give mobile web applications a similar look and feel to native applications," explains Google.

To try the Gmail webapp on the iPad, just go to gmail.com in Safari. For quick access, create a homescreen link.

"In the stacked cards interface, cards representing selected conversations transition onto the screen when their corresponding conversation is selected, and transition off of the screen when it's deselected. When cards are selected, they're transitioned out from underneath the conversation list on left side of the app into the selected conversation area on the right side of the app. To move the card onto the screen, we set an initial transform, configure the transition, and finally apply the desired final transform to the element," explains Google.

More Info: CSS3 Transitions and Transforms in Gmail for the iPad

[Source]