Vítejte na blog.vyvojar.cz Přihlásit | Registrovat | Pomoc

CSS sprity a seznamy

Ač nerad, přeci jen jsem občas dotlačen k práci na uživatelském rozhraní :-). V rámci jednoho webového projektu vznikl požadavek použít CSS sprity  místo odrážek.

Pokud někdo neví, co jsou to CSS sprity, tak snad pomůže tento odkaz.

Přímé použití v seznamech je ale, jak jsem posléze zjistil, problematické. Prvek seznamu je obvykle větší než obrázek ve spritu a tak je často zobrazeno ze spritu více, než by bylo vhodné. Ani můj oblíbený stackoverflow mi nenabídl řešení – většina příspěvků, co jsem našel, radila buď předělat sprite tak, aby obsahoval obrázky jen vertikálně  a nebo  navrhovala použít element div jako kontejneru.

Pouze vertikální uspořádání spritu nebylo možné – sprite byl dodán a nebylo možné jej měnit. Použítí divu se mi moc nelíbílo, kód pak vypadal tak nějak divně:

<ul>
<li class="menu">
<div class="saveIcon"></div>Save
</li>
</ul>

Mým cílem je ale mnohem obyčejnější zápis:

<ul class="menu">
<li class="save">save</li>
<li class="edit">edit</li>
</ul>
a při použití jednoduchého spritu:
sprite_example

 

dosáhnout tohoto vzhledu:

image

o vše se pak postará tento css kód:

ul.menu
{
list-style: none outside none;
padding: 0;
margin: 0;
font-weight:bold;
}

ul.menu li
{
display: inline-block;
margin-left: 20px;
}

ul.menu li:before
{
content:url(content/empty_space.gif);
background-image: url(Content/sprite_example.jpg);
background-repeat: no-repeat;
margin-right:5px;
display: inline-block;
}

li.save:before
{
background-position: 0px -53px;
}

li.edit:before
{
background-position: -45px -53px;
}

Finta spočívá v použítí průhledného obrázku s rozměry odpovídajícími ikoně ze spritu. Ostatní již odpovídá běžnému postupu při používání Css spritu.

Následně je i velmi jednoduché změnit obrázek při najetí myší, stačí doplnit tento styl:

li.save:hover:before
{
background-position: 0px 0px;
}
a výsledkem je:
image Přiložena je i jednoduchá stránka s obrázky a css stylem.
Zveřejněno Monday, February 21, 2011 11:01 PM by mstr
Vedeno pod:

Attachment(s): CssSpriteList.zip

Upozornění na nové komentáře

Pokud chčeš dostávat upozornění emailem na změny u toho příspěvku,tak se zaregistruj zde.zde

Odebírat komentáře k tomuto příspěvku pomocí RSS

Komentář

Žádné komentáře

Vytvoření nového komentáře

(povinný) 
povinný 
(povinný) 
Opiš čísla, která vidíš na obrázku: