Link: Diagonal Thumbnails Gallery | PEPSized

Diagonal Thumbnails Gallery | PEPSized

We got used to standard grids and clear horizontal and vertical axes. No wonder that the eye-catching layouts based on the diagonal lines have become one of the recent trends in web design. In this tutorial we will create a very simple diagonal thumbnails gallery.
We will use css3 2D-transforms and pseudo elements to display the diamond-shaped elements with a background image.
Note that to keep the code below concise I omit the vendor prefixes before “transform” and “transform-origin”.
This entry was posted in Delicious and tagged , , , . Bookmark the permalink.