Creare CSS sprites

[Il Domandatore]

Sono un principiante e ho trovato uno strumento interessante, ma non sono convinto che sia completo;
https://css.spritegen.com/

Mi da come codici CSS;

.provafacebook-lk, .provainstagram-lk, .provatwitter-lk, .provayoutube-lk { display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; } .provafacebook-lk { background-position: -0px -0px; width: 48px; height: 53px; } .provainstagram-lk { background-position: -48px -0px; width: 48px; height: 53px; } .provatwitter-lk { background-position: -0px -53px; width: 48px; height: 53px; } .provayoutube-lk { background-position: -48px -53px; width: 48px; height: 53px; }

e HTML;

<div class="provafacebook-lk"></div>
<div class="provainstagram-lk"></div>
<div class="provatwitter-lk"></div>
<div class="provayoutube-lk"></div>

Ho la senzazione che manchi qualcosa....

Sembra molto interessante l'idea dei CSS sprites per ridurre il numero di richieste per il sito. è possibile fare anche le favicon con i CSS sprite, invece delle .ico?

 

[AntonioRagagnin]

Usare CSS per gli sprite, non solo salva banda, ma anche tempo di calcolo all'interno del browser. Per mia esperienza, per elementi HTML, l''animazione CSS e' stata l'unica a produrre un frame rate decente. Il sito che hai linkato non funziona perche manca la parte di animazione CSS. Se vuoi puoi prendere spunto da questa animazione che ho fatto tempo fa:

  <div></div>
<style>
div{
      width: 159px;
      height: 140px;
      background-image : url(https://v6p9d9t4.ssl.hwcdn.net/html/1979669/gatto/res/gatto/cammina.png);
     animation: moveX 1s steps(10) infinite;
    }
    @keyframes moveX{
      from{background-position-x:0px;}
      to{background-position-x:-1590px;}
    }
</style>

L'ho caricata anche in un fiddle: https://jsfiddle.net/ces304gh/

Riguardo la favico: purtroppo che io sappia non puoi usare animazioni CSS per animare la favicon. Se vuoi fare una favicon dinamica devi per forza usare javascript, e complicare di gran lunga la questione. Inoltre la favicon animata non e' nemmeno supportata da Opera e Safari :/

 

[Il Domandatore]

Con il CSS sprite si fanno solo le animazioni png? Non si possono fondere più immagini per ridurre il numero di richieste?

Carina l'animazione della nuvola che saltella.

 

[AntonioRagagnin]

Per far funzionare le animazioni con CSS e' necessario fondere le immagini in una sola per poter fare le animazioni CSS. E' proprio dal fatto che tutti i frame stanno in un immagine singola che viene la velocita del render.

 

[Il Domandatore]

Già, perchè sia la rete che la cache non devono mandare più richieste. Infatti vorrei sapere di più sull'argomento.

So che si possono fare animazioni, raggruppare più immagini di una pagina e infine poter far cambiare l'immagine con un altra al passaggio del mouse (as esempio cambiare la colorazione di un bottone).