CSS sprites

Օրինակներ

ebay

amazon

Ինչպես անել

ՈՒնենք հետևյալ պատկերը (css-sprite.png)

որի վերին շարքը պիտի օգտագործենք որպես հղումներով մենյուի բեքգրաունդ

HTML

CSS

.followbtns li{
    float:left;
    list-style-type: none;
    width:73px;
    height:73px;
    margin: 15px;
    background-image: url("images/csssprites/css-sprite.png");
}

Արդյունքը

HTML

CSS

.followbtns li{  //նույնը ինչ նախորդ օրինակում }
.fb{background-position:-78px -312px}
.ak{background-position:-153px -312px}
.vm{background-position:-229px -312px}
.gn{background-position:-306px -312px}

Արդյունքը

HTML

CSS

.followbtns li{  
 //նույնը ինչ նախա-նախորդ օրինակում
}
.fb{background-position:-78px -312px}
.ak{background-position:-153px -312px}
.vm{background-position:-229px -312px}
.gn{background-position:-306px -312px}
.tw:hover{background-position:-0px -390px}
.fb:hover{background-position:-78px -390px}
.ak:hover{background-position:-153px -390px}
.vm:hover{background-position:-229px -390px}
.gn:hover{background-position:-306px -390px}

Արդյունքը