Stardust Wordpress Theme - Download
feed
classifica commentatori
categorie
archivio
risorse esterne
extra
Nov 15
Background sfumati con una sola immagine
Il 13 Novembre è stato pubblicato su A List Apart un articolo su come creare sfondi sfumati tramite i CSS, utilizzando un’unica immagine di sfondo.
L’idea è interessante, ma si basa su un presupposto: è necessario utilizzare un png trasparente per ottenere l’effetto desiderato. Ho già parlato in passato dei problemi che esistono attualmente con questo tipo di immagini, ed infatti la trasparenza non è supportata da Internet Explorer 6.
L’autore dell’articolo presenta una soluzione al problema basata sul filtro AlphaImageLoader, ma si dimentica di dire un particolare importante: in questo modo il CSS non sarà valido.
Discutibile anche la scelta di inserire l’immagine trasparente direttamente nel codice per poterla ridimensionare. In questo modo l’html prodotto ha un elemento presentazionale al suo interno che non ha senso di trovarsi lì. Io avrei fatto tutto dal foglio di stile, ripetendo l’immagine in orizzontale con un semplice repeat-x:
background: url(grad_white.png) repeat-x;
Riassumendo, l’idea è molto interessante e sarà valida con IE6 fuori circolazione, ma non mi sentirei di consigliare questa tecnica così com’è, applicando almeno le modifiche citate.
23 Marzo 2007 alle 15:16
Scusate, ma risolvere il problema semplicemente utilizzando un immagine di sfondo già sfumata?
Si realizza un jpg sfumato di dimensioni 1000X1px (di cui 1px è la larghezza) e poi si aggiunge al codice css il colore più basso dell’immagine in modo tale da non vedere il salto.
background: #9B8C75 url(../img/sfumato.jpg) repeat-x;