2) PNG TRASPARENTI (no-repeat)

Generalmente quando si vogliono realizzare delle immagini che possano adeguarsi a qualsiasi colore di sfondo, per esempio i loghi, si usano le GIF trasparenti che permettono di rendere visibile solamente il logo mentre tutto il resto può avere una trasparenza totale.
Il limite di questo formato è dato dalla possibilità di poter utilizzare solamente 256 colori e di non poter realizzare delle semi-trasparenze.

Fortunatamente esiste un altro formato che permette di superare questo problema: PNG con canale alfa. Le immagini PNG possono lavorare con una profondità di colore fino a 48bit (true color) e utilizzare il canale alfa per realizzare delle trasparenze totali o parziali.

Il formato è supportato da tutti i browser recenti ad esclusione di IE6 il quale non è in grado di gestirne la trasparenza. Per aggirare questa problematica si può utilizzare pngfix.js, una funzione realizzata in javascript, che viene applicata a tutte le png inserite nel codice html (<img src=”nomeimmagine.png” />). Io preferisco utilizzare IE PNG FIX, un file con estensione .htc che invece viene inserito direttamente nel foglio di stile come nell’esempio qui sotto:

<style type="text/css">
img {
   behavior: url("pngbehavior.htc");
}
</style>

e che funziona sia per le immagini in linea che per le PNG inserite direttamente nel CSS da utilizzare come sfondi. In questa maniera posso applicare la regola solamente al foglio di stile che realizzo per IE6 (ogni riferimento a versione di Internet Explorer precedenti la 6, non è puramente casuale: li escludo a priori ).
Questa funziona correttamente con la proprietà background-repeat: no-repeat, ma non permette di validare il CSS.

2) PNG TRASPARENTI (repeat-x, repeat-y o repeat)

In questo caso c’è poca da dire, visto che regnano diverse incompatibilità oltre che con IE6 anche con l’ultima versione, IE7. Infatti, se vogliamo utilizzare una PNG trasparente come sfondo di un div possiamo realizzare un’immagine di 1px per 1px (trasparente) e applicarla a tutto il div attraverso l’uso del background-repeat.

Solo che in IE6 le png non vengono ripetute, quindi si potrà vedere solo un unico pixel di sfondo, anche se nel CSS abbiamo inserito la regola corretta con il file .htc.

IE7 a meno che non applichiamo al div una dimensione fissa (o un min-height se vogliamo comunque far rendere il sito adattabile in altezza) si comporta in maniera anomala, creando anche più sovrapposizioni dello stesso sfondo con conseguenti problemi di visibilità dei contenuti del sito.

Se qualcuno ha trovato qualche altro caso interessante, i commenti sono ben accetti.

CSS, PNG, trasparenze (parte 2) is a post from: Simone Volpini

Continua a leggere

• Bimind
• Nel mio piccolo ci provo anch’io …
• CSS, PNG, trasparenze (parte 1)
• CSS e colore di sfondo (background color)
• Migliorare il CSS in 70 passi

Ultimamente mi sono imbattuto nella realizzazione di siti web che facevano frequente uso delle trasparenze, utilizzandole per loghi, immagini o sfondi di alcune porzioni del sito. Ho potuto così approfondire meglio la questione, anche perché ho dovuto affrontare parecchi problemi di compatibilità per cercare di ottenere un sito cross browser.
Cercherò di ricapitolare le varie tipologie di trasparenza e le problematiche del caso, da utilizzare come promemoria anche per me.

1) TRASPARENZA CON I CSS

E’ possibile rendere semitrasparenti porzioni del sito, utilizzando alcune regole da inserire nel CSS. Premetto che questo metodo non permette la corretta validazione del foglio di stile perché fa uso di regole presenti nei CSS3 o proprietarie di Internet Explorer, che sono comunque compatibili con tutti i moderni browser a partire da IE6. Ecco il codice:

div.esempio {
background: #000;
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
}

Le tre regole vanno utilizzate contemporaneamente e permettono di rendere il div “esempio“, che è stato riempito con il colore nero, semi-trasparente al 70% (0% totalmente trasparente, 100% colore pieno). La prima (filter) vale per IE mentre le altre funzionano correttamente sia per Firefox (o tutti i browser che utilizzano come motore di rendering Gecko) che per Opera o Safari.

