Snabbtips Förstå CSS3 Gradients

Att skapa en bild endast för att visa en lutning är oflexibel och blir snabbt en dålig övning. Tyvärr, vid tidpunkten för det här skrivandet, kan de fortfarande mycket väl krävas, men förhoppningsvis inte för mycket längre. Tack vare Firefox och Safari / Chrome kan vi nu skapa kraftfulla gradienter med minimal ansträngning. I denna snabba snabbspets undersöker vi några av skillnaderna i syntax när du arbetar med prefixen -moz och -webkit.

Prenumerera på vår YouTube-sida för att titta på alla videohandledning!

Webkit

Medan Mozilla och Webkit i allmänhet antar samma syntax för CSS3-egenskaper, är de tyvärr inte helt överens när det gäller gradienter. Webkit var först att omfamna gradienter och använder följande struktur:

 / * Syntax, taget från: http://webkit.org/blog/175/introducing-css-gradients/ * / -webkit-gradient (,  [, ]?,  [, ]? [, ] *) / * I praktiken ... * / bakgrund: -webkit-gradient (linjär, 0 0, 0 100%, från (röd) till (blå));

Oroa dig inte om dina ögon glansar över den syntaxen; min gjorde också! Observera att vi behöver en kommaseparerad lista över parametrar.

Vilken typ av gradient? (linjär)
X- och Y-axelkoordinater av var du ska börja. (0 0 - eller vänstra hörnet)
X- och Y-axelkoordinater för varifrån man ska avsluta (0 100% - eller vänstra hörnet)
Vilken färg ska börja med? (Från (röd))
Vilken färg ska man avsluta med? (Till (blå))

Mozilla

Firefox, som implementerade gradient support med version 3.6, föredrar en något annorlunda syntax.

 / * Syntax, taget från: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ * / -moz-linear-gradient ([ || ,]? ,  [, ] *) / * I praktiken * / bakgrund: -moz-linjär-gradient (topp, röd, blå);

Observera hur vi har placerat typen av gradient, linjär, inom leverantörstillägget.
Var ska gradienten börja? (topp - vi kunde också passera i grader, som i -45deg)
Vilken färg ska du börja med? (röd)
Vilken färg ska man avsluta med? (blå)

FÄRG Stoppar

Vad händer om du inte behöver en 100% gradient från en färg till en annan? Det är här färgstoppet kommer i spel. En gemensam designteknik är att tillämpa en kort och subtil gradient, så här:

Notera den subtila vitvit till vit gradient på toppen.

I det förflutna var standardimplementet att skapa en bild, ange den som bakgrund av ett element och ställa in det för att upprepa horisontellt. Men med CSS3 är detta en cinch.

 bakgrund: vit; / * fallback för äldre / icke-stödda webbläsare * / bakgrund: -moz-linjär-gradient (topp, #dedede, vit 8%); bakgrund: -webkit-gradient (linjär, 0 0, 0 8%, från (#dedede) till (vit)); border-top: 1px solid vit;

Den här gången bestämmer vi gradienten till 8%, snarare än 100%, vilket är standardvärdet. Observera att vi också tillämpar en gränsstopp för att lägga till kontrast detta är mycket vanligt.

Om vi vill lägga till en tredje (eller Nth) färg kan vi göra:

 bakgrund: vit; / * fallback för äldre / icke-stödda webbläsare * / bakgrund: -moz-linjär-gradient (topp, #dedede, vit 8%, röd 20%); bakgrund: -webkit-gradient (linjär, 0 0, 0 100%, från (#dedede), färgstopp (8%, vit), färgstopp (20%, röd);

Med -moz-versionen betecknar vi att vid 20% av elementhöjden borde vi nu vara i färgröd.
För -webkit använder vi färgstopp och skickas i två parametrar: där stoppet ska inträffa och vad färgen ska vara.

Viktiga anteckningar om CSS-gradienter

Använd dem så mycket du kan. Om det är okej att låta IE-användare se en solid färg uppmuntrar jag dig att använda den här metoden.
IE6 / 7/8, Opera, Safari 3 och Firefox 3 kan inte göra CSS3-gradienter. Firefox- och Safari-användare brukar uppgradera ofta, så det är inte så stort för en affär.
Applicera alltid en standard, fast färg, bakgrund för webbläsare som inte förstår leverantörs prefix.
Använd aldrig en röd till blå gradient, som jag gjorde för exemplen.
Webbsidor behöver inte se lika ut i varje webbläsare! :)

Tack för att du läste / tittade på!

Koda