Skapa linjära gradienter med cross-browser med CSS3

01 av 04

Skapa linjära gradienter med cross-browser med CSS3

Linjära gradienter

Den vanligaste typen av gradient du kommer att se är en linjär gradient av två färger. Detta innebär att lutningen kommer att röra sig i en rak linje som gradvis ändras från den första färgen till den andra längs den linjen. Bilden på denna sida visar en enkel vänster-till-höger gradient av # 999 (mörkgrå) till #fff (vit).

Linjära gradienter är enklaste att definiera och har mest stöd i webbläsare. CSS3 linjära gradienter stöds i Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ och Safari 4+. Internet Explorer kan lägga till gradienter med hjälp av a filtrera och stöder dem tillbaka till IE 5.5. Det här är inte CSS3, men det är ett alternativ för kompatibilitet mellan webbläsare.

När du definierar en gradient måste du definiera flera olika saker:

Vilken typ av gradient är det-linjär eller radiell
Där gradienten bör börja
Där gradienten bör sluta
Vilka färger är i lutningen och var de ska börja och sluta

För att definiera linjära gradienter med CSS3 skriver du:

linjär-gradient (vinkel eller sida eller hörn, färgstopp, färgstopp)

Först definierar du typen av gradient med namnet linjär -lutning.

Därefter definierar du start- och stopppunkterna för gradienten på ett av två sätt: vinkel av linjen i grader från 0 till 359, med 0 grader som pekar rakt uppåt. Eller med funktionen "sida eller hörn", t.ex. vänster, höger, botten, och topp. Dessa kommer att förklaras närmare på nästa sida. Om du lämnar dessa ut, kommer gradienten att strömma från toppen till botten av elementet.

Då definierar du färgstopp. Du definierar färgstopp med färgkoden och en valfri procentandel. Procentandelen berättar webbläsaren var på linjen för att börja eller sluta med den färgen. Standarden är att placera färgerna jämnt längs linjen. Du kommer lära dig mer om färgstopp på sidan 3.