La particolarità di questi stili è che l’effetto non viene applicato solo al background del div, ma anche a tutti i suoi contenuti (immagini o testi), facendo diventare tutto semi-trasparente.

Per aggirare questo problema di solito realizzo un div vuoto a cui applicare il colore di sfondo con l’effetto trasparenza, per poi posizionarlo (tramite z-index) al di sotto del div che contiene le informazioni.

Il limite di questa soluzione è che obbliga a lavorare con dei div di dimensione predeterminata con posizionamenti assoluti, visto che il div con la trasparenza non può adattarsi essendo privo di contenuti.

A breve pubblicherò altri due casi di effetti trasparenza, realizzati però attraverso l’uso di immagini in formato png, dove la completa compatibilità cross browser è più difficile da mantenere.

CSS, PNG, trasparenze (parte 1) is a post from: Simone Volpini

Continua a leggere

• CSS, PNG, trasparenze (parte 2)
• CSS e colore di sfondo (background color)
• Migliorare il CSS in 70 passi
• CSS: non si finisce mai di imparare
• Libri sui CSS

Mi capita spesso di cambiare il template grafico del sistema operativo (linux; ma lo si fa anche con windows) del mio PC e può capitare che alcuni di questi template non utilizzino il bianco come colore primario per lo sfondo delle applicazioni.

Quindi, navigando in internet con Firefox, la finestra di navigazione usa il grigio invece del bianco (#ffffff).

Cosa succede?

Che tutti quei siti, aventi come come colore di sfondo primario il bianco, in cui non è stato impostato sul CSS il “background-color: #fff” li vedo grigi: praticamente uno schifo!!!

CSS e colore di sfondo (background color) is a post from: Simone Volpini

Continua a leggere

• CSS, PNG, trasparenze (parte 2)
• CSS, PNG, trasparenze (parte 1)
• Migliorare il CSS in 70 passi
• CSS: non si finisce mai di imparare
• Libri sui CSS

Migliorare il CSS in 70 passi is a post from: Simone Volpini

Continua a leggere

• CSS, PNG, trasparenze (parte 2)
• CSS, PNG, trasparenze (parte 1)
• CSS e colore di sfondo (background color)
• CSS: non si finisce mai di imparare
• Libri sui CSS

Oggi ho ripreso in mano il libro per ripassare le tecniche per realizzare un menù verticale con dei sottomenù a tendina (sempre verticali) che si aprono al passaggio del mouse.
Utilizzo da tempo alcune di queste tecniche, però dovevo realizzare una versione di menù un pò differente dall’originale e ho preferito partire dalla “base”.

Riporto l’esempio presentato da Gianluca, e scaricabile anche dal sito del libro.

Nel mio caso, dovevo realizzare un menù a tendina verticale di larghezza fissa (in pixel, mentre la versione di partenza è in em) creando un effetto spaziatura sia tra le singole voci del menù, che tra il menù e il sottomenù.
Fare uso dei margin compromette il funzionamento del javascript che gestisce l’apertura/chiusura dei sottomenù.

Alla fine ho realizzato questa versione che ovviamente ha il codice html identico, quello che cambia è il CSS:
per creare la spaziatura tra i menù ho assegnato il padding sinistro (di 10px) al tag ul e background: transparent per non compromettere il funzionamento del javascript.
Assegnando le dimensioni in pixel del tag li e del tag a interno a li si risolve il problema di compatibilità con IE e si può semplificare il CSS.

Ricordo che lavorando in pixel, la mia versione ha perso molte delle qualità presenti nella versione originale, prima fra tutte l’adattamento delle dimensioni in base al ridimensionamento dei caratteri del browser.

Per il resto rispecchia le mie necessità

I prossimi giorni presenterò una rivisitazione del javascript che gestisce l’apertura/chiusura, fatta attraverso l’uso di jquery per creare degli effetti di transizione.

CSS: non si finisce mai di imparare is a post from: Simone Volpini

Continua a leggere

• CSS, PNG, trasparenze (parte 2)
• CSS, PNG, trasparenze (parte 1)
• CSS e colore di sfondo (background color)
• Migliorare il CSS in 70 passi
• Libri sui CSS