Hur man skapar linjära övertoningar i CSS3

Skapa linjära övertoningar över webbläsare med CSS3

Bilden ovan visar en enkel lutning från vänster till höger av # 999 (mörkgrå) till #fff (vit).

Linjära lutningar är de 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+.

När du definierar en lutning, identifiera dess typ—linjär eller radiell—Och var lutningen ska stanna och börja. Lägg också till färgerna på lutningen och var dessa färger börjar och slutar individuellt.

För att definiera linjära gradienter med CSS3, skriv:

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

Först definierar du typen av lutning med namnet.

Därefter definierar du start- och stopppunkterna för lutningen på ett av två sätt: linjens vinkel i grader från 0 till 359, med 0 grader som pekar rakt uppåt. Eller med ”sido- eller hörnfunktionerna”. Om du utelämnar dessa kommer lutningen att flyta från toppen till botten av elementet.

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

Så, för att definiera ovanstående lutning med CSS3 skriver du:

linjär gradient (vänster, # 999999 0%, #ffffff 100%); 

Och för att ställa in det som bakgrund för en DIV-skrivning:

div {
bakgrundsbild: linjär gradient (vänster, # 999999 0%, #ffffff 100%;
} 

Webbläsartillägg för CSS3 linjära övertoningar

För att få din lutning att fungera över webbläsaren 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 lutning (förutom att du bara kan definiera tvåfärgsgradienter i IE).

Microsofts 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 de olika webbläsarversionerna. För att få ovanstående grå till vit lutning 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 * /
-ms-linjär-gradient (vänster, # 999999 0%, #ffffff 100%); 

Mozilla Extension-De -moz- tillägg fungerar som CSS3-egenskapen, bara med tillägget. 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- tillägg lägger till övertoningar till Opera 11.1+. För att få ovanstående lutning, skriv:

-o-linjär-gradient (vänster, # 999999 0%, #ffffff 100%); 

Webkit-tillägg-De -webkit- förlängning fungerar mycket som egenskapen CSS3. Så här definierar du övertoningen ovan för Safari 5.1+ eller Chrome 10+:

-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 den definierar du typen av lutning som ett värde snarare än i egenskapens namn. För att få den grå till vita lutningen 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 fullständigt stöd för webbläsare för att få den grå-till-vita lutningen ovan bör du först inkludera en reservfärg för webbläsare som inte stöder övertoningar, och det sista objektet ska vara CSS3-stilen för webbläsare som är helt kompatibel. Så du skriver:

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%); 

Skapa diagonala övertoningar - Gradientens vinkel

Start- och stopppunkterna bestämmer lutningens vinkel. De flesta linjära lutningar ä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å den här sidan visar en enkel lutning som rör sig i en 45 graders vinkel över bilden från höger till vänster.

Vinklar för att definiera lutningslinjen

Vinkeln är en linje på en imaginär cirkel i centrum av elementet. Ett mått på 0deg pekar uppåt, 90 grader pekar åt höger, 180deg pekar nedåt och 270deg poäng kvar. Använd valfritt vinkelmått.

I en kvadrat rör sig en 45 graders vinkel från det övre vänstra hörnet till det nedre högra hörnet, men i en rektangel är start- och slutpunkterna något utanför formen.

Det vanligaste sättet att definiera en diagonal lutning är att definiera ett hörn, t.ex. överst till höger och lutningen rör sig från det hörnet till det motsatta hörnet. Definiera startpositionen med följande nyckelord:

• topp
• rätt
• botten
• vänster
• Centrum

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

• överst till höger
• övre vänstra
• översta mitten
• nere till höger
• nedre vänstra
• botten mitt
• höger mitt
• vänster mitt

Här är CSS för en lutning som liknar den på bilden, röd till vit som rör sig från det övre högra hörnet till det nedre vänstra hörnet:

bakgrund: ## 901A1C;
bakgrundsbild: -moz-linjär-gradient (högst upp, # 901A1C 0%, # FFFFFF 100%);
bakgrundsbild: -webkit-gradient (linjär, höger uppe, vänster nedre, färgstopp (0, # 901A1C), färgstopp (1, #FFFFFF));
bakgrund: -webkit-linjär-gradient (högst upp, # 901A1C 0%, #ffffff 100%);
bakgrund: -o-linjär-gradient (högst upp, # 901A1C 0%, #ffffff 100%);
bakgrund: -ms-linjär-gradient (högst upp, # 901A1C 0%, #ffffff 100%);
bakgrund: linjär gradient (högst upp, # 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: uppifrån och ned (standard) och vänster till höger (med GradientType = 1 växla).

Färgstopp

Med CSS3 linjära lutningar, lägg till flera färger i din lutning för att skapa ännu mer snygga effekter. Lägg till dessa färger genom att infoga ytterligare färger i slutet av din egendom, åtskilda med komma. Du bör inkludera var på linjen färgerna bör börja eller sluta också.

Internet Explorer-filter stöder bara två färgstopp, så när du bygger den här lutningen bör du bara ta med den första och andra färgen du vill visa.

Här är CSS för ovanstående trefä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 lutning med tre färgstopp i handling med bara CSS.