Share
Cosa succede quando la tua area di contenuto principale ha bisogno di due colori di sfondo specifici: uno per il contenuto principale e un altro per la barra laterale? Se hai mai provato ad applicare lo sfondo a ciascun contenitore stesso, avrai senza dubbio capito che il tuo layout diventa rapidamente frammentato non appena, ad esempio, la sezione del contenuto principale supera l'altezza della barra laterale.
In genere, la soluzione è impostare un'immagine di sfondo sull'elemento padre e impostarla in modo che si ripeta in verticale. Tuttavia, se diventiamo intelligenti con i gradienti CSS3, possiamo ottenere lo stesso effetto con immagini zero. L'ironia di questo è che stiamo usando i gradienti CSS3 per creare un effetto che non contenga una sfumatura! Continuate a leggere per saperne di più.
Iniziamo costruendo un layout ridicolmente semplice. In questo modo, possiamo dimostrare un problema di layout comune che tutti abbiamo vissuto in un punto o in un altro.
Crea un nuovo documento HTML e aggiungi quanto segue al tuo corpo etichetta:
La mia intestazione
Contenuto primario.
Non dimenticare che puoi usare il
corpoelemento come wrapper per il tuo layout. Basta impostare alarghezzadirettamente alcorpo.
Quello che abbiamo qui è abbastanza comune. UN intestazione l'elemento contiene un tag di intestazione; e, quindi abbiamo a principale div, che ospita il contenuto principale, così come il sidebar.
Quindi, modifichiamo un po 'questo layout. Mentre stiamo usando il corpo elemento come il nostro wrapper, di sorta, impostiamo a larghezza e il colore di sfondo.
body width: 700px; margine: auto; sfondo: # e3e3e3;
Ora, flutteremo il contenuto principale e il sidebar a sinistra ea destra, rispettivamente. Inoltre, poiché non stiamo lavorando con contenuti reali, imposteremo un'altezza su ciascun contenitore per presentare l'illusione del contenuto. Questo stesso non sarà abbastanza; dobbiamo anche specificare con precisione l'ampiezza di ciascuno. Altrimenti, occuperanno tutto lo spazio disponibile, a causa del loro bloccare natura.
#primary float: left; larghezza: 75%; altezza: 500 px; sfondo: rosso; aside display: block; / * Perché HTML5 element * / float: right; larghezza: 25%; altezza: 500 px; sfondo: verde;
Quindi tutto sembra a posto - per ora. Tuttavia, i problemi sorgono non appena l'altezza del contenuto primario supera l'altezza del sidebar. Inoltre, questo sarà in genere il caso nella maggior parte delle situazioni.
Per simulare il contenuto aggiunto, aumentiamo l'altezza del file #primario div essere 700px.
In genere, la soluzione a questi tipi di dilemmi consiste nell'applicare un'immagine di sfondo al genitore (#principale) elemento. Questo di solito sarà una piccola porzione dello sfondo, che verrà quindi ripetuta verticalmente.
#main ... background: url (small / slice / of / background.png) repeat-y;
Problema risolto! Bene, non esattamente. È vero, questo funziona, tuttavia, non appena decidi di cambiare un colore di sfondo, sei costretto a tornare su Photoshop per creare una nuova immagine di sfondo. Che palle!
Un'altra soluzione comune consiste nell'utilizzare JavaScript per rilevare dinamicamente la larghezza di ciascun contenitore e quindi renderli della stessa altezza. Tieni presente che questo richiede che il tuo layout dipenda dal fatto che JS è abilitato.
Se vogliamo essere dei pensatori avanzati, possiamo usare i gradienti CSS3 per ottenere questo effetto. Che cosa dici? "Ma Jeff, questi sono colori solidi, non gradienti!" Vero, ma ti mostrerò un piccolo trucco che ho imparato. Se crei due stop nella stessa posizione in un gradiente CSS3, ti ritroverai con due colori solidi. Questo è un po 'confuso; lasciami dimostrare.
Prima di continuare, se stai lavorando, torna al tuo progetto e rimuovi i colori dello sfondo. Non sono più necessari. Ora, aggiungeremo un gradiente di sfondo al genitore, #principale, contenitore invece.
#main background: -moz-linear-gradient (sinistra, rosso, verde);
Quindi, probabilmente è quello che ti aspettavi. Ma come ci aiuterà? Abbiamo bisogno di una netta separazione tra il contenuto primario e il sidebar.
Questa volta, specifichiamo sia il rosso che il verde colore-stop dovrebbe essere posizionato al marker del 75%.
#main background: -moz-linear-gradient (a sinistra, rosso 75%, verde 75%);
Non è fantastico? Non solo stiamo usando una sfumatura per creare colori solidi, ironicamente, ma, anche, le altezze di ogni contenitore figlio sono ora identiche.
Tieni presente che questo non è del tutto preciso. Hanno l'illusione di essere della stessa altezza. In verità, però, applichiamo solo uno sfondo all'elemento genitore. Il sidebar è ancora più breve; non puoi dirlo.
Il passo finale è rendere felici i browser Webkit (Safari e Chrome). Sfortunatamente, non sono del tutto d'accordo con Mozilla sulla sintassi corretta per la creazione di gradienti. Il loro metodo non è così succinto come quello di Mozilla.
#main background: -moz-linear-gradient (a sinistra, rosso 75%, verde 75%); background: -webkit-gradient (lineare, in alto a sinistra, in alto a destra, da (rosso), color-stop (.75, rosso), color-stop (.75, verde));
Se sei abituato a
a partire dal()ea()funzioni, tenere presente che sono semplicemente delle funzioni di supporto, a cui indirizzarecolore-stop ().
colore-stop accetta due parametri:
Per chiarire, color-stop (.75, verde) significa "al 75% della larghezza dell'elemento, il colore ora dovrebbe essere verde". Quindi sì, la sintassi è diversa, ma ci vogliono solo pochi secondi per la conversione.
Questo è tutto ciò che c'è da fare! Per favore ricorda che queste sono tecniche CSS3, il che significa che IE è lasciato fuori al freddo. Tieni presente, però: "non tutti i siti Web devono apparire identici in ogni browser".
Cosa pensi? Utilizzerai questo metodo, sapendo che dovrai fornire un colore di riserva per IE o ricorrere all'utilizzo di istruzioni condizionali per utilizzare un'immagine di fallback?
Accentsconagua