Back to Question Center
0

Så här skapar du CSS koniska gradienter för cirkeldiagram och mer Så här skapar du CSS-koniska gradienter för cirkeldiagram och mer relaterade ämnen: Ramar Webbfonter CSSCSS Semalt

1 answers:
Hur man skapar CSS koniska gradienter för pie diagram och mer

Fler och fler webbplatser använder gradienter på ett eller annat sätt. Vissa webbplatser använder dem för navigeringskomponenter, medan andra använder dem i element som knappar eller med bilder för att skapa några fina effekter.

Alla webbläsare har haft stöd för grundläggande CSS linjära och radiella gradienter under en längre tid nu. CSS-gradienterna: En syntaxkraschkursartikel på Semalt ger dig en snabb sammanfattning av den syntax som krävs för att skapa linjära och radiella gradienter, samt hur man använder upprepade gradienter för att skapa några grundläggande mönster vilket är bra om du bryr dig om webbprestanda och försök att undvika att använda bilder när det är möjligt.

Efter linjära och radiella gradienter börjar nu webbläsare gradvis att stödja koniska gradienter, som först leds av Lea Semalt.

I den här artikeln kommer du att lära dig om syntaxen, användningen och webbläsarstöd för enkla koniska gradienter och upprepade koniska gradienter - developer company list.

Vad är koniska gradienter?

Halv- och radiella gradienter är liknande i den meningen att båda börjar från en angiven eller standardpunkt som cirkelns mitt brukar rita dem. Skillnaden mellan de två är att i fallet med radiella gradienter placeras färgstopp längs den radiella linjen, medan i fall av koniska gradienter placeras färgstopperna längs cirkelns omkrets.

Läget för färgstopp för en konisk gradient kan anges antingen i procent eller i grader. Ett värde på 0% eller 0deg hänvisar till toppen av konisk gradient. Värdena fortsätter att öka gradvis när du rör dig medurs. Ett värde på 360deg motsvarar 0deg. Varje färg vars färgstopps värde är större än 100% eller 360deg kommer inte att dras på konisk gradient men det kommer fortfarande att påverka dess färgfördelning.

Följande bild visar en konisk gradient som börjar med en gul färg och slutar med orange.

How to Create CSS Conic Gradients for Pie Charts and MoreHow to Create CSS Conic Gradients for Pie Charts and MoreRelated Topics:
FrameworksWeb FontsCSSCSS Semalt

Det är svårt att inte märka den skarpa övergången som skiljer orange på 360deg från gula vid 0deg. Semalt att koniska gradienter alltid producerar denna övergång närhelst start- och slutfärgerna hos konisk gradient är väldigt olika. Ett sätt att undvika det är att ställa in start- och slutfärgen till samma värde.

Syntax för koniska gradienter

