Simulate Realism with CSS3

CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so.

However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Here are a few examples of how CSS3 can improve the web.

Polaroids – View Demo

Despite not being around today, polaroid images are still iconic and because of this is still a great way to display photos. It’s simple enough to display a basic polaroid image using a white border on all sides with a thicker border for the bottom but we can enhance it with CSS3. As you’ll see in the demo, viewed in the latest versions of Safari, Firefox or Chrome, you can add an extra layer of depth with the addition of drop-shadow and transitions.

img {
	border: 15px solid #fff;
	border-bottom: 65px solid #fff;
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
}

img:hover {
	-webkit-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
	-webkit-transform: rotate(1deg) scale(1.05);
	-moz-transform: rotate(1deg) scale(1.05);
}

A subtle shadow gives the impression that is sitting on a flat surface and by scaling and increasing the size and positioning of the shadow on a hover state we can create the illusion that it has been raised slightly from the surface.

Buttons – View Demo

Why do buttons exist in web design? The web is an interactive medium and buttons are a form of interaction, they are easy to understand as a metaphor for real, physical buttons we use everyday on things like computers, mp3 players, televisions and any other electronic devices we use on a daily basis.

The key to making the buttons behave more like real physical buttons using CSS3 is using code such as shown below for the second button. To achieve a circle with CSS3, set a width and a height and define border-radius as half of those values.

button.two {
	width: 30px;
	height: 30px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	text-indent: -9999px;
	border: 1px solid #696969;
	background: #696969 url(power.png) no-repeat 6px 5px;
}

The active state uses CSS3′s gradient ability to create a gradient that goes from dark at the top to a lighter colour at the bottom. To further emphasise the depression of a button, a CSS transform is applied, scaling down the button slightly. To maintain the background image of the power button, include it in the background property and separate the gradient values with a comma.

button.two:active {
	-webkit-transform: scale(0.97);
	-moz-transform: scale(0.97);
	background: url(power.png) no-repeat 6px 5px, -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.13, #696969),
		color-stop(0.72, #2a2a2a)
	);
	background: url(power.png) no-repeat 6px 5px, -moz-linear-gradient(
		center bottom,
		#696969 13%,
		#2a2a2a 62%
	);
}

The recessed border also uses CSS3 gradient to get the full effect. The border class is applied to a div containing the button.

.border {
	margin: 0 auto;
	height: 42px;
	width: 42px;
	display: block;
	background-color: #fcfcfc;
	-webkit-border-radius: 21px;
	-moz-border-radius: 21px;
	border-radius: 21px;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.13, #fcfcfc),
	    color-stop(0.72, #c0c0c0)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #fcfcfc 13%,
	    #c0c0c0 62%
	);
	-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
}

View the demo in the latest versions of Safari, Chrome or Firefox.

DVD Animation – View Demo

CSS3 has an animation module which is plenty of fun to play with especially as you’ll be able to do things with CSS that you weren’t able to do before.

a:hover img[alt*="Disc"] {
	-moz-transform: translate(50px,0) rotate(330deg);
	-webkit-transform: translate(50px,0) rotate(330deg);
	transform: translate(50px,0) rotate(330deg);
}

Here the animation is being used to animate the DVDs as as you hover over the link that encapsulates bot the cover and the disc.

img[alt*="Disc"] {
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

Anyone who follows the work of Andy Clarke will likely have seen the DVD animation of the homepage of For a Beautiful Web. The above code demonstrates how Andy implemented this effect. At this point I want to highlight what you can do when you see something interesting on the web. All you have to do is have a look at the source code to see exactly how it works and learn from it to see how you could use it in the future. Now I’m not saying copy someone’s work but adjust it to your or your client’s needs.

Zurb also have an excellent demonstration of a similar effect which the wrote for Smashing Magazine.

BONUS: 3D Book Animation – View Demo

This one is for WebKit based browsers only so fire up the latest version of Safari or Chrome to see it in action and is based on this example found on the Surfin’ Safari blog. I’ll let you hunt around for code to see how it works as discovery is half the fun of learning about CSS. If you have any questions let me know in the comments and either myself or one of our great readers will help you out.

by @tkenny

You should follow me on Twitter here

Newsletter

Subscribe to the Inspect Element email for updates on articles, tutorials and WordPress themes: