Radiell Övertoning Recept

0
38

Radiell gradienter är ganska dang cool. Det är fantastiskt att vi kan måla bakgrunden av ett element av med dem så lätt. Enkelt är ett relativt begrepp om. Det är säkert lättare än att behöva för att skapa en grafisk i tredje parts programvara för att använda som bakgrund, och syntaxen är mycket att lära sig. Men det är inte heller så lätt att komma ihåg om du inte använder det ofta, och det är mer komplicerat än linear-gradient().

Jag tänkte att jag skulle sätta ihop en sida av referens exempel, så om du vet vad du behöver men glömmer syntax, det är lätt att hitta som förrätt kod exempel här.

Centrerad Skurar

Enklast möjliga syntax platser den första färgen i mitten av elementet och den andra färgen på utsidan och det är:

Se Pennan Radiell Övertoning i centrum av Chris Coyier (@chriscoyier) på CodePen.

Som kommer att sträcka lutning i en ellips på en icke-kvadrat del ändå. Om du inte gillar att du kan tvinga den att forma till en cirkel, som det andra exemplet visar här:

Se Pennan Radiell Övertoning – Cirkel vs. Ellips av Chris Coyier (@chriscoyier) på CodePen.

Du kan även styra storlek genom att bokstavligen säga hur stor cirkel/ellips bör vara (den slutliga färgen kommer fortfarande sträcka ut för att täcka de element), genom att:

  • Med hjälp av ett sökord närmast-sida, som är längst bort-sida, närmast hörnet, längst bort i hörnet
  • Uttryckligen säger så radial gradient(cirkel 100px, …)
  • Använda färg som stannar radial gradient(#56ab2f, #a8e063 150px)

Se Pennan Radiell Övertoning – Dimensionering av Chris Coyier (@chriscoyier) på CodePen.

Här är några av sånt i användning:

Se Pennan Användning av Radiella Gradienter av Chris Coyier (@chriscoyier) på CodePen.

Se Pennan Lyser text av Chris Coyier (@chriscoyier) på CodePen.

Placerad

Förutom att kontrollera storleken och formen av lutning, den andra stora knep för att veta med radiell gradienter är att du kan placera mitten av dem.

Detta är en av de brister jag finner, med lutning generatorer. De kan hjälpa dig att välja färger och färgen stannar och grejer, men de brukar punt på placering grejer.

Detta är en vacker gradient tool, men inte hjälper med placering eller storlek. Några av dem vill hjälpa till lite med positioneringslogik (se “Expert” inställningar), men utsätt inte alla möjligheter.

Centrum av en radiell övertoning behöver inte vara i centrum! Du kan till exempel placera center i övre vänstra så här:

.element {
bakgrund: radial gradient(
högst upp till vänster
var(–ljus), var(–mörk) /* med hjälp av variabler bara för skojs skull! */
)
}

Här är alla fyra hörn:

Se Pennan Placeras Radiell Gradienter av Chris Coyier (@chriscoyier) på CodePen.

Du kan också vara mycket speciellt läge. Här är ett exempel på en gradient placerade precis 195px från vänster längs botten av elementet. Det har också en viss storlek, men annars inte standard oval form:

.element {
bakgrund: radial gradient(
150px 40px på 195px botten,
#666, #222
);
}

Se Pennan Specifikt placerad gradient av Chris Coyier (@chriscoyier) på CodePen.

En annan liten sak att veta är att du kan använda transparent i lutningar för att exponera färg bakom om det behövs, eller delvis transparenta färger som rgba(255, 255, 255, 0.5) att göra samma sak på en färglagd färg sluta.

Också, radial gradienter kan användas med flera bakgrunder, tillämpa flera av dem till en enda faktor, även överlappande!

.element {
bakgrund:
radial gradient(
cirkeln överst till vänster,
rgba(255, 255, 255, 0.5),
öppet 100px
),
radial gradient(
cirkeln uppe till höger,
rgba(255, 255, 255, 0.5),
öppet 100px
),
radial gradient(
längst ned till vänster,
rgba(255, 0, 255, 0.5),
öppet 400px
),
radial gradient(
längst ned till höger,
rgba(255, 100, 100, 0.5),
öppet 400px
);
}

Se Pennan Flera Gradienter av Chris Coyier (@chriscoyier) på CodePen.

Att lyfta fram tanken att mitten av gradient kan vara var som helst, här är en toning som följer musen:

Se Pennan Radiell Övertoning Flytta Med Musen genom att Leo Sammarco (@lsammarco) på CodePen.

Resurser

Människor tenderar att tänka webbläsare stöd, och rätteligen så, men tänk inte för hårt om det i detta fall. Vi är på ganska mycket över styrelsens stöd även utan något prefix.

  • Det är också upprepa-linear-gradient() och här Ana Tudor får i detalj och användningsfall.
  • Behöver några färger att gå fint tillsammans i en gradient? uiGradients är trevligt.
  • MDN på radial gradient
  • Se våra kompletta guiden till alla lutningar här!

OK bye!

Se Pennan CSS Solnedgång Soluppgång från Marty Saetre (@msaetre) på CodePen.