Rollover creativi 2

Merita una segnalazione come aggiunta ai
Rollover creativi il recente Advanced CSS menu trick con il relativo esempio.

L'idea è abbastanza semplice quanto efficace: usando la pseudo-classe :hover sull'intero menu è possibile modificare l'immagine di sfondo di tutte le sue voci al passaggio del mouse. Nell'esempio le voci non puntate dal mouse vengono sfuocate con un'effetto blur:

Il tutorial è ben scritto ed ha una buona compatibilità , grazie anche all'uso dei behaviour htc per estendere il supporto di ul:hover anche su IE5.5 e IE6. Discreto il risultato, anche se ad essere sincero trovo un po' fastidioso l'effetto sfuocato; è comunque possibile estendere l'idea per ottenere effetti grafici e interattivi molto accattivanti.

Una piccola nota è però necessaria: se nel tutorial viene usato il fast CSS rollover per le singole voci, è tuttavia possibile ottimizzare ulteriormente il peso delle immagini e ridurre i trasferimenti combinando tutte le voci del menu e tutti gli stati in un'unica immagine. A questo proposito rimando alla lettura di
Better Nav Image Replacement citato a suo tempo qui sul blog.