Hurtig Tips Forstå CSS3 Gradients

Å lage et bilde bare for å vise en gradient er ufleksibel, og blir raskt en dårlig praksis. Dessverre, på tidspunktet for denne skrivingen, kan de veldig godt fortsatt være påkrevd, men forhåpentligvis ikke for mye lenger. Takket være Firefox og Safari / Chrome kan vi nå lage kraftige gradienter med minimal innsats. I denne videotipset, undersøker vi noen av forskjellene i syntaks når du arbeider med prefixene for -moz og -webkit.

Abonner på vår YouTube-side for å se alle videoopplæringene!

Webkit

Mens Mozilla og Webkit generelt bruker samme syntaks for CSS3 egenskaper, er de dessverre ikke helt enige når det gjelder gradienter. Webkit var først å omfavne gradienter, og bruker følgende struktur:

 / * Syntaks, hentet fra: http://webkit.org/blog/175/introducing-css-gradients/ * / -webkit-gradient (,  [, ]?,  [, ]? [, ] *) / * I praksis ... * / bakgrunn: -webkit-gradient (lineær, 0 0, 0 100%, fra (rød) til (blå));

Ikke bekymre deg hvis øynene glir over på den syntaksen; min gjorde også! Bare vær oppmerksom på at vi trenger en kommaseparert liste over parametere.

Hvilken type gradient? (Lineær)
X- og Y-aksjekoordinater for hvor du skal begynne. (0 0 - eller venstre hjørne)
X- og Y-aksekoordinater for hvor å konkludere (0 100% - eller venstre nederste hjørne)
Hvilken farge skal du begynne med? (Fra (rød))
Hvilken farge skal man konkludere med? (Å (blå))

Mozilla

Firefox, som implementerte gradientstøtte med versjon 3.6, foretrekker en litt annen syntaks.

 / * Syntaks, hentet fra: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ * / -moz-linear-gradient ([ || ,]? ,  [, ] *) / * I praksis * / bakgrunn: -moz-lineær-gradient (topp, rød, blå);

Legg merke til hvordan vi har plassert type gradient, lineær, innenfor leverandørutvidelsen.
Hvor skal graden begynne? (topp - vi kunne også passere i grader, som i -45deg)
Hvilken farge skal du begynne med? (rød)
Hvilken farge skal man konkludere med? (blå)

Color-stopp

Hva om du ikke trenger en 100% gradient fra en farge til en annen? Det er her fargestoppene kommer inn i spill. En vanlig designteknikk er å bruke en kort og subtil gradient, slik:

Legg merke til den subtile, hvite, hvite gradienten på toppen.

Tidligere var standardimplementasjonen å skape et bilde, sette det som bakgrunn av et element, og sette det til å gjenta horisontalt. Men med CSS3 er dette en cinch.

 bakgrunn: hvit; / * fallback for eldre / ikke-støttende nettlesere * / bakgrunn: -moz-lineær-gradient (topp, #dedede, hvit 8%); bakgrunn: -webkit-gradient (lineær, 0 0, 0 8%, fra (#dedede) til (hvit)); border-top: 1px solid hvit;

Denne gangen setter vi gradienten til å konkludere med 8%, i stedet for 100%, som er standard. Legg merke til at vi også bruker en kantlinje for å legge til kontrast; dette er veldig vanlig.

Hvis vi ønsker å legge til en tredje (eller Nth) farge, kan vi gjøre:

 bakgrunn: hvit; / * fallback for eldre / ikke-støttende nettlesere * / bakgrunn: -moz-lineær-gradient (topp, #dedede, hvit 8%, rød 20%); bakgrunn: -webkit-gradient (lineær, 0 0, 0 100%, fra (#dedede), fargestopp (8%, hvit), fargestopp (20%, rød);

Med -moz-versjonen betegner vi at ved 20% av elementhøyden, bør vi nå være i fargenrød.
For -webkit bruker vi fargestopp, og sendes i to parametre: hvor stoppet skal oppstå, og hva fargen skal være.

Viktige merknader om CSS-gradienter

Bruk dem så mye du kan. Hvis det er greit å la IE-brukere se en solid farge, oppfordrer jeg deg til å bruke denne metoden.
IE6 / 7/8, Opera, Safari 3 og Firefox 3 kan ikke gjengi CSS3-gradienter. Firefox- og Safari-brukere oppgraderer ofte ofte, så det er ikke så stort av en avtale.
Bruk alltid standard, solid farge, bakgrunn for nettlesere som ikke forstår leverandørens prefikser.
Bruk aldri en rød til blå gradient, som jeg gjorde for eksemplene.
Websider trenger ikke å se like i hver nettleser! :)

Takk for at du leser / ser på!

Kode