Premium Pixels Image Gallery In HTML

I’ve taken the Premium Pixels Image Gallery Design (PSD) and turned it into HTML, as a means of testing what I can do with CSS3. I’m pretty pleased with what I’ve been able to accomplish using CSS rather than images.

The image above is a comparison of the PSD (top) and the HTML (bottom). The only images I used are the thumbnails. All of the corners, shadows, bevels and borders are done in CSS. I could have very easily accomplished all of this with a couple of images, but I wanted to see how faithfully I could recreate the design without them.

It was a really nice experiment and I learned a few things that are obvious when you think about them, but not things you might think about! Pseudo-elements can’t be modified by JavaScript, as they’re not part of the DOM and CSS gradients are background images, so if you set background as a gradient and then set background-image to none, your gradient will disappear. A couple of “duh!” moments there!

I did use jQuery to set some background images, which I could have done using hardcoded styles, but you would never want to have a style for each gallery image. If users have JavaScript turned off, it degrades nicely enough and still works, although doesn’t look as nice.

You can view the demo or get the source from my Bitbucket repository. As it’s just an experiment of what can be done in CSS3 I’ve only tested and got it working in the latest versions of Internet Explorer, Firefox, Chrome, Safari and Opera. The gallery isn’t actually functional, in terms of loading in images when clicking on thumbnails either.

If anyone has any suggestions or questions then please feel fee to drop me a comment! :D

Leave a Comment