Simone Volpini » CSS

Siti web con immagini di background adattabili a qualsiasi risoluzione

Simone — Fri, 10 Dec 2010 13:58:59 +0000

Una tecnica molto utilizzata nei siti web consiste nell’inserire un’immagine di sfondo di forte impatto visivo, che possa andare a coprire l’intero background del sito indipendentemente dalla risoluzione del monitor o dalla dimensione della finestra del browser.

Si utilizza un’immagine di grandi dimensioni, per esempio 1920×1200 pixel che è una delle risoluzioni maggiori che possiamo trovare nei monitor più recenti di 21 o 24 pollici, che possa coprire l’intero schermo. Mentre il contenuto principale del sito continua a rimanere in una “gabbia” di dimensioni inferiori (generalmente 960 pixel di larghezza), per assicurare la perfetta visibilità anche in quei monitor che supportano la risoluzione minima di 1024 pixel di larghezza (presente anche nei più recenti netbook con monitor a 10 pollici).

Di solito l”immagine viene gestita tramite i CSS e inserita come background del tag :

body { background: url(immaginedisfondo.jpg) no-repeat 0 50% #fff }

immaginedisfondo.jpg sarà posizionata come sfondo della pagina, rimarrà centrata orizzontalmente (0 50%) e quando il contenuto della pagina è superiore alle dimensioni dell’immagine e comporta uno scroll verticale per leggerne i contenuti, lo sfondo assumerà il colore bianco #fff.
Con questo tipo di posizionamento ci assicuriamo che la parte centrale dell’immagine sia sempre visibile a tutte le risoluzioni, con l’inconveniente che a risoluzioni inferiori (1024 pixel) non vedremo una parta ampia della foto.

Per ovviare a questo problema si può utilizzare un’altra tecnica che rende adattabile la dimensione della foto alla risoluzione della finestra del browser permettendo così di avere sempre una visione completa dell’immagine.
Prendendo spunto dall’articolo e dagli esempi segnalati da Julius Design, si inserisce l’immagine all’interno dell’HTML con lo specifico tag img

e poi si assegna il seguente stile CSS:

img.bg {

position: fixed;

top: 0;

left: 0;

width: 100%;

min-width: 1024px;

z-index: -9999;

}

che posiziona l’immagine sullo sfondo (position: fixed; z-index:-9999) con una larghezza che si adatta alla finestra del browser (width: 100%). L’immagine rimarrà sempre proporzionata perché non abbiamo dato nessun vincolo all’altezza.
Il min-width serve per bloccare il ridimensionamento della foto quando la finestra del browser assume dimensioni inferiore ai 1024 pixel.

P.S: non funziona con Internet Explorer 6 (IE6).

Siti web con immagini di background adattabili a qualsiasi risoluzione is a post from: Simone Volpini

CSS, PNG, trasparenze (parte 2)

Simone — Mon, 30 Jun 2008 06:00:19 +0000

Proseguo con l’articolo precedente riguardante le trasparenze nel web, facendo riferimento questa volta ad altre due tipologie di trasparenza realizzate utilizzando immagini png.

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 (). 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:

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

CSS, PNG, trasparenze (parte 1)

Simone — Sun, 22 Jun 2008 22:19:16 +0000

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

CSS e colore di sfondo (background color)

Simone — Thu, 30 Aug 2007 13:33:09 +0000

Lo vogliamo utilizzare background-color sul tag body?!?!

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

Migliorare il CSS in 70 passi

Simone — Thu, 30 Aug 2007 08:07:00 +0000

Segnalo questo interessante post direttamente dal sito www.smashingmagazine.com che spiega 70 tecniche che possono essere utilizzate in fase di progettazione del CSS di un sito web, per organizzarlo nel migliore dei modi, semplificare il debug e renderne la lettura più agevole.

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

CSS: non si finisce mai di imparare

Simone — Wed, 18 Jul 2007 20:51:55 +0000

Un paio di mesi fa ho comprato il libro CSS – Guida completa scritto da Gianluca Troiani. Un libro molto interessante che spiega con l’uso di semplici esempi come usare al meglio i CSS.
Ero convinto di avere tutte le conoscenze necessarie nell’uso dei CSS 2.1, ma durante la lettura ho avuto conferma di quanto sbagliavo e di come alcune cose, anche le più banali, le conoscevo solo in maniera superficiale.

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