🎨 CSS -

Sprites

Sprite is an image with multiple separate usable images in it. Usually used with icons. You can reduce HTTP requests and remove loading flash by using sprites.

Two state sprite.

/* pic.png is 200px high and contains two logo states that are 100px each */
.logo {
    background: url(logo.png);
    display: block;
    height: 100px;
    width: 200px;
    text-indent: -9999px;
}
.logo:hover,
.logo:focus {
    background-position: 0 -100px;
}

<a href="#" class="logo">What Test Is In Logo</a>

Three state sprite.

.logo {
    background: url(logo3.png);
    display: block;
    height: 75px;
    text-indent: -9999px;
    width: 250px;
}
.logo:hover,
.logo:focus {
    background-position: 0 -75px;
}
.logo:active {
    background-position: 0 -150px;
}

Four sprites in a single image.

/* pic.png is 200px high, 200 wide, 100px x 100px each image, 4 images */
li {
    float: left;
    margin-right: 10px;
}
.twitter,
.github {
    background: url(pic.png);
    display: block;
    height: 100px;
    width: 100px;
    text-indent: -9999px;
}
.twitter {
    background-position: 0 0;
}
.twitter:hover,
.twitter:focus {
    background-position: 0 -100px;
}
.github {
    background-position: -100px 0;
}
.github:hover,
.github:focus {
    background-position: -100px -100px;
}