CSS Gradient farger
Lære å bruke CSS fargeoverganger til websidene potensielt øker anken, eller i det minste trekker strøm, av disse sidene. Du kan bruke effekten til bestemte elementer på en webside, som en bestemt avsnitt eller ord i et avsnitt. Hvis du bruker den for en hel side, vurdere å bruke farger som er ganske nær hverandre, som sterkt kontrasterende farger kan trekke view oppmerksomheten bort fra innholdet på siden din.
Non-Internet Explorer nettlesere
Hvis du har en ikke-Explorer, kan du lage en gradient med CSS ved å skape en stil som tildeler "bakgrunnen" tilskriver en verdi som inkluderer søkeordet "-moz-lineær-gradient." Denne verdien må også inneholde fargeverdiene består graderingen. Når du bruker denne og andre måter å produsere en gradient, sørg for å velge en farge for forgrunnen som vil skille seg ut mot gradert bakgrunn. For eksempel, hvis den bakgrunnen skifter fra hvitt til rødt, velge svart eller et annet ikke-rød fargetone for tekst eller andre forgrunnen element. Angi som forgrunnsfarge med CSS "farge" attributt.
Eksempel CSS kode for ikke-IE nettlesere
CSS-koden i neste avsnitt skaper en gradient som går fra svart til hvitt. Du kan se koden sin gradient effekt ved å lime den inn i en Notisblokk-dokument, lagre det med en "htm" filtype, deretter åpne den i nettleseren din.
<Html>
<Head>
<Style>
.gradStyle {
bakgrunn: -moz-lineær-gradient (topp, # 000000, #FFFFFF);
color: # 050505; / Farge på tekst /
height: auto; / Stretch gradient til høyde av element /
padding: 15px; / Legge til en margin mellom gradient kant og element kant /
}
</ Style>
</ Head>
<Body>
<P class = "gradStyle">
Denne bakgrunnen viser en gradient.
</ P>
</ Body>
</ Html>
Internet Explorer og alle nettlesere
Løsningen bruke "lineær-gradient" søkeord fungerer ikke i versjoner 8 eller under av Internet Explorer. Du kan i stedet bruke en løsning som er avhengig av en liten bildefil som viser en gradient. Bruk et maleri program som Microsoft Paint for å lage gradient, og deretter bruke CSS til å gjenta dette bildet hele bakgrunnen av et element. Som med de ikke-IE tilnærming til å skape gradienter, innebærer denne tilnærmingen sette CSS "bakgrunn" attributt. I stedet for å angi fargeverdiene etter dette søkeordet, men angi navnet på bildefilen som inneholder gradient med "URL" søkeord. Indikerer bildet skal gjentas ved å angi "gjenta-x" søkeord på slutten av "bakgrunn" klausulen.
Eksempelkode for alle nettlesere
Følgende nettside for å skape en gradient vil fungere i alle nettlesere. Før du åpner siden i nettleseren din, lage en farge gradient bildefil i et tegneprogram, og deretter lagre denne filen som "grad.gif" i samme mappe som websiden.
<Html>
<Head>
<Style>
.gradStyle {
bakgrunn: URL ( "grad.gif") 0% 0% repeat-x;
color: # 050505;
height: 150px;
padding: 15px;
}
</ Style>
</ Head>
<Body>
<P class = "gradStyle"> En annen bakgrunn med en gradient. </ P>
</ Body>
</ Html>