CSS3 linjära gradienter [CSS3 Tips]
Lutning är en utmärkt färg funktion tillägg i CSS3. I stället för att bara lägga till en enda färg kan vi nu lägga till flera färgkombinationer i ett deklarationsblock utan att förlita sig på bilder, vilket kan minska HTTP-förfrågan på vår hemsida så att webbplatsen laddas snabbare.
Om du har spelat runt med gradienter i CSS3 är du förmodligen bekant med de två metoderna: radiell och linjär gradient. Dagens inlägg kommer att handla om den senare.
Skapa gradienter
Eftersom specifikationen säger gradienter i CSS3 är en bild, har den ingen speciell egenskap som andra nya funktioner, så det deklareras med hjälp av bakgrundsbild egendom istället.
Om vi tittar på den fullständiga syntaxen för gradient ser den lite ut överfylld, vilket kan leda till förvirring för vissa människor.
div background-image: -webkit-linear-gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrundsbild: -moz-linjär gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrundsbild: -ms-linjär gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrundsbild: -o-linjär gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrundsbild: linjär gradient (topp, # FF5A00 0%, # FFAE00 100%);
Så låt oss gräva i varje del av syntaxen en efter en för att göra saker tydligare.
Först deklareras linjär gradient med linjär-gradient () fungera. Funktionen har tre primära värden. Det första värdet definierar utgångspunkten för gradienten. Du kan använda ett beskrivande sökord, som topp för att starta gradienten som strömmar från topp;
div bakgrundsbild: linjär gradient (topp, # FF5A00, # FFAE00);
Biten ovan är den officiella versionen från W3C för att skapa gradienter. Det är faktiskt enklare och ganska självförklarande och det kommer också att skapa följande gradient.
Du kan också använda botten att göra motsatsen, annars höger och vänster.
Vi kan också skapa en diagonal gradient med vinkelgrad som utgångspunkt för gradienten. Här är ett exempel:
div bakgrundsbild: linjär gradient (45deg, # FF5A00, # FFAE00);
Biten ovan kommer att skapa följande färggradient:
Det andra värdet av funktionen kommer att berätta första färgen information och dess stoppläget vilket anges i procent. Stopppositionen är faktiskt valfri; webbläsaren är smart nog att bestämma rätt position, så när vi inte anger den första färgens stopp kommer webbläsaren att ta 0% som standard.
Och nästa värde är andra färg kombination. Det fungerar som det föregående värdet, bara det om det är den sista färgen som applicerats, och vi angav inte stoppläget, ett värde av 100% kommer att tas som standard. Nu ska vi titta på exemplet nedan:
div bakgrundsbild: linjär gradient (topp, # FF5A00 0%, # FFAE00 100%);
Biten ovan kommer att skapa en gradient som det vi såg tidigare (ingen skillnad) men nu anger vi färgstopppositionen;
Låt oss nu ändra färgstopp, och den här gången kommer vi att ange 50% för den första färgen och 51% för den andra färgen, och låt oss se hur det visar sig.
div bakgrundsbild: linjär gradient (topp, # FF5A00 50%, # FFAE00 51%);
Genomskinlighet
Skapande genomskinlighet i gradient är också möjligt. För att skapa effekten behöver vi översätta färgen hex in i RGBA läge och sänka alfakanalen.
div bakgrundsbild: linjär gradient (topp, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
Biten ovan kommer att sänka färgintensiteten med 20%, och gradienten kommer att visa sig så här:
Flera färger
Om du vill att fler färger ska läggas till, lägg bara till färgerna bredvid en annan med en kommatexterare och låt webbläsaren bestämma varje färgstoppposition.
div background-image: linear-gradient (topp, röd, orange, gul, grön, blå, indigo, violett);
Biten ovan kommer att skapa följande regnbåge.
Webbläsarkompatibilitet
Tyvärr, vid tidpunkten för det här skrivandet har alla nuvarande webbläsare ännu inte stöd för standardsyntaxen. De behöver fortfarande säljarprefixet (-webkit-, -moz-, -Fröken- och -o-). Så därför är den fullständiga syntaxen så här:
div background-image: -webkit-linear-gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrundsbild: -moz-linjär gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrundsbild: -ms-linjär gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrundsbild: -o-linjär gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrundsbild: linjär gradient (topp, # FF5A00 0%, # FFAE00 100%);
Å andra sidan är Internet Explorer, specifikt version 9 och lägre, långt ifrån standarden. Graden i IE9 och nedan förklaras med filtrera, så om vi vill lägga till gradient på dessa webbläsare måste vi skriva något så här;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
De filtrera har sina begränsningar: för det första tillåter det inte att mer än tre färger läggs till, och att skapa transparenseffekten är också lite knepigt - det tillåter inte RGBA, men IE filtrera användningar #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Här är ett verktyg som hjälper dig att konvertera RGBA till #ARGB.
- demo
- Hämta källa
Skriva syntaxen snabbare
Som du kan se ovan, för att behålla gradientkompatibiliteten över webbläsare måste vi lägga till fem fler koder som är ineffektiva.
Det finns många sätt vi kan göra för att förenkla uppgiften; som att använda Prefix-Free, Prefixr, LESS eller Sass för att hjälpa till att kompilera koderna, men framför allt rekommenderar vi att du använder detta verktyg, ColorZilla Gradient. Detta verktyg genererar helt enkelt alla nödvändiga koder för gradienterna att fungera i alla webbläsare.
Slutord
Idag har vi diskuterat ganska mycket om att skapa gradienter, vi har tittat på varje del av syntaxen, skapar transparenta effekter och upprätthåller webbläsarkompatibilitet. Så, hoppas vi på att du redan har en bättre förståelse om ämnet.
Det finns fortfarande många saker vi planerar att utforska på CSS3-gradienter i våra framtida inlägg, så håll tyst till Hongkiat.com. Slutligen tack för att du läser det här inlägget, vi hoppas att du haft det.
Vidare läsning
- Bullet Proof Cross Browser RGBA Bakgrund - Lea Verou
- CSS3 Bild - W3.org
- När kan jag använda CSS3 Gradients - CanIUse.com
