Hai mai notato come a volte, quando passi il mouse sopra un'immagine, questa diventa vuota per un secondo e poi carica l'immagine di hover? Tuttavia, quando ci passi di nuovo sopra, tutto è fluido.
Ecco un esempio di ciò che intendo usando la mia immagine della scala sotterranea (divisa in due pezzi).
Questo perché ci sono due immagini separate da caricare, e la seconda (all'hover) richiede tempo aggiuntivo per caricarsi quando viene attivato l'effetto hover.
In questo post, ti mostrerò come eliminare quel ritardo utilizzando una tecnica CSS che carica l'intera immagine in una volta sola, visualizzandone una porzione.
Combina l'Immagine
Il primo passo per far funzionare questo è combinare entrambe le metà dell'immagine in una sola. Puoi usare l'editor di immagini che preferisci per farlo, basta copiare entrambe le immagini, raddoppiare l'altezza e incollare quella inattiva sopra quella attiva.
L'immagine al centro dovrebbe essere ciò che stai cercando. Ora passiamo al CSS.
Il Codice
Il primo passo nel CSS è limitare l'altezza dell'immagine a metà (fondamentalmente in modo che venga visualizzata solo la scala superiore).
Ai fini di questo tutorial, useremo una classe chiamata .rollover-tut. Poiché l'immagine originale della scala è 153x149, useremo questo codice CSS:
.rollover-tut {
height: 149px;
width: 153px;
display: block;
}Poiché stiamo creando un link, useremo il seguente codice HTML:
<a class="rollover-tut" href="#"></a>A questo punto, il tuo link dovrebbe assomigliare all'immagine originale della scala, senza effetto hover (ancora).
Per far funzionare l'effetto hover, useremo una proprietà CSS chiamata background-position sulla pseudoclasse :hover.
.rollover-tut:hover {
background-position: 0 -149px;
}
Con il codice CSS sopra, stai essenzialmente spostando l'immagine di sfondo verso l'alto di 149 pixel (ricorda, l'altezza di un'immagine della scala, o metà di entrambe combinate).
Un modo più semplice per ricordarlo è usare invece il seguente codice hover, che avrà lo stesso effetto di quello sopra, e non dovrai ricordare alcun numero (un ringraziamento speciale a: Art Webb tramite i commenti):
.rollover-tut:hover {
background-position: bottom left;
}Ed ecco cosa ottieni:
Nota che non c'è più alcun ritardo tra l'effetto hover, poiché l'intera immagine viene caricata in una volta sola.
Conclusione
Questa stessa tecnica può essere utilizzata per quasi tutti gli effetti di rollover di immagini di sfondo. Non sono sicuro se qualcuno di voi abbia controllato di recente il design del mio blog personale, ma ne faccio un uso estensivo su quasi tutti i link che utilizzano un'immagine di sfondo (e il pulsante di invio sul mio modulo di commenti).
Spero che abbiate apprezzato questo consiglio CSS. Se avete idee per futuri post di consigli CSS, fatemelo sapere nei commenti.
WOW! Bel tutorial! Mi piace!
Ti suggerisco di esaminare la navigazione del sito web ufficiale di Apple. È un uso fantastico di CSS sprites. Un altro uso molto efficace di CSS sprites può essere visto qui.
http://www.problogdesign.com/wp-content/themes/pro-blog-design3/images/pbd-png-sprite.png
Guarda questa immagine e poi guarda come Martin l'ha suddivisa in diverse parti sul suo blog.:}
Ci sono sicuramente modi più avanzati per utilizzare questa tecnica. Quello che ho fatto è stato probabilmente il più semplice del gruppo.
Ho anche notato qualcosa di simile su CSS Tricks che ho trovato interessante.
http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-6/images/css-tricks.png
Ciao Leland,
Questo è un post molto, molto buono per i principianti che usano ancora 2 immagini diverse per creare rollover di immagini – scritto molto bene, breve e conciso! Anche i pulsanti sono bellissimi!
Ho iniziato da poco a usare gli sprite nei progetti dei miei clienti (in passato l'ho trovato piuttosto complicato lol).
Ho un'immagine enorme che contiene tutte le icone e i pulsanti di cui avevo bisogno per il sito web. Poi ho usato background-position per visualizzare ogni elemento. Può diventare davvero molto noioso se ci sono troppi elementi, ma ne vale davvero la pena.
A proposito, è la prima volta che visito il tuo sito web. Mi piace tantissimo, un sacco di dettagli belli e sottili.
Grazie Iwana, sono contento che ti sia piaciuto il tutorial. Apprezzo anche le gentili parole sul mio sito. 😀
Questa tecnica si chiama CSS Sprites.
Potresti aggiungere un altro stato... Esempio: normale, hover, selezionato... E poi per questi tre stati cambi semplicemente la posizione dello sfondo in alto a sinistra, al centro a sinistra e in basso a sinistra. Nota: questo metodo richiede un po' di codice PHP :)
Grazie per la precisazione, Milos. Forse farò un post di follow-up su come farne uno anche con uno stato selezionato/attivo, usando sempre un'unica immagine.
Intendi codice CSS (e non PHP), giusto?
Intendo CSS e un po' di PHP. In questo caso abbiamo bisogno di quel PHP per dichiarare quando un link è nello stato selezionato. Ecco un esempio in breve per un sito web con due pagine (Pagina1 e Pagina2):
Codice Pagina1:
<?php $thisPage="Benvenuto in Pagina1!"; ?><head>
<title><?php if ($thisPage!="") echo "$thisPage ::"; ?> mysite.com</title>
...
</head>
<body>
<ul id="menu">
<li><a class="page1" <?php if ($thisPage=="Benvenuto in Pagina1!") echo "id="selected""; ?> href="page1.php">Pagina1</a></li>
<li><a class="page2" <?php if ($thisPage=="Benvenuto in Pagina2!") echo "id="selected""; ?> href="page2.php">Pagina2</a></li>
</ul>
...contenuto...
</body>
Per la pagina2 imposta semplicemente la variabile $thisPage su "Benvenuto in Pagina2!"
CSS per i link:
#menu a {background-position: left top;
}
#menu a:hover {
background-position: left center;
}
#menu a#selected, #menu a#selected:hover{
background-position: left bottom;
}
Questo è tutto :) Saluti
Fantastico, so che in WordPress a volte vengono generate classi predefinite per gli elementi di pagina attivi se si utilizzano le loro funzioni.
Come .current-page-item (per le pagine attive) o .current-cat per gli archivi di categoria attivi.
Grazie per i suggerimenti.
Prego 😉 Saluti
Adoro usare un'unica immagine per gli stati normale e hover. L'unica modifica che farei è per la posizione dello sfondo dello stato hover. Cambiala in:
.rollover-tut:hover { background-position: bottom left; }
In questo modo, se cambi le dimensioni dell'immagine, non devi regolare le dimensioni.
Ah… wow, non ci avevo mai pensato ma ha perfettamente senso. Grazie per il consiglio.
Ma se cambiassi le dimensioni dell'immagine, non dovresti cambiare altezza e larghezza nella prima dichiarazione?
Aiuta comunque perché è solo una cosa in meno da cambiare.
Bello e semplice. Forse questo impedirà alle persone di usare 2 immagini per i rollover.. beh, a due singole immagini =). Bel tutorial, amico, tornerà utile ad alcune persone in futuro =)
Sono contento che ti sia piaciuto il tutorial, Anto.