TomStardust.com
Web Design, accessibilità, XHTML e CSS
Sei qui: Homepage » css, risorse utili, web design, web standards, xhtml » Background sfumati con una sola immagine
nov 15 2006
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.
Usi Twitter?
2 Commenti a “ Background sfumati con una sola immagine ”
Scrivi un commento
Menu secondario
feed
classifica commentatori
categorie
archivio
risorse esterne
extra
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;
Sono finito qui giracchiando nel sito. Stavo pensando che questa vecchia idea di ALA non è malaccio, sai? Se vuoi fare tanti sfondi sfumati di differente colore non hai l’obbligo noioso di farti tante immagini per quanti sono i bg che vuoi ottenere. Ne fai uno, in trasparenza, e via con una classe .gradient. Inoltre, si possono ottenere begli effetti, come segnalato da Web Designer Wall. Certo, c’è il problema di IE6, ma per me può andare a cacare il prima possibile.