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.
background as a gradient and then set
background-image to none, your gradient will disappear. A couple of “duh!” moments there!
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