Hjelp med horisontale Bakgrunn Gradient i HTML
Selv horisontale gradient bakgrunn ikke blir ofte sett på nettsider, de er mulig og ikke vanskelig å lage. Gjennom bruk av lineære gradienter i CSS3, kan du lage gradienter uten bilder. Hvis du ønsker å støtte Internet Explorer, bruke Modernizr å sette en fallback av en flislagt bakgrunnsbilde som inneholder graderingen.
CSS Graderinger
Nettlesere som støtter CSS3 gradienter tilbyr to typer gradienter: lineær og radial. Lineære gradienter blandingsfargen fra den ene enden av skjermen til en annen, og denne type gradient kan starte når som helst side eller hjørne av nettleseren.
Nettlesere som støtter CSS Graderinger
I skrivende i oktober 2011, de fleste moderne nettlesere støtter lineære gradienter, men du må bruke en nettleser prefiks slik som "-moz" for Firefox eller "-webkit" for Chrome og Safari:
-webkit-lineær-gradient (venstre, svart, hvit);
-moz-lineær-gradient (venstre, svart, hvit);
-o-lineær-gradient (venstre, svart, hvit);
Opera støtter også lineære gradienter med "-o" prefiks, men Internet Explorer 9 og under støtter ikke CSS3 gradienter i det hele tatt. Ved bruk av CSS-kode som krever leser prefikser, alltid inkludere et ikke-prefiks versjon av koden til bruk når eiendommen blir en offisiell standard.
Å gjøre en horisontal gradient i CSS
De fleste nettsteder benytter vertikale gradienter i sine design, men det betyr ikke at horisontale gradienter er ikke mulig. Innstilling av retningen til "venstre" vil skape en horisontal gradient:
background-image: lineær-gradient (venstre, svart, hvit);
Gradienter er satt som bakgrunnsbilder av HTML-elementer, men de er faktisk ikke bilder selv. Den første verdien er den retningen, der du kan bruke "venstre" eller en grad verdi som "90deg." Enkle to-fargeoverganger krever bare en start og slutt farge, som du kan angi ved hjelp av fargenavn, heksadesimale koder og RGB-verdiene .
Opprette en Fallback for Non-Støtte Lesere
Bransjestandarden metode for påvisning av funksjonen støtte i nettlesere er Modernizr. Dette Javascript oppdager funksjoner, og når en nettleser mangler dem, det stiller spesielle klasser i "<body>" tag på en webside. Dette gjør at du kan skrive CSS-kode for nettlesere som ikke støtter nyere funksjoner, for eksempel graderinger. Den gamle metoden for å skape gradient bakgrunn brukte en liten, gjenta grafikk som inneholdt en snev av gradient bilde, som designeren skapt i en grafikk redaktør:
.no-cssgradients {
bakgrunn: url ( 'sti / til / gradient.gif') repeat-y;
}