Desafio da MAKE com UMA MÃO e BABY na OUTRA! 👶🍼

Es saprotu, ka tīklā ir rīki sprite izgatavošanai, taču es gribētu uzzināt, kā izveidot ikonas dažādiem ikonas stāvokļiem. Vai ir vienkāršs veids, kā izveidot visas šīs ikonas dažādās variācijas:

(Vai jūs varat man pateikt, kā es varu labāk izteikt savu jautājumu, lai tas neizklausās tā, it kā es lūgtu padomu?)

Ja es saprotu jūsu jautājumu un jūs jau zināt, ka sprite patiesībā ir tikai attēlu apvienojošs attēls, tad pēdējā daļa, kas jums jāzina, ir par CSS.

CSS ir tas, kas jūsu attēla daļu saista ar stāvokli. Jūs izveidojat html, kas apzīmē pogu, piešķir tam klasi, pēc tam uzrakstāt savu CSS.

.my-button{ width:20px; height:20px; background:url('my-button-sprite.gif') top left no-repeat; } .my-button:hover{background-position: 20px 0px;} 

Vienkārši pievienojiet atbilstošu horizontālo nobīdi (pirmais skaitlis), lai sprite tiktu sasista vietā, kur tai vajadzētu parādīties vēlamajam stāvoklim.

  • Virtuosi Media ir taisnība, sprites var izmantot ne tikai pogu stāvokļiem. Vienā no manām vietnēm ir sprite, kas apvieno visas manas pogas, aizzīmes, ikonas UN horizontālos atkārtotos attēlus. Mana CSS ir diezgan tīra, vienlaikus piešķirot fonu vairāk nekā 30 elementiem, pēc tam katram pielāgojot tikai nobīdes. Tas ievērojami samazināja pieprasījumu skaitu un lapas ielādes laiku.

CSS sprite nav vienīgais kursors ar attēliem, bet statiskos attēlos vai dažādos ikonu stāvokļos jūs varat izmantot sprite. Jūs izveidotu vienu attēlu gandrīz tāpat kā jūs norādījāt kā piemēru, un katram ikonu stāvoklim izmantotu dažādas CSS fona koordinātas. Triks ir tikai pareizo fona koordinātu iegūšana.

strādāja par jums: Charles Robertson | Vēlies ar mums sazināties?

noderīga informācija