Deprecated: Function ereg() is deprecated in /home/artdesign/domains/blog.art-design.si/public_html/index.php on line 122
CSS sprites | Art design blog

Kdo smo

Art Design je tim profesionalnih grafičnih oblikovalcev, ilustratorjev in razvijalcev spletnih strani. Naša agencija sloni na dolgoletni oblikovalski tradiciji in bogatih izkušnjah, zato so naši izdelki vedno brezhibni in konkurenčni.

Naše storitve

Na naši domači strani si lahko ogledate storitve, ki jih nudimo.

CSS sprites
XHTML in CSS

Če ste domači z koncepti web designa, potem že poznate osnove uporabe CSS. CSS sprites nam omogoča uporabo ene same grafike, v katero je vključenih več slik razporejenih v mrežo. Na spletni strani pa se prikazuje le željen del te datoteke. Tako potrebujemo le en HTTP zahtevek in celotna grafika spletnega mesta nam je takoj na voljo.

Razporeditev grafik v mrežo

Ta tehnika je zelo uporabna, ko imamo pred seboj dizajn bodoče spletne strani, katerega navigacija pa vsebuje slike, piktograme ali netipične fonte, ki jih uporabniki spletnega mesta nimajo nameščenih na svojih računalnikih.
Včasih smo to rešili enostavno tako, da smo celotno grafiko razrezali na več manjših slik katere smo umestili v stran. Nato smo dodali povezave in stvar je bila rešena. Danes pa je to popolnoma nesprejemljivo. Spodaj je opisanih nekaj težav s katerimi se srečamo, v kolikor ne upoštevamo W3C standardov pri izdelavi netekstovne oz. grafične navigacije.

  • Iskalniki in screen reederji ne znajo prebrati teksta v sliki, kar posledično pomeni težavo v rangiranju strani kot tudi v sami dostopnosti strani slepim in slabovidnim uporabnikom.
  • Večja poraba pasovne širine, kar je še posebno kočljiva stvar, v kolikor ima stran veliko obiska.
  • Daljše nalaganje spletnega mesta.

Uporabi slikovne navigacije se je načeloma dobro izogibati, čeprav lahko z pametno rabo CSS stvar naredimo povsem dostopno in uporabno. V prvem primeru lahko vidite osnovno rešitev, v drugem pa nadgradnjo in implementacijo sprites grafike.

OGLEJ SI PRIMER

HTML, KI GA BOMO OBLIKOVALI:

<code><ul><br />
<
li><a id=&quot;jagoda_ena&quothref=&quot;#&quot;>Jagoda 1</a></li><br />
<li><a id=&quot;jagoda_dva&quothref=&quot;#&quot;>Jagoda 2</a></li><br />
</ul></code

Osnovna navigacija brez sprites tehnike

CSS:
ul {
margin:0;
padding:0;
list-style:none;
}
ul li {
margin:0;
padding:0;
float:left;
}
ul li a {
height:93px;
width:100px;
display:block;
text-indent:-1000px;
}
a#jagoda_ena {background:transparent url(slike/jagoda_1_c.gif) top left no-repeat;}
a#jagoda_ena:hover {background:transparent url(slike/jagoda_1_g.gif) top left no-repeat;}
a#jagoda_dva {background:transparent url(slike/jagoda_2_c.gif) top left no-repeat;}
a#jagoda_dva:hover {background:transparent url(slike/jagoda_2_g.gif) top left no-repeat;}

Zgornji primer je načeloma povsem dostopen in uporaben, vendar pa se takšna stran dlje nalaga.
Razlog za to leži v tem, da je vsaka slika pomeni svoj HTTP zahtevek. Konkretno: brskalnik pošlje zahtevek na strežnik, ta pa vrne nazaj sliko. In to se ponavlja, dokler se ne naložijo vse slike, ki jih kličemo preko CSS. To podaljšuje čas nalaganja spletne strani, kar jo naredi manj učinkovito.

Druga težava je ta, da so v našem primeru (glej demo) štiri posamezne slike težje (23KB) kot slika, v katero smo združili vse slike (15KB) kar še dodatno upočasni nalaganje strani. Razlike so v tem primeru seveda zanemarljive, vendar predstavljajte si obsežne strani, ki imajo na dan več tisoč obiskov. Ko seštejemo prenos podatkov in porabo pasovne širine se to ne pozna le na času prenosa temveč tudi na denarju, ki ga moramo nameniti porabi večje pasovne širine.

Navigacija narejena z uporabo sprites tehnike

Tega problema se lotimo z uporabo tehnike CSS sprites. Trik je v tem, da namesto slik za različna stanje linkov vse slike združimo v eno samo. Posameznim tagom pa z id selektorji določamo položaj slike.

 

CSS:

.ul {<br />
margin:0 0 20px 0;<br />
padding:0;<br />
list-
style:none;<br />
}<br />
.
ul li {<br />
margin:0;<br />
padding:0;<br />
float:left;<br />
}<br />
.
ul li a {<br />
height:93px;<br />
width:100px;<br />
display:block;<br />
background:transparent url(slike/jagoda.gifno-repeat;<br />
text-indent:-1000px;<br />
}<br />
a#sprites_ena {background-position: 0 -93px;}<br />
a#sprites_ena:hover {background-position: 0 0;}<br />
a#sprites_dva {background-position:-100px -93px;}<br />
a#sprites_dva:hover {background-position:-100px 0;} 

Poglejte si primer

 

Objavil Tomaž Bojc dne 14.11.08 | Komentarji: 0

Komentarji

Pusti svoj komentar

  1. Zapomni si moje podatke
  2. Obveščaj me o nadalnjih komentarjih
  3. Vnesi to besedo

O tem blogu

Blog podjetja Art Design d.o.o.
Na tem blogu lahko spremljate učne prikaze in članke na temo izdelave spletnih strani, oblikovanja, fotografije, marketinga in veliko podobne koristne “navlake”.

Pobrskaj po blogu

Kategorije objav

RSS  Atom

Zadnje objave

Družbeni mediji za podjetja in organizacije - Zakaj in kako?

Objavljeno 08.09.10
Če se še vedno sprašujete ali bi uporabljali družbene medije ali ne, vam lahko povemo, da je odgovor vsekakor pritrdilen.…
Beri dalje

Brif (brief), ali kako analitično pristopimo k marketinškemu izzivu

Objavljeno 05.06.09
Torej kako se lotiti nekega marketiškega problema? Po glavi nam rojijo vse mogoče ideje, ki jih ž v miselnem procesu…
Beri dalje

Poceni gostovanje, ki drago stane

Objavljeno 29.01.09
Gostovanje spletne strani zaupajte tistemu ponudniku, ki vam bo zagotovil optimalno delovanje strežnikov in hiter odzivni čas v primeru težav.
Beri dalje

Uporaba stock fotografije in pravice uporabe

Objavljeno 26.01.09
Kot sem že v enem od prejšnjih blogov zapisal: slika pove več kot tisoč besed. Seveda je fraza oguljena, ampak…
Beri dalje

Barvni prostor ali kako uloviti zelenega zajca.

Objavljeno 27.11.08
Pa kaj za vraga so ti »barvni prostori«, se sprašuje marsikdo in hkrati potihem benti nad tem, da tega ne…
Beri dalje