Share
Ce se întâmplă atunci când zona principală de conținut are nevoie de două culori de fundal specifice: una pentru conținutul principal și una pentru bara laterală? Dacă ați încercat vreodată să aplicați fundalul fiecărui container în sine, fără îndoială ați fi dat seama că aspectul dvs. devine rapid fragmentat de îndată ce, de exemplu, secțiunea de conținut principal depășește înălțimea barei laterale.
În general, soluția este să setați o imagine de fundal pe elementul părinte și să o setați să repete vertical. Cu toate acestea, dacă ajungem inteligenți cu gradientele CSS3, putem obține același efect cu imagini zero. Ironia este că folosim gradienții CSS3 pentru a crea un efect care nu conține un gradient! Citiți mai departe pentru a afla mai multe.
Să începem prin construirea unei structuri ridicol de simple. În acest fel, putem demonstra o problemă comună a aspectului pe care am experimentat-o cu toții la un moment dat.
Creați un nou document HTML și adăugați următoarele elemente la dvs. corp etichetă:
Antetul meu
Conținutul primar.
Nu uitați că puteți folosi
corpelement ca un înveliș pentru aspectul dvs. Pur și simplu setați alăţimedirect lacorp.
Ceea ce avem aici este destul de comun. A antet elementul conține o etichetă de rubrică; și, atunci avem principal div, care găzduiește conținutul principal, precum și bara laterală.
Înainte, hai să stilisem acest aspect puțin. Pe măsură ce îl folosim corp element ca ambalajul nostru, de fel, sa stabilim a lăţime și culoarea de fundal.
corp lățime: 700px; marja: auto; fundal: # e3e3e3;
Acum, vom flota conținutul principal și bara laterală la stânga și respectiv la dreapta. De asemenea, întrucât nu lucrăm cu niciun conținut real, vom stabili o înălțime pentru fiecare container pentru a prezenta iluzia conținutului. Acest lucru nu va fi suficient; trebuie să specificăm tocmai cât de mare ar trebui să fie fiecare. În caz contrar, ei vor ocupa tot spațiul disponibil, datorită lor bloc natură.
#primary float: left; lățime: 75%; înălțime: 500px; fundal: roșu; în afară display: block; / * Pentru că este un element HTML5 * / float: dreapta; lățime: 25%; înălțime: 500px; fundal: verde;
Deci, toate astea arată foarte bine - deocamdată. Cu toate acestea, problemele apar de îndată ce înălțimea conținutului principal depășește înălțimea bara laterală. În plus, acest lucru va fi de obicei cazul în majoritatea situațiilor.
Pentru a simula conținutul adăugat, să creștem înălțimea #primar div a fi 700 de pixeli.
În mod tipic, soluția la aceste tipuri de dileme este de a aplica o imagine de fond părintelui (#principal) element. Aceasta va fi, de obicei, o mică bucată de fundal, care va fi apoi repetată vertical.
#main ... background: url (mic / felie / din / background.png) repeat-y;
Problema rezolvata! Nu exact. Adevărat, totuși, aceasta funcționează, de îndată ce decideți să schimbați culoarea de fundal, atunci sunteți obligat să reveniți la Photoshop pentru a crea o imagine de fundal nouă. Ce dragă!
O altă soluție obișnuită este utilizarea JavaScript pentru a detecta dinamic lățimea fiecărui container și apoi a le face la aceeași înălțime. Rețineți că acest lucru necesită așadar ca aspectul dvs. să depindă de activarea JS.
Dacă vrem să fim gânditori înainte, putem folosi gradienții CSS3 pentru a obține acest efect. Ce spui tu asta? "Dar Jeff, acestea sunt culori solide, nu gradienti!" Adevărat, dar vă voi arăta un mic truc pe care l-am învățat. Dacă creați două opriri în aceeași locație într-un gradient CSS3, veți termina cu două culori solide. E un pic confuz; permiteți-mi să demonstrez.
Înainte de a continua, dacă lucrați împreună, reveniți la proiectul dvs. și eliminați culorile de fundal. Nu mai sunt necesare. Acum, vom adăuga un gradient de fond la părinte, #principal, container în loc.
#main background: -moz-linear-gradient (stânga, roșu, verde);
Deci, asta este probabil ceea ce vă așteptați. Dar cum ne va ajuta asta? Avem nevoie de o separare distinctă între conținutul primar și bara laterală.
De data aceasta, să specificăm atât roșu, cât și verde color-opriri ar trebui plasat la markerul de 75%.
#main background: -moz-linear-gradient (stânga, roșu 75%, verde 75%);
Nu este minunat? Nu numai că folosim un gradient pentru a crea culori solide, ironic, dar și înălțimile fiecărui container pentru copii sunt acum identice.
Rețineți că acest lucru nu este complet corect. Ei au iluzia de a avea aceeași înălțime. În realitate, totuși, aplicăm doar un fundal pentru elementul părinte. bara laterală este încă mai scurtă; nu poți spune.
Ultimul pas este să faceți fericit browserele Webkit (Safari și Chrome). Din păcate, nu sunt de acord cu Mozilla cu privire la sintaxa corectă pentru crearea de gradienți. Metoda lor nu este la fel de succintă ca Mozilla.
#main background: -moz-linear-gradient (stânga, roșu 75%, verde 75%); fundal: -webkit-gradient (liniar, stânga sus, dreapta sus, de la (roșu), stop color (.75, roșu), stop color (.75, verde));
Dacă sunteți obișnuiți cu
din()șila()funcții, rețineți că acestea sunt pur și simplu funcții de ajutor, la care direcționațiculoare-stop ().
Culoare-stop acceptă doi parametri:
Pentru a clarifica, oprire culori (.75, verde) înseamnă, "la 75% din lățimea elementului, culoarea ar trebui să fie acum verde". Deci, da, sintaxa este diferită, dar este nevoie de doar câteva secunde pentru a converti.
Cam despre asta e! Vă rugăm să rețineți că acestea sunt tehnici CSS3, adică, IE este lăsat în frig. Rețineți, totuși: "nu toate site-urile trebuie să pară identice în fiecare browser."
Tu ce crezi? Veți folosi această metodă, știind că va trebui să furnizați o culoare alternativă pentru IE sau să recurgeți la utilizarea declarațiilor condiționale pentru a utiliza o imagine de rezervă?
Accentsconagua