Share
I denna handledning lär du dig information om hur du använder gradienter på webben. Jag ska ge dig några exempel, några övningar (till exempel hur man skapar gradienter för gränser), och jag slänger också några användbara resurser som gör att man kan göra gradienter mycket enklare.
Idag har det inte varit möjligt att använda gradienter utan att förlita sig på bilder, men utvecklingen i CSS betyder att det nu är enkelt och pålitligt att skapa gradienter från våra stylesheets.
I sin enklaste form definierar vi gradienter som bakgrundsbilder. Vi ställer bakgrundsbilden (bara med hjälp av stenografi bakgrund är helt bra) som antingen a linjär-gradient eller a radial-gradient, då passerar vi i start- och slutfärgerna:
.lådan bakgrund: linjär gradient (# 000046, # 1cb5e0);
Som standard går en linjär gradient från topp till botten, vilket ger oss något så här:
Vi kan ändra riktningen genom att lägga till en ny parameter före färgerna, till exempel:
.rutan bakgrund: linjär-gradient (till höger, # 000046, # 1cb5e0);
Lika, ändra denna parameter för att läsa till höger skulle skapa en diagonal gradient. Du kan också göra diagonalen precis genom att ange något liknande 45deg (eller vilken vinkel du väljer).
Att ta saker ett steg längre behöver du inte sluta med bara två färger. Och du kan också använda färgnamn, så här:
.box bakgrund: linjär-gradient (till höger, orange, # ec38bc, # 7303c0, cyan);
I det här fallet kommer var och en av de fyra färgerna att uppta en lika stor mängd utrymme som ger oss en jämn, balanserad gradient.
Om vi inte vill ha jämn fördelning, men vill ha en färg att uppta mer utrymme än en annan, kan vi ange det värdet i procent direkt efter färgen som så:
.box bakgrund: linjär-gradient (till höger, # f05053 80%, # e1eec3);
Ge oss:
Att fortsätta kan vi använda allt vi har lärt oss så långt och ändra det för att visa radiell gradienter istället. Byter ut linjär-gradient för radial-gradient är allt du behöver göra här.
.box bakgrund: radial-gradient (# fdbb2d, # 22c1c3);
Denna radiella gradient sträcker sig till dess moderelement, så denna rektangel slutar med en ellipsliknande gradient. För att begränsa den gradienten så att den förblir en cirkel oavsett förälderns proportioner, kan vi lägga till cirkel sökord som så:
.rutan bakgrund: radial-gradient (cirkel, # fdbb2d, # 22c1c3);
Närmare bestämt kan vi ange källan till cirkelgradienten så att den börjar (till exempel) längst upp till vänster av föräldern.
.rutan bakgrund: radial-gradient (cirkel längst upp till vänster, # fdbb2d, # 22c1c3);
Effekten är subtil, men skillnaden mellan detta och en enkel linjär gradient kan vara precis vad du letar efter.
Var kan vi använda gradienter på några intressanta sätt?
Här är ett exempel på en överlagring, där gradienten är något transparent (den använder RGBA värden) och sitter på ett foto.
De bakgrund egendom kan acceptera flera värden som bildar en stapel, den första är den övre och den sista som befinner sig längst ner i stapeln. Om vi definierar en gradient först kommer den att sitta ovanpå vad vi definierar efteråt. Ta en titt på detta utdrag och se om du kan träna ut vad som händer:
.hjälte bakgrund: linjär gradient (till höger, rgba (75, 123, 211, 0,5), rgba (22, 215, 177, 0,3)), url (https: //bg.jpg);
Här är den resulterande effekten:
Att ha en gradient på text är en bra effekt, men inte helt stöds i ren mening. Istället litar vi på background-clip egendom (och dess prefixed -webkit-bakgrund-clip vän), vilket är något av ett hack men fungerar väldigt snyggt.
Vi börjar med en bit text (en h1 i det här fallet) och applicera en gradient till dess bakgrund. De background-clip egendom, givet ett värde av text, tar sedan bort bakgrunden från hela blocket utom för området bakom texten. Texten Färg döljer bakgrunden självklart, så vi gör det transparent för att låta gradienten skina genom:
h1 bakgrundsbild: linjär gradient (till höger, # 0cebeb, # 20e3b2, # 29ffc6); -webkit-bakgrundsbilder: text; bakgrundsbilder: text; färg: transparent;
Gränsvärden är något du kanske sett på Envato Elements, och de är ett utmärkt sätt att visuellt krydda ditt användargränssnitt. Det är subtilt gjort, men ta en titt på den blå-till-lila linjära gradienten på dessa knappers gränser:
För att uppnå denna effekt finns det ett antal tillvägagångssätt. Den första beror på att vi först ger ett element (ett ankare, en behållare, vad som helst) en genomskinlig gräns. Vi tillämpar sedan vår gradient med hjälp av border-image fast egendom. Slutligen ställer vi in border-image-skiva till 1, för att gradienten ska använda gränsens fulla gräns.
.card1 border: 5px solid transparent; gränsbild: linjär gradient (till botten, # 22c1c3, # fdbb2d); border-image-skiva: 1;
Här är resultatet:
Det finns dock några problem med detta tillvägagångssätt. för det första, border-image stöds inte universellt i alla webbläsare, i synnerhet äldre versioner av IE. För det andra tillåter detta tillvägagångssätt inte dig att lägga till border-radius som du ser i Envato Elements UI. Så låt oss titta på ett alternativt tillvägagångssätt.
Vi börjar med att ge vår div a position: relativ. Vi lägger sedan till ett pseudoelement till det och ger det a negativ absolut position för vad som helst vi valde vår kantbredd att vara (5px i det här fallet):
.card2 :: efter innehåll: "; position: absolut; topp: -5px; botten: -5px; vänster: -5px; höger: -5px;
Detta ger oss ett solidt gradient block som täcker hela vår div. Lägga till en z-index av -1 kommer att se till att gradientblocket rör sig bakom div.
Nästa (hej, det finns många steg för den här) lägger vi till en border-radius till pseudoelementet lika med sin förälder (låt oss tillämpa 10px vardera). Och då ger vi föräldrarna en bakgrund av vad vi vill, Samma som sidans bakgrund gör att den blir transparent.
Slutligen vänder vi än en gång till vår vän background-clip, tillämpa det på föräldern och den här gången ger det ett värde av padding-box. Den här sista åtgärden ser till att div-fyllningen går till kantens kant och inte längre.
Så det här slutliga tillvägagångssättet är egentligen inte en gräns i sann mening, men det uppnår den effekt vi letar efter.
Ett tredje tillvägagångssätt är möjligt, den här gången använder box-shadow för att uppnå effekten. Jag rekommenderar att du tittar på Gräns-gradient mixin av John Grishin på CodePen för att se hur det fungerar.
Så där går du! Denna primer på CSS-gradienter har gett dig den start du behöver, plus en titt på hur du kan använda gradienter på webben. Om du har sett några andra kreativa användningsområden av gradienter ute i naturen, snälla släpp dem i kommentarfältet.
Accentsconagua