CSS3-based website designs are all the rage, and I am always on the lookout for premium examples of the styles at work in the wild. This little gem of a site makes rather intense use of the box-shadow and text-shadow properties. Often I find that people use these in only a few subtle ways, and sometimes they feel out of place. In this case, the designer used multiple shadows on many design elements to create a 3D box effect. You can stack these styles to apply many shadows, thereby creating a solid effect like this. I love that they apply the style to text and buttons as well as some images. Note that on the images the effect is built into the image, likely produced in PhotoShop. While it might not seem like a web-friendly approach, it works in that the whole site matches! All in all a fun site and a great use of the properties.
Need more design inspiration? Check out the latest edition of The Web Designer’s Idea Book volume 3, with hundreds of stellar websites selected by Patrick McNeil.
Want help creating feature-worthy website designs? With a Web Design Critique from Design Critique Services, we’ll connect you with Patrick McNeil for a high-level review where you can get feedback on your website design project. You’ll get strategic advice on how you can improve your work. Who knows? Perhaps your finished website will be featured as a Site of the Day.