Home-theater-designers
Om du har varit på internet i mer än några minuter är chansen stor att du har stött på en CSS -gradient. CSS -bakgrundsegenskapen kan användas för att skapa en rad olika stilar, och en av de mest spännande typerna är vad den kan göra med gradientvärdet.
Att veta hur man designar och skapar olika CSS -gradienter är en tillgång för alla programvarudesigners eller utvecklare. Från den här artikeln lär du dig allt du behöver veta för att börja integrera CSS -gradienter i dina projekt.
Vad är en CSS -gradient?
En CSS -gradient är i huvudsak kombinationen av två eller flera färger som smidigt övergår från en till nästa. Övergångstillståndet för en CSS -gradient beror på vilken typ av gradient som används. Det finns två huvudtyper av gradienter som vanligtvis används i programvarudesign: linjär och radiell.
Det finns dock en tredje typ av gradient som är mindre populär och känd som den koniska gradienten.
CSS Gradients Syntax
Background-image: gradient-type (direction, color1, color2);
CSS-gradienten bör tilldelas egenskapen CSS för bakgrundsbild. Gradienttypen kan vara en av flera; linjär gradient, radiell gradient eller konisk gradient. Gradienttypen följs av öppna och stängande parenteser som innehåller gradientens övergångsriktning, samt färgerna som ska ingå i gradienten.
Relaterad: Så här ställer du in en bakgrundsbild i CSS
Exemplet ovan visar två färger, men en lutning kan innehålla flera olika färger. Det enda kravet är att varje färg i listan är åtskild med ett kommatecken.
Vad är en linjär gradient?
Den linjära gradienten är den mest populära CSS -gradienten. Det skapar en horisontell, vertikal eller diagonal övergångsgradient med två eller flera färger.
CSS Linear Gradient Exempel
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Koden ovan ger följande CSS -gradient:
Det finns en huvudkomponent i gradientsyntaxen utelämnad från exemplet ovan. Denna komponent är gradientens övergångsriktning, och den utelämnades eftersom standardinriktningen för den linjära gradienten är vertikal (topp-till-botten); det är önskad utmatning i detta exempel.
Koden ovan ger samma resultat som följande kodrad. Den enda skillnaden mellan de två är riktningssektionen av koden.
Använda det nedre linjära gradientexemplet
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Som du kan se från utdata skapar koden ovan en lutning som börjar med blått på toppen och sedan långsamt övergår till den orange längst ner. Om du vill vända färgernas ordning kan du helt enkelt byta ut till botten med till toppen och detta kommer att vända gradientens riktning och producera följande utdata:
På samma sätt som den vertikala inriktningen kan den horisontella inriktningen av en lutning uppnås med hjälp av två uppsättningar riktningsord: till vänster och till höger , som kommer att producera följande utgångar.
kan du ladda ner avsnitt på hulu
Diagonal linjär gradient
Det är möjligt att uppnå en diagonal linjär gradientövergång i vilken riktning som helst av en linjär gradient. Det finns bara fyra specifika listor över sökord som du behöver veta för att göra detta möjligt.
- Till höger
- Till vänster
- Överst till höger
- Överst till vänster
Använda det diagonala linjära gradientexemplet
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
Exemplet ovan ger följande utdata:
Som du kan se från utsignalen ovan gör den linjära gradienten sin övergång i en diagonal riktning som rör sig från övre vänstra till nedre högra delen av gradienten.
Flerfärgad linjär gradient
En linjär lutning kan ha två eller flera färger, men hur ser fler färger ut i en lutning? Ett mångfärgat linjärt gradientfärgsarrangemang är beroende av dess riktning. De som övergår i en horisontell riktning kommer att ha varje ny färg att visas till vänster eller höger om den linjära gradienten, beroende på den linjära gradientens exakta riktning.
Flerfärgat linjärt gradientexempel
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Kodraden ovan ger följande utdata:
Som du kan se läggs varje ny färg till höger om lutningen, vilket skapar det som så småningom förvandlas till en regnbåge. Samma effekt kan uppnås i vertikal riktning; det specifika färgarrangemanget på den linjära gradienten beror emellertid på sökordet för vertikal riktning (upp eller ner).
Vad är en radiell gradient?
Radialgradienten skapar en spiralgradient på två är fler färger som börjar från mitten som standard. Där den linjära gradienten ger en rak gradient som flyter vertikalt eller horisontellt, producerar den radiella gradienten en cirkulär gradient som flyter från mitten till ytterkanterna.
Använda Radial Gradient Exempel
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
Kodraden ovan ger följande utdata:
Ändra Radial Gradient Center
Som standard startar en radiell gradient i mitten av gradienten; Det är dock möjligt att ändra ursprungspunkten med introduktionen av några sökord.
hur ser jag mina prenumeranter på youtube
Ändra exempel på startposition för radiell lutning
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
Kodraden ovan ger följande utdata:
Som du kan se från utmatningen ovan börjar gradienten nu från det övre högra hörnet istället för i mitten. Denna ändring är möjlig på grund av införandet av sökordet överst till höger i koden ovan. Följande lista med nyckelord kan också användas för att ändra den radiella gradientens ursprungspunkt:
- Övre vänstra
- Nere till höger
- Nedre vänstra
Flerfärgade radiella lutningar
Liksom den linjära gradienten kan radialgradienten också använda två är fler färger, den stora skillnaden är att där den linjära gradienten lägger till gradienten i en rak linje, lägger radialgradienten till nya färger på ytterkanten.
Flerfärgat radiellt gradientexempel
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Kodraden ovan ger följande utdata:
Anpassa Gradienter
Hittills har du sett hur du ändrar riktning och mittpunkt för en lutning, men du har inte sett hur du anpassar en lutning. Att anpassa en lutning kan låta som mycket arbete, men när du väl förstår grunderna för att skapa en CSS -bakgrundsgradient är nästa uppenbara steg att lära dig hur du gör dina CSS -gradienter mer unika.
hur man sänker ljusstyrkan på Windows 10
Som standard upptar färgerna i en lutning en jämnt fördelad mängd utrymme där varje färg smidigt övergår till den efter det. Så om två färger kombineras för att bilda en lutning, kommer varje färg att uppta hälften av det tillgängliga utrymmet medan övergången från den ena till den andra. Om tre färger kombineras kommer varje färg att uppta en tredjedel av det tillgängliga utrymmet.
Med en anpassad lutning får du definiera hur mycket utrymme en färg kommer att uppta i en lutning genom att uttryckligen tilldela färgstoppsposition .
Anpassa ett linjärt gradientexempel 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Kodraden ovan ger följande utdata:
Utmatningen ovan visar den andra färgen i den linjära gradienten som stannar vid 30% -punkten för den första färgen i gradienten, istället för den vanliga positionen, och eftersom den andra färgen också är den slutliga färgen i gradienten sträcker det sig naturligtvis till slutet .
Om du skulle placera 30% i koden ovan i slutet av den första färgen skulle saker och ting bli tydligare.
Anpassa ett linjärt gradientexempel 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Koden ovan ger följande utdata.
Utmatningen ovan visar klart den första färgen i lutningen som stannar vid 30% -punkten för den andra färgen i lutningen. Detta exempel tillsammans med det ovanstående bör hjälpa till att göra färgstoppanpassning lättare för dig att förstå.
Anpassning av en radiell gradient görs på samma sätt som en linjär gradient. Det enda du behöver göra för att uppnå samma resultat ovan i en radiell gradient är att ändra gradienttyp och riktning.
Skapa CSS -gradienter har aldrig varit enklare
Denna självstudieartikel ger dig verktygen för att identifiera och skapa linjära och radiella gradienter. Om du har kommit dit har du lärt dig hur du ändrar riktningen och mitten av en lutning. Dessutom har du nu färdigheterna att anpassa CSS -gradienter och skapa unika bakgrundsgradienter.
Men om du inte vill gå direkt in på att skapa nya och unika gradienter kan du börja med att skapa några snygga redan existerande.
Dela med sig Dela med sig Tweet E-post 27 Snygga CSS -bakgrundsgradientexempelSolida färger är så förra året. Gradienter är inne! Men hur skapar du dem i CSS?
Läs Nästa Relaterade ämnen- Programmering
- Webbutveckling
- Webbdesign
- CSS
Kadeisha Kean är en fullstack mjukvaruutvecklare och teknisk/teknikförfattare. Hon har den distinkta förmågan att förenkla några av de mest komplexa tekniska begreppen; producerar material som lätt kan förstås av någon nybörjare inom teknik. Hon brinner för att skriva, utveckla intressant programvara och resa runt i världen (genom dokumentärer).
Mer från Kadeisha KeanPrenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!
Klicka här för att prenumerera