Volevo creare un effetto gradevole utilizzando tutto il blocco all’interno del quale risiede il link; certo la cosa non risulta complessa, ma la mia idea era quella di poter ottenere un effetto simile a quello che si può ammirare con Flash, e cioè una sorta di graduale sfumatura dello sfondo fino a giungere alla tonalità desiderata.

Potete capire quello a cui mi riferisco andando su questo sito e successivamente controllare l’esempio finale.

Lavoriamo di grafica

block01Per iniziare ci concentriamo sulla parte riguardante la grafica, creando con Photoshop, o chi per lui, unnuovo documento con sfondo trasparente delle dimensioni di 20×80 pixel e creando almeno 6 livelli differenti con le corrispettive tonalità di colore. A questo punto ci posizioniamo sul primo livello e impostiamo il colore con la tonalità più chiara e così fino alla fine, alla quale dovremmo ottenere un risultato simile a questa immagine.

Le tonalità che ho deciso di utilizzare io sono quelle del grigio:

  • livello 1 – #737373
  • livello 2 – #666666
  • livello 3 – #595959
  • livello 4 – #4b4b4b
  • livello 5 – #3d3d3d
  • livello 6 – #303030

A questo punto dobbiamo spostarci su un software che permette la creazione di una gif animata, che risulta essere una immagine salvata in formato *.gif che contiene parecchie immagini all’ interno, in questo caso i nostri sei livelli di colore. Quando un browser carica una gif animata, legge tutte le immagini contenute al suo interno, un po’ come funziona per i cartoni animati.

Il software che ho utilizzato io non si è allontanato molto da Photoshop, ma anzi viene installato insieme a quest’ultimo ed è Adobe ImageReady; quindi mantenendo aperto il file su cui state lavorando in Photoshop posizionatevi con il mouse su File » Passa a Adobe ImageReady (Maiusc+Ctrl+M)

Vi dovreste ritrovare un’immagine del genere:

Animazione

A questo punto bisogna creare la vera e propria animazione sull’immagine, ma potete notare come l’immagine non corrisponda più al colore prescelto per il livello 1; questo avviene perché su ImageReady rimangono selezionati tutti i livelli creati su Photoshop, pertanto dobbiamo de-selezionarli tutti tranne il primo, sempre su ImageReady:

livelli

Adesso dovete creare i frame dell’immagine con i corrispondenti livelli, e colori, che avete deciso di utilizzare, lasciare invariato il ritardo di secondi tra un frame e l’altro, a meno che non desideriate diversamente, e impostare il ciclo di ricezione dell’animazione della gif non come continuo ma come univoco:

Effettuate dei test per considerare l’effetto finito e se siete soddisfati potete salvare il tutto ottimizzandolo per il web. Avete appena creato una gif animata secondo le vostre necessità!

scelta

Il codice

Adesso che abbiamo ottenuto la grafica necessaria per l’effetto desiderato possiamo concentrarci sul codice che permette il tutto.

Per prima cosa dobbiamo considerare e venire a patti con Internet Explorer; infatti questo browser notoriamente non supporta l’elemento :hover se non che sui link singoli, mentre qui dobbiamo ottenere un effetto su tutto il blocco. Perciò dobbiamo fornire alcuni appigli supplementari per soddisfare le esigenze di IE, e questo lo possiamo fare con l’uso dei tag <span> ed <em>.

Il codice XHTML che utilizzeremo avrà questo aspetto:

[code lang=”html”]
<div id="block">
<ul>
<li><a href="link" title="Titolo">Link1
<em>Lorem ipsum dolor sit amet…</em>
<span>Phasellus…</span></a></li>
<li><a href="link" title="Titolo">Link 2
<em>Lorem ipsum dolor sit amet…</em>
<span>Phasellus…</span></a></li>
</ul>
</div><!– end #block –>
[/code]

Come si può notare si utilizza l’ormai rodato sistema delle liste per piegarle alle esigenze più svariate.

Il codice CSS pertanto si occuperà di lavorare su questi elementi:

[code lang=”css”]
* html #block li a {width: 400px;} /* Effetto hover con IE */
#block {margin-top: 40px;}
#block ul {
list-style-type: none;
width: 400px;
}
#block li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
#block li a {
color: #CAE001;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
#block li a:hover {
background:url(‘ani_bg.gif’);
color:#CAE001;
}
#block a em {
color: #A6A69B;
display: block;
font-style:normal;
font-size:80%;
line-height: 125%;
}
#block a span {
color: #00A651;
font-style:normal;
font-size:75%;
line-height: 150%;
}
[/code]

L’esempio finale del vostro lavoro dovrebbe essere simile a questo; per quanto riguarda la compatibilità di questa tecnica posso affermare che non ho riscontrato problemi con nessun browser, ma se si dovessero verificare vi invito a segnalarmeli il prima possibile.