Css in de praktijk

Photoshop document

HTML

<div id="example" class="clearfix">
	<a href="#" title="Het wordt zonnig vandaag" class="sun">Zonnig</a>
	<a href="#" title="Het wordt zonnig met lichte bewolking" class="clouds">Zon met wolken</a>
	<a href="#" title="Het zal regenen" class="rain">Regen</a>
</div>

CSS

#example { margin: 0 0 30px 0; }

#example a {
	float: left;
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 30px 0 0;
	background-image: url(Graphics/Weerbericht.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
}

#example a.sun { background-position: 0 0; }
#example a.clouds { background-position: -64px 0; }
#example a.rain { background-position: -128px 0; }

#example a:hover.sun { background-position: 0 -64px; }
#example a:hover.clouds { background-position: -64px -64px; }
#example a:hover.rain { background-position: -128px -64px; }

/* Clear fix */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }