CSS Sprites
Možno ste už počuli o CSS spritoch. Ide o to, že pokiaľ máme stránku, napríklad s tridsiatimi rôznymi ikonkami, tieto ikonky su uložené každá zvlášť, čiže tridsať obrázkov. Pointa CSS spritov je tá, že si týchto tridsať obrazkov uložíme do jedného väčšieho, pekne vedľa seba. Výsledný obrázok potom len pozicujeme podľa potreby tej, ktorej ikonky.
CSS:
.m { background: url(‘sprites.png’) top left no-repeat transparent; }
ul {border: 1px solid #ccc; border-bottom: 0; float:left; margin: 20px;}
ul li {width: 200px; float:left; clear:both;}
ul li a {color: #000; padding: 15px 0 15px 55px; text-decoration: none;border-bottom: 1px solid #ccc; float:left; width: 200px; max-width: 145px;}
ul li a.druhy {background-position: 0 32%;}
ul li a.treti {background-position: 0 64%;}
ul li a.stvrty {background-position: 0 95%;}
ul li a.stvrty {background-position: 0 96%;}
ul {border: 1px solid #ccc; border-bottom: 0; float:left; margin: 20px;}
ul li {width: 200px; float:left; clear:both;}
ul li a {color: #000; padding: 15px 0 15px 55px; text-decoration: none;border-bottom: 1px solid #ccc; float:left; width: 200px; max-width: 145px;}
ul li a.druhy {background-position: 0 32%;}
ul li a.treti {background-position: 0 64%;}
ul li a.stvrty {background-position: 0 95%;}
ul li a.stvrty {background-position: 0 96%;}
Len dodám, že ak dbáme na čistotu kódu, môžme sa zbaviť prebytočných classov využitím najbližšieho selektora súrodenca, alebo aj s použitím selektora nth-child.
Podobné články:
V css časti kódu je dvakrát uvedený štvrtý li, to je tam naschvál?
Miesto sčítavania veľkého počtu tagov li sa dá použiť i pseudotrieda nth-child. Teda konkrétne ul li:nth-child(1) {} až ul li:nth-child(4)
Chválim tento trik, páči sa mi.
mas pravdu, na to som si nespomenul, chvalim prakticky komentar..