Radiaal Verloop Recepten

0
21

Radiale verlopen zijn vrij dang cool. Het is verbazingwekkend kunnen we schilderen van de achtergrond van een element met hen zo gemakkelijk. Gemakkelijk is een relatief begrip, dat wel. Het is zeker makkelijker dan hoeven maken van een afbeelding in software van derden te gebruiken als de achtergrond, en de syntaxis is zeer learnable. Maar het is ook niet zo makkelijk te onthouden als u gebruik het niet vaak, en het is ingewikkelder dan de linear-gradient().

Ik dacht dat ik samen een pagina van verwijzing voorbeelden, dus als je weet wat je wilt, maar vergeet de syntaxis, het is gemakkelijk om te vinden dat de starter code voorbeeld hier.

Gecentreerd Uitbarstingen

De eenvoudigste mogelijk syntaxis plaatsen de eerste kleur in het midden van het element en de tweede kleur aan de buitenkant en dat is dat:

Zie de Pen Radial Gradient – Gecentreerd door Chris Coyier (@chriscoyier) op CodePen.

Die rekken het verloop in een ovaal op een niet-vierkante element al. Als u niet bevalt, kunt u het vorm in een cirkel, zoals op de tweede voorbeeld demonstreert hier:

Zie de Pen Radial Gradient – Cirkel vs. Ellips door Chris Coyier (@chriscoyier) op CodePen.

U kunt ook de grootte door letterlijk te zeggen hoe groot de cirkel/ellips moet worden (de uiteindelijke kleur zal nog steeds rek in de dekking van het element) door:

  • Met behulp van een trefwoord in het dichtst van de kant het verst van de kant het dichtst-hoek, verste hoek
  • Expliciet zeggen als radiaal verloop(cirkel 100px, …)
  • Het gebruik van kleur stopt als de radiale-gradient(#56ab2f, #a8e063 150px)

Zie de Pen Radial Gradient – Sizing ‘ van Chris Coyier (@chriscoyier) op CodePen.

Hier is wat van dat spul in gebruik:

Zie het Gebruik van de Pen van de Radiale Verlopen door Chris Coyier (@chriscoyier) op CodePen.

Zie de Pen Verlichte tekst van Chris Coyier (@chriscoyier) op CodePen.

Geplaatst

Naast het besturen van de grootte en de vorm van het verloop, de andere grote truc om te weten met radiale verlopen is, dat kunt u de positie van het midden van hen.

Dit is een van de tekortkomingen, vind ik, met het verloop generatoren. Zij helpen u bij het kiezen van kleuren stopt en dat soort dingen, maar ze hebben meestal punt op de positionering van de spullen.

Dit is een mooie gradient tool, maar lijkt niet te helpen met de positionering of lijmen. Sommige van hen doen een beetje helpen met de positionering (zie “Expert” – instellingen), maar niet blootstellen alle mogelijkheden.

Het centrum van een radiaal verloop hoeft niet in het midden! Voor voorbeeld, kunt u de positie van het centrum in de top links:

.element {
achtergrond: radiaal verloop(
op en top links
var(–licht), var(–donkere) /* variabelen gebruiken gewoon voor de lol! */
)
}

Hier is alle vier de hoeken:

Zie de Pen Geplaatst Radiaal verloop van Chris Coyier (@chriscoyier) op CodePen.

U kan ook zeer specifiek worden geplaatst. Hier is een voorbeeld van een gradiënt gepositioneerd precies 195px van de links aan de onderkant van het element. Het heeft ook een specifieke maat, maar anders is de standaard ellips vorm:

.element {
achtergrond: radiaal verloop(
150px 40px op 195px bodem,
#666, #222
);
}

Zie de Pen Specifiek gepositioneerd verloop van Chris Coyier (@chriscoyier) op CodePen.

Een ander klein ding om te weten is dat je kunt gebruiken transparant in de gradiënten te bloot de kleur achter als dat nodig is, of gedeeltelijk transparante kleuren zoals rgba(255, 255, 255, 0.5) om hetzelfde te doen op een gekleurde kleur stoppen.

Ook radiaal verloop kan worden gebruikt met meerdere achtergronden, het toepassen van meerdere van hen tot een enkel element, zelfs overlappende!

.element {
achtergrond:
radiaal verloop(
cirkel linksboven,
rgba(255, 255, 255, 0.5),
transparante 100px
),
radiaal verloop(
cirkel rechtsboven,
rgba(255, 255, 255, 0.5),
transparante 100px
),
radiaal verloop(
onderaan links,
rgba(255, 0, 255, 0.5),
transparante 400px
),
radiaal verloop(
onderaan rechts,
rgba(255, 100, 100, 0.5),
transparante 400px
);
}

Zie de Pen van Meerdere Hellingshoeken van Chris Coyier (@chriscoyier) op CodePen.

Markeer het idee dat het midden van de gradiënt kan overal, hier is een gradiënt die de muis volgt:

Zie de Pen Radiaal Verloop Bewegen Met de Muis door Leo Sammarco (@lsammarco) op CodePen.

Bronnen

Mensen hebben de neiging om na te denken over de steun van de browser, en terecht, maar niet te hard denken over het in dit geval. We zijn op vrijwel over de hele linie te ondersteunen, zelfs zonder voorvoegsels.

  • Er is ook herhalen-linear-gradient() en hier Ana Tudor krijgt in detail en use cases.
  • Nodig zijn een aantal kleuren die gaan mooi samen in een gradiënt? uiGradients is leuk.
  • MDN op radiaal verloop
  • Zie onze complete gids voor alle gradiënten hier!

OK doei!

Zie de Pen CSS Zonsondergang Zonsopgang door Marty Saetre (@msaetre) op CodePen.