Så, för att definiera ovanstående gradient med CSS3 skriver du:
linjär gradient (vänster, # 999999 0%, #ffffff 100%);
Och för att ställa in det som bakgrund av a DIV du skriver:
div {bakgrundsbild: linjär gradient (vänster, # 999999 0%, #ffffff 100%;}
Browser Extensions för CSS3 linjära gradienter

För att få din lutning att fungera, måste du använda webbläsartillägg för de flesta webbläsare och a filtrera för Internet Explorer 9 och lägre (faktiskt 2 filter). Alla dessa tar samma element för att definiera din gradient (förutom att du bara kan definiera tvåfärgade gradienter i IE).

Microsoft-filter och -tillägg-Internet Explorer är det mest utmanande att stödja, eftersom du behöver tre olika rader för att stödja olika webbläsarversioner. För att få ovanstående grå till vit gradient skulle du skriva:
/ * IE 5,5-7 * /filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8-9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-m-linjär gradient (vänster, # 999999 0%, #ffffff 100%);
Mozilla Extension-De -moz- förlängning fungerar som CSS3-egenskapen, bara med -moz- förlängning. För att få ovanstående gradient för Firefox, skriv:
-moz-linjär gradient (vänster, # 999999 0%, #ffffff 100%);
Opera Extension-De -o- förlängning lägger till gradienter till Opera 11.1+. För att få ovanstående gradient, skriv:
-o-linjär gradient (vänster, # 999999 0%, #ffffff 100%);
Webkit Extension-De -webkit- förlängning fungerar mycket som CSS3-egenskapen. För att definiera ovanstående gradient för Safari 5.1+ eller Chrome 10+ skriver du:
-webkit-linjär gradient (vänster, # 999999 0%, #ffffff 100%);
Det finns också en äldre version av Webkit-tillägget som fungerar med Chrome 2+ och Safari 4+. I det definierar du typen av gradient som ett värde, snarare än i egenskapsnamnet. För att få den grå till vita gradienten med denna förlängning, skriv:
-webkit-gradient (linjär, vänster topp, höger topp, färgstopp (0%, # 999999), färgstopp (100%, # ffffff));
Full CSS3 Linjär Gradient CSS-kod

För att du ska ha den fulla gränsöverskridande webbläsarens stöd för att få den grå till vita gradienten ovan bör du först inkludera en fast bakgrundsfärg för webbläsare som inte stöder gradienter, och det sista objektet ska vara CSS3-stilen för webbläsare som är helt kompatibla. Så skriver du:
bakgrund: # 999999;bakgrund: -moz-linjär gradient (vänster, # 999999 0%, #ffffff 100%);bakgrund: -webkit-gradient (linjär, vänster topp, höger topp, färgstopp (0%, # 999999), färgstopp (100%, # ffffff));bakgrund: -webkit-linjär-gradient (vänster, # 999999 0%, #ffffff 100%);bakgrund: -o-linjär gradient (vänster, # 999999 0%, #ffffff 100%);bakgrund: -ms-linjär gradient (vänster, # 999999 0%, #ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);bakgrund: linjär gradient (vänster, # 999999 0%, #ffffff 100%);
Nästa sidor i denna handledning förklarar delarna av en gradient mer detaljerat, och den sista sidan visar dig ett verktyg som är ett utmärkt sätt att automatiskt skapa CSS3-gradienter.

Se denna linjära gradient i åtgärd med bara CSS.
02 av 04
Skapa diagonala gradienter-Gradientens vinkel

Start- och stopppunkterna bestämmer gradientens vinkel. De flesta linjära gradienterna är från topp till botten eller från vänster till höger. Men det är möjligt att bygga en lutning som rör sig på en diagonal linje. Bilden på denna sida visar en enkel gradient som rör sig i 45 grader vinkel över bilden från höger till vänster.

Vinklar för att definiera gradientlinjen

Vinkeln är en linje på en imaginär cirkel i mitten av elementet. 0deg pekar upp, 90deg pekar till höger, 180 grader pekar ner, och 270deg pekar åt vänster. Du kan definiera vilken vinkel som helst från 0 till 359 grader.

Du bör observera att i en fyrkant flyttas en 45 graders vinkel från det övre vänstra hörnet till höger, men i en rektangel ligger start- och slutpunkterna något utanför formen, vilket du kan se i bilden.

Det vanligare sättet att definiera en diagonal gradient är att definiera ett hörn, till exempel överst till höger och gradienten flyttas från det här hörnet till det motsatta hörnet. Du kan definiera startpositionen med följande nyckelord:

topp

höger

botten

vänster

Centrum

Och de kan kombineras för att vara mer specifika, till exempel:

överst till höger

övre vänstra

toppcentret

nere till höger

nedre vänstra

botten centrum

höger centrum

vänster centrum

Här är CSS för en lutning liknande den i bilden, röd till vit som flyttas från det övre högra hörnet till vänster till vänster:
bakgrund: ## 901A1C;bakgrundsbild: -moz-linjär-gradient (höger topp, # 901A1C 0%, # FFFFFF 100%);bakgrundsbild: -webkit-gradient (linjär, höger topp, vänster botten, färgstopp (0, # 901A1C), färgstopp (1, #FFFFFF));bakgrund: -webkit-linjär-gradient (höger topp, # 901A1C 0%, #ffffff 100%);bakgrund: -o-linjär-gradient (höger topp, # 901A1C 0%, #ffffff 100%);bakgrund: -ms-linjär-gradient (höger topp, # 901A1C 0%, #ffffff 100%);bakgrund: linjär gradient (höger topp, # 901A1C 0%, #ffffff 100%);
Du kanske har märkt att det inte finns några IE-filter i det här exemplet. Det beror på att IE endast tillåter två typer av filter: topp till botten (standard) och vänster mot höger (med GradientType = 1 växla).

Se denna diagonala linjära gradienten i åtgärd med bara CSS.
03 av 04
Färgstopp

Med CSS3 linjära gradienter kan du lägga till flera färger i din gradient för att skapa ännu mer avancerade effekter. För att lägga till dessa färger lägger du till ytterligare färger på slutet av din egendom, åtskilda av kommatecken. Du bör inkludera var på linjen bör färgerna börja eller sluta också.

Internet Explorer-filter stöder bara två färgstopp, så när du bygger denna gradient bör du bara inkludera de första och andra färgerna du vill visa.

Här är CSS för ovanstående 3-färgsgradient:
bakgrund: #ffffff;bakgrund: -moz-linjär gradient (vänster, #ffffff 0%, # 901A1C 51%, #ffffff 100%);bakgrund: -webkit-gradient (linjär, vänster topp, höger topp, färgstopp (0%, # ffffff), färgstopp (51%, # 901A1C), färgstopp (100%, # ffffff));bakgrund: -webkit-linjär gradient (vänster, #ffffff 0%, # 901A1C 51%, # ffffff 100%);bakgrund: -o-linjär gradient (vänster, #ffffff 0%, # 901A1C 51%, # ffffff 100%);bakgrund: -ms-linjär gradient (vänster, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);bakgrund: linjär gradient (vänster, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Se denna linjära gradient med tre färgstopp i åtgärd med bara CSS.
04 av 04
Gör byggnadsgraderna enklare

Det finns två platser jag rekommenderar för att hjälpa dig att bygga gradienter, de har alla fördelar och nackdelar med dem, jag har inte hittat en gradientbyggare som gör allt än.

Ultimate CSS Gradient GeneratorDenna gradientgenerator är mycket populär eftersom den utför på liknande sätt som gradientbyggare i program som Photoshop. Jag gillar det också eftersom det ger dig alla CSS-tillägg, inte bara Webkit och Mozilla. Problemet med denna generator är att det bara stöder horisontella och vertikala gradienter. Om du vill göra diagonala gradienter måste du gå till den andra generatorn jag rekommenderar.
CSS3 Gradient GeneratorDen här generatorn tog mig lite längre för att förstå än den första, men det stöder att ändra riktningen till en diagonal.
Om du känner till en annan CSS Gradient Generator som du gillar bättre än dessa, var snäll och kontakta oss.