CSS sprites iš PNG

Sveiki, radau neblogą toolsą (žinojau ir anksčiau, bet primiršęs buvau), kuris gali palengvinti gyvenimą daugeliui front-end dev'ų. Jo esmė yra už jus atlikti sutriną darbą, kuomet iš iconų lapo (sprites) reikia su background-position pasigauti iconą, kurią nori naudoti. Naudojimas paprastas, susikeli visas iconas į vieną PNG transparent dokumentą (tik neglausti visai vieną prie kitos) ir meti į toolsą, tada paspaudi ant norimos iconos ir gauni parametrus, kuriuos įrašai į CSS. Naudoji.

 

Kas nežino kas yra sprites tai verčiau paskaitykit apie tai, nes tai galingas įrankis padedantis susitaupyti tiek laiko, tiek serverio resursų, tiek vartotojų resursų.

 

Įrankis: http://www.spritecow.com/

 

Puikiai atrodantis sprites pavyzdys: https://fbstatic-a.akamaihd.net/rsrc.php/v2/yc/r/6kM17wBKLOl.png

 

panaudojimas (mano versija):

/* custom icons */
.ico-custom{
   background: url('../images/icons_sprite.png') no-repeat;
   display: block;
}
.ico-custom_balloon{
   background-position: -6px -5px;
   width: 12px;
   height: 10px;
}
.ico-custom_star-rate{
   background-position: -22px -4px;
   width: 11px;
   height: 11px;
}
.ico-custom_search{
   background-position: -9px -19px;
   width: 18px;
   height: 19px;
}
.ico-custom_no-viewed{
   background-position: -3px -39px;
   width: 31px;
   height: 21px;
}

Redagavo Gegužės 8, 2014 gio

Pora mano linkų rinktu kažkadą apie CSS sprite'as

http://cssglobe.com/creating-easy-and-useful-css-sprites/

http://www.designdim.com/2011/02/8-best-css-sprites-generator-resources/

O čia irgi geras toolas

http://spritepad.wearekiss.com/

mod_pagespeed. Naudoji kaip paprastas ikonėles, o jis pats iš jų gali sprite'us padaryt ir pakeisti reikiamą CSS'ą (aišku rezultatas užcache'uojamas, kad nereikėtų visąlaik atlikinėti šių veiksmų). Ir apart šito dar daug visko gero padaro, tik reikia pasedėti ir išmokti su juo elgtis.

"Puikiai" atrodantis pavyzdys - numeta kažkokias juosteles. dafuq

"Puikiai" atrodantis pavyzdys - numeta kažkokias juosteles. dafuq

nes tai yra css sprites. Tos juostelės sukrautos į vieną dokumentą ir tu jas matai kiekvieną dieną. Jeigu būtų ne viename dokumente, tai užimtų daugiau vietos, krautų ilgiau. Eik, pasiskaityk kas yra tai :)

Geras tool'as, dėkui!

Jeigu kas nors naudojate Compass karkasą - sprite'us generuoti ir naudoti galite be jokių papildomų įrankių. Plačiau čia: http://compass-style.org/help/tutorials/spriting/.

nes tai yra css sprites. Tos juostelės sukrautos į vieną dokumentą ir tu jas matai kiekvieną dieną. Jeigu būtų ne viename dokumente, tai užimtų daugiau vietos, krautų ilgiau. Eik, pasiskaityk kas yra tai :)

Eik pasiskaityk kas yra "CSS gradient". :)

Eik pasiskaityk kas yra "CSS background repeat". :)

 

363 px pločio gradientai /facepalm

Redagavo Gegužės 10, 2014 Deviltry

Eik pasiskaityk kas yra "CSS gradient". :)

Eik pasiskaityk kas yra "CSS background repeat". :)

 

363 px pločio gradientai /facepalm

 

Siūlau pasiskaityti ir čia http://caniuse.com/css-gradients bei atkreipti dėmesį į IE stulpelį.

Siūlau pasiskaityti ir čia http://caniuse.com/css-gradients bei atkreipti dėmesį į IE stulpelį.

Siūlau pasiskaityti antrą mano punktą ir atkreipti dėmesį, jog 1 px pločio juostelių pilnai užtenka.

 

gl hf time gg 420 blaze it yolo

Siūlau pasiskaityti antrą mano punktą ir atkreipti dėmesį, jog 1 px pločio juostelių pilnai užtenka.

 

gl hf time gg 420 blaze it yolo

 

Apie antrą punktą jokių komentarų neturėjau, tad siūlau pailsėti.

/facepalm

iš tavo žemo lygio komentarų sprendžiu, kad tamsta teturi 14 metų, nieko nenutuokia apie tai, apie ką dabar kalbam ir bando išsivartyti "laido riterio" žargonu. Arba tiesiog rašo viską, ką žino ir galvoja, kad tai yra kieta. Ne.

 

Go back to 9gag.

Redagavo Gegužės 12, 2014 Arnas