CSS Image-Sprites Codebase

Markup

copy


<html>
<head>
  <link rel="stylesheet" type="text/css" href="/content/styles/sprites.css" />
</head>
<body class="body-emample">
  <div class="toolbar-buttons">
    <div id="homepage">
      <a href="/welcome" title="The ayespee.net Website Homepage">
        <span>Homepage</span>
      </a>
    </div>
    <div id="design">
      <a href="/design-and-artwork" title="Art, Design &amp; Web Design">
        <span>Design</span>
      </a>
    </div>
    <div id="development">
      <a href="/web-development" title="Web Development &amp; Code">
        <span>Development</span>
      </a>
    </div>
  </div>
</body>
</html>

CSS

copy


/* -----------------------------
   /content/styles/sprites.css
   ----------------------------- */
   
.body-example .toolbar-buttons {
	font: bold .76em verdana !important;
}

.toolbar-buttons {
    position: relative; 
	height: 80px;
	width: 300px;
    overflow: hidden;
	background-image: url(/content/images/buttons.jpg);
	background-repeat: no-repeat;
	border: 1px solid #333;
	border-left: 0;
	clear: both;
}

.toolbar-buttons div {
	float: left;
	position: relative;
	text-align: center;
	font: bold .92em verdana;
	clear: none;
}

.toolbar-buttons a {
	display: block;
	height: 80px;
	width: 99px;
	overflow: hidden;
	cursor: pointer;
	border-left: 1px solid #333;
	color: #000;
	text-decoration: none;
}

.toolbar-buttons a:link,
.toolbar-buttons a:visited,
.toolbar-buttons a:active,
.toolbar-buttons a:focus {
	color: #000;
}

.toolbar-buttons a:hover {
	color: #1133aa;
	background-image: url(/content/images/buttons.jpg);
	background-repeat: no-repeat;
}

.toolbar-buttons a span {
	position: relative;
	display: block;
	width: 100%;
	margin-top: 57px;
	padding-top: 3px;
	border-top: 1px solid #333;
}


div#homepage a:hover {
	background-position: -1px -80px;
}

div#design a:hover {
	background-position: -101px -80px;
}

div#development a:hover {
	background-position: -201px -80px;
}

CSS Image-Sprites Codebase

Markup

CSS

Sprite Image