Curiosità su deviantart.com

[hurricane86]

Ieri vado su http://www.deviantart.com/ e subito mi colpisce lo stile del tema, clicco con il destro del mouse sullo sfondo dell'header, faccio vedi sfondo e mi ritrovo questo:

http://s.deviantart.com/styles/minim...-tttop-all.gif

cioè tutte le imamgini sono racchiuse in un unico file, tipo una texture del 3d! Ora qualcuno sa come è possible organizzare il lavoro in questo modo? quali sono i benefici?


grazie

[seed_squall_it]

Sicuramente quell'approccio può servire a caricare in una volta sola tutte le immagini del sito. Poi, con i CSS, e possibile ad es. impostare quell'unica immagine come background dei singoli box semplicemente impostando i box con dimensioni appropriate per mostrare solamente la parte di immagine che interessa e usando background-position. E' chiaro che questa tecnica è possibile solo per le immagini che non si ripetono orizzontalmente o verticalmente.

Sinceramente non vedo molta utilità in tutto questo, se non il fatto di non avere più immagini per ogni stile grafico che si decide di impostare.

[Mich_]

Quella tecnica e` usata spesso nell'effetto cambio immagine all':hover: si evita di dover caricare una nuova immagine e non ci sono ritardi nella visualizzazione.
Dal punto di vista del programmatore, si ha a che fare con meno immagini, e questo semplifica anche la manutenzione.

Non so perche` in quel sito abbiano fatto la scelta di inserire tutto in un'immagine, ma probabilmente semplifica la gestione delle immagini: una per ogni pagina (o ogni settore / ogni CSS).

[hurricane86]

mi potete fare un semplice esempio?

cosa devo mettere come parametri nel campo background?

[Mich_]

Quale campo? Se ti riferisci ad un editor, devi specificarlo e chiedere nel forum del SO che usi.

Per usare la tecnica dello switch background per, ad esempio, un :hover, puoi fare cosi`:
...

CSS:

.cambiosfondo {
  background-image: url(sfondodoppio.gif);
  background-position: 0px 0px;
  ...
}
.cambiosfondo:hover {
  background-position: 0px 20px;
  ...
}

dove chiaramente l'immagine sfondodoppio.gif sara` divisa in due parti, con la parte superiore per lo sfondo a riposo e la parte inferiore con lo sfondo dell':hover, che inizia in posizione 0 20.

[hurricane86]

intendevo proprio questo, grazie