WalterWeb.net

Qui voglio illustrare un metodo CSS per la realizzazione di siti web con un rollover delle immaginisui link. Non si basa sul semplice preload della seconda immagine che si carica al passaggio del mouse, ma si combinano i due stati del link ( a:link e a:hover )  in un’unica immagine e si agisce sulla sua posizione ottenendo così un rollover istantaneo senza la necessità di caricare immagini aggiuntive. Questo metodo è molto interessante perchè riesce ad ovviare il bug che si presenta soprattutto con internet explorer 6 che lascia un vuoto per qualche secondo nell’immagine rollover, in attesa di caricamento al passaggio del mouse.

Tutto viene fatto con unà proprietà CSS, molto conosciuta dai webdesigner : background-position.

Infatti il rollover istantaneo viene ottenuto variando le coordinate dell’immagine stessa, in questo modo :

a.prova{
display:block;
width: 250px;
height: 55px;
background: url(logo.png) no-repeat 0px 0px;
}
a.prova:hover{
background-position: 0px -55px;
}

Questa semplice regola CSS permette di effettuare quindi un rollover di un immagine in maniera istantanea senza

Una semplice guida su come implementare ombre su immagini, testo e textbox usando la proprietà filter: shadow(); con i CSS senza l’uso di immagini che vanno ad “appesantire” la pagine condizionando il tempo di caricamento.
Questo metodo è supportato solo da INTERNET EXPLORER di Microsoft.
Nel primo esempio viene visualizzato un textbox con ombra in basso a sinistra, semplicemente attribuendo le proprietà color, strenght e direction in questo modo

filter: shadow(color:#CCCCCC, strenght:2, direction:220);

Possiamo giocare con le proprietà css a nostro piacimento, secondo le esigenze di design del vostro sitoweb.
Nel secondo esempio abbiamo del semplice testo con un ombra applicata nella parte bassa semplicemente cosi

filter: shadow(color:#CCCCCC, strenght:10, direction:180);

Nel terzo esempio viene inserita un’ombra in basso a destra di un’immagine, in questo modo

filter: shadow(color:#CCCCCC, strenght:10, direction:135);