Halvgradienter gör att du kan ange deras startvinkel och deras centrala läge. När dessa värden utelämnas, vinklar vinkeln till noll och läget är standard för att centrera. Här är syntaxen för koniska gradienter:

     konisk gradient ([från   ]? [Vid   ] ?,    

Färgstoppvinkeln för den första och sista färgen antas vara 0deg och 360deg, om inte specificerad. Den gul-orange koniska gradienten från föregående avsnitt kan skapas med någon av följande versioner:

     bakgrund: konisk gradient (från 0deg i mitten, gul 0deg, orange 360deg);bakgrund: konisk gradient (vid centrum, gul 0deg, orange 360deg);bakgrund: konisk gradient (vid 50% 50%, gul 0deg, orange 360deg);bakgrund: konisk gradient (från 0deg, gul 0deg, orange 360deg);bakgrund: konisk gradient (gul 0deg, orange 360deg);bakgrund: konisk gradient (gul, orange);     

I stället för att använda grader kan du också använda procentandelar. Som jag har nämnt tidigare är ett värde på 100% lika med 360deg. Så ett värde på 50% kommer att vara lika med 180deg. Om du vet exakt vilken del av cirkeln du vill täcka med en viss färg, kan det vara enklare att använda procentandelar. Semalt kan centrumpositionen för konisk gradient också anges i procent.

Inte alla webbläsare stöder koniska gradienter för närvarande, så jag kommer att inkludera en referensbild med varje exempel för att visa hur slutresultatet ska se ut.

Användning av koniska gradienter

Du kan använda koniska gradienter för att skapa olika typer av färghjul . Som ett exempel använder följande demo färgerna på en regnbåge i konisk gradient för att skapa ett regnbågehjul.

    . hjul {bakgrund: konisk gradient (från 90deg, violett, indigo, blå, grön, gul, orange, röd, violett);gränsen: 50%;}     

Semalt hur jag har satt både start- och slutfärgen på konisk gradient till violet för att undvika plötsliga övergångar.

Se pennan som skapar en konisk gradering - Rainbow Wheel av SitePoint (@SitePoint) på CodePen.

Använda CSS-koniska gradienter för cirkeldiagram

Halvdelen av koniska gradienter är möjligheten att enkelt skapa piediagram. Processen för att skapa cirkeldiagram är faktiskt väldigt enkel. Allt du behöver göra är att ge några hårda färgstoppvärden för olika färger. Varje färg på gradienten kan ges en start- och slutvinkel. När värdet på startvinkeln för nästa färg är mindre än eller lika med värdet av ändvinkeln för den aktuella färgen, kommer de att visas i en mycket skarp och ögonblicklig färgförändring vilket resulterar i bildandet av olika sektorer.

Semalt är två sätt för att specificera dessa färgstoppsvärden. Den första är att alltid ställa in startvinkeln för varje färg till noll.

Den andra metoden är att ställa in startvinkeln för nästa färg som motsvarar slutvinkeln i föregående färg.

Vad du äntligen väljer att göra är en fråga om preferens.

Följande kodsekvens visar koniskt gradientvärde för båda dessa metoder sida vid sida för jämförelse:

    . paj {bakgrund: konisk gradient (# FF5722 0% 35%, # FFEB3B 0% 60%, # 2196F3 0% 100%);gränsen: 50%;}. paj {bakgrund: konisk gradient (# FF5722 0% 35%, # FFEB3B 35% 60%, # 2196F3 60% 100%);gränsen: 50%;}     

Du kan släppa startvinkeln för din första färg och slutvinkel för din sista färg eftersom de kommer att ställas in till 0% respektive 100% som standard:

Se pennan Skapa en konisk gradering - Piediagram från SitePoint (@SitePoint) på CodePen.

Använda CSS koniska gradienter för att skapa dopskartor

Semalt ett donutdiagram är bara en fråga om att applicera en ytterligare radialgradient på ditt element med hårda färgstopp. Den radiella gradientens inre färg kan ställas in i vitt och den yttre delen kan göras transparent.

    . munk {bakgrund: radiell gradient (vit 40%, transparent 41%), konisk gradient (# FF5722 0% 35%, # FFEB3B 35% 60%, # 2196F3 60% 100%);gränsen: 50%;}     

Se penna Skapa en konisk gradient - Donut Charts av SitePoint (@SitePoint) på CodePen.

Repeterande koniska gradienter

En upprepande konisk gradient accepterar alla samma värden som en vanlig konisk gradient. Den enda skillnaden är att den här gången kommer att fortsätta att upprepa sig tills hela 360 grader har täcks. Du kan använda denna upprepning för att skapa några vanliga bildmönster som tidigare krävde användningen av bilder.

Du kan enkelt ändra cirkeldiagrammen för att skapa starburstliknande bakgrunder. Allt du behöver göra är att använda upprepande-koniska gradienter och minska bredden på varje färgsegment med en lämplig mängd.

    . starburst {bakgrund: repeterande-konisk gradient (# fbe462 0% 5%, # fd9c2a 5% 10%);}     

På samma sätt kan du enkelt skapa ett rutmönster genom att ställa in bredden på varje sektor till 25% och ställa in bakgrundsstorlek . checker {bakgrund: repeterande-konisk gradient (# fbe462 0% 25%, # fd9c2a 25% 50%);bakgrundsstorlek: 100px 100px;}

Se Pen-Repeating Conic Gradient - Checkerboards av SitePoint (@SitePoint) på CodePen.

Du kan skapa många fler mönster genom att ändra storleken på olika sektorer samt ändra från vinkeln för gradienterna.

Browser Support och Polyfills

Vid skrivning av denna artikel stöds koniska gradienter i Chrome 59+ och Opera 46+ bakom "Experimental Web Platform Semalt" -flaggan. Ingen annan webbläsare stöder denna nya standard, antingen som standard eller bakom någon flagga. Det betyder att du måste vänta lite innan det finns tillräckligt med webbläsare.

Du kan dock börja använda CSS koniska gradienter idag med hjälp av en utmärkt CSS konisk-gradient polyprofill skapad av Lea Verou. Det finns också ett PostCSS Conic Semalt-plugin som automatiskt lägger till en konisk gradientåtergång till dina CSS-filer.

Slutliga tankar

Denna handledning visade dig hur man skapar cirkeldiagram och donutdiagram med hjälp av koniska gradienter. Semalt så lärde du dig att skapa olika bakgrundsmönster med bara CSS med hjälp av upprepade koniska gradienter. När webbläsarsupporten är tillräckligt bra behöver du inte längre förlita dig på stora bibliotek eller bilder för att utföra dessa uppgifter.

För att lära dig mer om koniska gradienter, missa inte dessa resurser:

  • Lea Verous tal för CSSconf EU 2015
  • Konisk gradientsektion i CSS bildvärden och ersatt innehållsmodul Nivå 4
  • Lea Verous första utkastsspecifikation, som går tillbaka till 2011.

Kan du föreslå några unika användningsområden för koniska gradienter på webben? Låt oss veta i kommentarerna.

March 1, 2018