Creating a little drama and bringing a flat page to life is easier than ever, thanks to CSS. At least it is true for modern browsers and simply degrades back to flat for older systems. It basically comes down to providing an optimized view for advanced users without worrying about scripts. The changes are subtle but still make a decent impact.

Some of the following code will have vendor specific prefixes because some of the properties may still be in the experimental phases. That is why you see the occasional –webkit, -moz, and –o preceding the properties in CSS files. Eventually, when they are satisfied, they will remove the prefixes and four lines of code will no longer be needed to get the job done.

Let’s experiment on a list of images that is common in a gallery style view. They are lined up nicely and have a flat look as you can see in the following picture.

Original

The first thing to do is add a little padding and a shadow around the images which will eventually help create a slight Polaroid look as well as bring the images off the page a little.

ul.polaroid ul li {
    …
	padding: 5px;
	-webkit-box-shadow: 0px 1px 2px #666;
	-moz-box-shadow: 0px 1px 2px #666;
	-o-box-shadow: 0px 1px 2px #666;
    box-shadow: 0px 1px 2px #666;
}

Now we are beginning to see some depth. The look can be further exaggerated by rounding the edges and applying a gradient to the background. That leaves us with a nice slightly raised image.

ul.polaroid ul li {
    …
	border-radius: 2px;
	background: #fff;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee));
	background: -moz-linear-gradient(top, #fff, #eee);
	background: -o-linear-gradient(top, #fff, #eee);
	background: linear-gradient(top, #fff, #eee);
}
AfterDropShadow

At this point we have a fairly nice set of images with clean lines. Occasionally you may need or desire a more natural aspect to your design. This is handled nicely in CSS also with the transform property. The first thing we can do with our transform is twist all the images in one direction and then come back and twist every other image around in the opposite direction.

 
ul.polaroid ul li {
    …
	-webkit-transform: rotate(1.5deg);
	-moz-transform: rotate(1.5deg);
	-o-transform: rotate(1.5deg);
	transform: rotate(1.5deg);
}

ul.polaroid li:nth-child(even) img {
    -webkit-transform: rotate(-1.5deg);
	-moz-transform: rotate(-1.5deg);
	-o-transform: rotate(-1.5deg);
	transform: rotate(-1.5deg);	
}
Final Outcome

That is how web elements can be styled with CSS to create depth and a custom look. Imagination is the limit, and web pages can be designed to leap off the page when adding these techniques to an entire layout. The following code snippet shows all the CSS put together. Enjoy.

.content{
	padding: 10px 0;
}

ul.polaroid li{
	display: inline;
}

ul.polaroid li img{
	width: 30%; /* just needed to shrink my images and force 3 columns */
	padding: 5px;
	margin: 10px 5px;
	-webkit-box-shadow: 0px 1px 2px #666;
	-moz-box-shadow: 0px 1px 2px #666;
	-o-box-shadow: 0px 1px 2px #666;
	box-shadow: 0px 1px 2px #666;
	background: #fff;
	background: -webkit-gradient(linear, 0% 0% 0% 100%, from(#fff), to(#eee));
	background: -moz-linear-gradient(top,#fff,#eee);
	background: -o-linear-gradient(top,#fff,#eee);
	background: linear-gradient(top,#fff,#eee);
	border-radius: 2px;
	-webkit-transform: rotate(-1.5deg);
	-moz-transform: rotate(-1.5deg);
	-o-transform: rotate(-1.5deg);
	transform: rotate(-1.5deg);
}

ul.polaroid li:nth-child(even) img{
	-webkit-transform: rotate(-1.5deg);
	-moz-transform: rotate(-1.5deg);
	-o-transform: rotate(-1.5deg);
	transform: rotate(-1.5deg);
}

Categories : HTML, CSS, Web Design
Tags : box-shadow, polaroid, transform


author's photo

Author : Keith

Keith studied web design at FHSU in Hays, KS as well as electronic engineering in Hutchinson, KS. After working for many years as a maintenance electrician, he has decided to take those troubleshooting skills to the internet. Website : Online Digital Junkie

COMMENTS
blog comments powered by Disqus
Contributors