Share
Hva skjer når hovedinnholdsområdet ditt trenger to spesifikke bakgrunnsfarger: en for det primære innholdet, og et annet for sidelinjen? Hvis du noensinne har prøvd å bruke bakgrunnen til hver container selv, har du uten tvil forstått at layoutet ditt raskt blir fragmentert så snart som sagt, den primære innholdsseksjonen overskrider høyden på sidefeltet.
Generelt er løsningen å sette et bakgrunnsbilde på foreldreelementet, og sett det til å gjenta vertikalt. Men hvis vi blir klare med CSS3-gradienter, kan vi oppnå samme effekt med nullbilder. Ironien i dette er at vi bruker CSS3-gradienter for å skape en effekt som ikke inneholder en gradient! Les videre for å lære mer.
La oss begynne med å bygge et latterlig enkelt oppsett. På den måten kan vi demonstrere et felles layoutspørsmål som vi alle har opplevd på et eller annet tidspunkt.
Opprett et nytt HTML-dokument, og legg til følgende i din kropp stikkord:
Min topptekst
Primærinnhold.
Ikke glem at du kan bruke
kroppelement som en innpakning for layoutet ditt. Bare sett abreddedirekte tilkropp.
Det vi har her er ganske vanlig. EN Overskrift elementet inneholder en overskrift tag; og da har vi en hoved- div, som huser det primære innholdet, så vel som sidebar.
Neste, la oss style denne oppsettet litt. Som vi bruker kropp element som vår wrapper, slags, la oss sette en bredde og bakgrunnsfarge.
kropp bredde: 700px; margin: auto; bakgrunn: # e3e3e3;
Nå flyter vi hovedinnholdet og sidebar til venstre og høyre, henholdsvis. Også, da vi ikke jobber med noe ekte innhold, setter vi en høyde til hver container for å presentere illusjonen av innhold. Dette selv vil ikke være nok; Vi må også spesifisere nøyaktig hvor bredt hver skal være. Ellers vil de ta opp all ledig plass, på grunn av deres blokkere natur.
#primary float: left; bredde: 75%; høyde: 500px; bakgrunn: rød; til side display: block; / * Fordi er HTML5 element * / float: right; bredde: 25%; høyde: 500px; bakgrunn: grønn;
Så alt dette ser bra ut - for nå. Det oppstår imidlertid problemer så snart høyden av primærinnholdet overstiger høyden på sidebar. Videre vil dette vanligvis være tilfelle i de fleste situasjoner.
For å simulere tilsatt innhold, la oss øke høyden på #primary div å være 700 piksler.
Løsningen på disse typer dilemmaer er typisk å bruke et bakgrunnsbilde til foreldrene (#hoved) elementet. Dette vil vanligvis være et lite stykke av bakgrunnen, som da vil bli vertikalt gjentatt.
#main ... background: url (small / slice / of / background.png) repeat-y;
Problemet løst! Vel, ikke akkurat. Selvfølgelig virker dette, men så snart du bestemmer deg for å endre en bakgrunnsfarge, blir du så tvunget til å gå tilbake til Photoshop for å lage et nytt bakgrunnsbilde. Hva en dra!
En annen vanlig løsning er å bruke JavaScript for å dynamisk oppdage bredden på hver container, og deretter gjøre dem i samme høyde. Husk at dette krever at layoutet ditt skal være avhengig av at JS er aktivert.
Hvis vi ønsker å være fremover tenkere, kan vi bruke CSS3 gradienter for å oppnå denne effekten. Hva er det du sier? "Men Jeff, disse er solide farger, ikke gradienter!" Sant, men jeg skal vise deg et lite triks jeg lærte. Hvis du lager to stopp på samme sted i en CSS3-gradient, vil du ende opp med to solide farger. Det er litt forvirrende; la meg demonstrere.
Før vi fortsetter, hvis du jobber sammen, gå tilbake til prosjektet, og fjern bakgrunnsfarger. De er ikke lenger trengte. Nå legger vi til en bakgrunnsgradient for foreldrene, #hoved, beholderen i stedet.
#main bakgrunn: -moz-lineær-gradient (venstre, rød, grønn);
Så det er sannsynligvis det du forventer. Men hvordan vil det hjelpe oss? Vi trenger en tydelig adskillelse mellom primærinnhold og sidebar.
Denne gangen, la oss spesifisere at både den røde og den grønne farge-stopp bør plasseres på 75% markøren.
#main bakgrunn: -moz-lineær-gradient (venstre, rød 75%, grønn 75%);
Er det ikke så bra? Ikke bare bruker vi en gradient for å skape solide farger, ironisk nok, men også høydene til hver barnebeholder er nå identiske.
Husk at dette ikke er helt nøyaktig. De har illusjonen om å være i samme høyde. I sannhet bruker vi imidlertid bare en bakgrunn til foreldreelementet. De sidebar er fortsatt kortere; du kan bare ikke fortelle.
Det siste trinnet er å gjøre Webkit-nettlesere (Safari og Chrome) lykkelige. Dessverre er de ikke helt enige med Mozilla på riktig syntaks for å skape gradienter. Deres metode er ikke så kortfattet som Mozillas.
#main bakgrunn: -moz-lineær-gradient (venstre, rød 75%, grønn 75%); bakgrunn: -webkit-gradient (lineær, venstre topp, høyre topp, fra (rød), fargestopp (.75, rød), fargestopp (.75, grønn));
Hvis du er vant til
fra()ogtil()funksjoner, husk at de er rett og slett hjelperfunksjoner, som retter seg motfarge-stop ().
farge-stopp aksepterer to parametere:
Å avklare, fargestopp (.75, grønn) betyr at "ved 75% av elementets bredde skal fargen nå være grønn." Så ja, syntaksen er annerledes, men det tar bare noen sekunder å konvertere.
Det er alt der er til det! Husk at disse er CSS3 teknikker, noe som betyr at IE er utelatt i kulde. Vær oppmerksom på, skjønt: "Ikke alle nettsteder må se identisk ut i hver nettleser."
Hva tror du? Vil du bruke denne metoden, å vite at du må gi en tilbakebetalingskarge for IE, eller ta til bruk av betingede utsagn for å bruke et tilbakevendingsbilde?
Accentsconagua