Rebelia.it

[css] Semitrasparenza

Notizia del 06/05/2007

Nota: il tutorial fa uso del codice già visto in questo post.

Per prima cosa creo un'immagine di 4 pixel (due di larghezza e due di altezza) con sfondo trasparente: File -> Nuovo -> Larghezza: 2 / Altezza: 2 -> Riempi con Trasparenza:

Seleziono con lo Strumento selezione rettangolare impostato a 1 pixel due dei quattro quadrati alternandoli; seleziono il primo, premo Shift/Maiusc e seleziono il secondo, quindi riempio con un colore a scelta: io ho usato lo stesso colore dello sfondo del layout, un verde scuro:

Dopo aver salvato la gif, la uso come sfondo del div dove desidero simulare la semitrasparenza; per prima cosa inserisco l'immagine decorativa come sfondo del div contenitore, nel mio caso il div#esterno:

quindi imposto la gif di quattro pixel come sfondo del div interno, nel mio caso il div#corpo:

Volendo ripetere la gif su tutta la superficie, non imposto alcun valore di repeat come invece ho fatto per l'immagine della margherita che volevo far comparire una sola volta. Il risultato finale sarà qualcosa di simile a questo:

Come si può vedere io non me ne sono curata e una parte del testo risulta quasi illeggibile:

Chi vuole approfondire, può scaricare il codice completo e le immagini (zip - 75kb)

I campi con * sono obbligatori.