400x400px

Verlooppuntkleuren kunnen worden geschreven in elk formaat dat beschikbaar is in CSS, zij het hexadecimale code, RGB-formaat of andere. De richting van de helling wordt gespecificeerd met het voorvoegsel to en vervolgens de trefwoorden left , right , top en bottom , die kunnen worden gecombineerd om de helling te veranderen. Bijvoorbeeld:

Achtergrondafbeelding: lineair verloop (naar rechtsonder, #ee82ee, #ff0000);

Bovendien kunt u de hellingshoek direct aangeven door een positief of negatief getal te gebruiken met het voorvoegsel deg (zonder spatie). Bij een gegeven hoek van 0° of 360° loopt de gradiëntlijn van onder naar boven. Naarmate de kantelhoek groter wordt, beweegt de vector met de klok mee (bij gebruik van een negatieve waarde wordt de beweging omgedraaid). Voorbeeld code-invoer:

Achtergrondafbeelding: lineair verloop (-110deg, #ee82ee, #ff0000);

Meerdere ankerpunten

Zoals we al zeiden, kan een verloop meer dan twee ankerpunten hebben. In dit geval zal de achtergrond vloeiend overgaan van de eerste kleur naar de tweede, van de tweede naar de derde, van de derde naar de vierde, enzovoort totdat het uiteindelijke referentiepunt wordt bereikt. Als u het aantal van deze punten in het verloop wilt vergroten, voegt u ze gewoon toe, gescheiden door komma's. Bijvoorbeeld:

Achtergrondafbeelding: lineair verloop (145 graden, #ee82ee, leiblauw, #ffd86a, paars);

In ons voorbeeld zijn vier referentiekleurpunten aangegeven, maar u kunt er zoveel toevoegen als u wilt en in alle beschikbare kleurformaten.

Overgangslengte

Standaard plaatst de browser de stippen op gelijke afstanden, zodat de gradatie uniform is. Maar deze afstand kan worden gecontroleerd met behulp van eenheden CSS-afmetingen. Laten we eens kijken naar het volgende voorbeeld:

Achtergrondafbeelding: lineair verloop (#92009b 20%, #f5e944 90%, #00ffa2);

In onze code wordt na de kleur #92009b de waarde 20% aangegeven. Omdat dit zich dichtbij het eerste ankerpunt bevindt, betekent dit dat 20% van de lengte van het element in de opgegeven kleur wordt geverfd. Daarna begint het verloop: een waarde van 90% vertelt de browser dat hij de kleur #f5e944 moet bereiken met 90% van de lengte van het element (beginnend bij 20%). Daarna begint de overgang naar de derde kleur in de resterende ruimte - #00ffa2.

Dit onderwerp vereist ook oefening. Probeer een verloopachtergrond te maken met meerdere ankerpunten (meer dan twee), speel met de afstandswaarden en bekijk de verloopverandering in de browser.

Voorvoegsels van leveranciers

Om cross-browser compatibiliteit te garanderen, moeten sommige late CSS-eigenschappen worden toegevoegd met leveranciersvoorvoegsels - speciale voorvoegsels toegevoegd door browserontwikkelaars:

• -webkit- - voorvoegsel voor Chrome, Safari, Android;
• -moz- is een voorvoegsel voor Firefox;
• -o- is het voorvoegsel voor Opera.

Achtergrondverloop vereist ook het gebruik van deze voorvoegsels als er behoefte is aan ondersteuning maximale hoeveelheid browsers. Pas hiervoor de code als volgt aan:

Achtergrondafbeelding: -webkit-lineair-gradiënt(links, violet, rood); achtergrondafbeelding: -moz-lineair-gradiënt (links, violet, rood); achtergrondafbeelding: -o-lineair verloop (links, violet, rood); achtergrondafbeelding: lineair verloop (naar links, violet, rood);

Als u een voorvoegsel wilt toevoegen, moet er een afzonderlijke advertentie worden gemaakt. Ook, zoals u wellicht heeft gemerkt, eigendommen met leveranciersvoorvoegsels Niet vereisen het gebruik van het voorvoegsel om de richting van de helling aan te geven.

Ondersteuning voor Internet Explorer

Helaas werkt de verloopachtergrond alleen in IE10+. Vorige versies begrijp het niet en zal het negeren. Om er tenminste voor te zorgen normale achtergrond in oudere browsers kunt u een zogenaamde. "stub": selecteer een geschikte tint en schrijf de eigenschap achtergrondkleur boven eigenschap met een verloop. Dus, oude browser zal een “back-up” achtergrondkleur toepassen en onbekende eigenschappen overslaan, terwijl dat bij meer het geval is moderne browser de verloopachtergrond overlapt en bedekt de effen achtergrond.

Als u een doorschijnende verloopset hebt (bijvoorbeeld door gebruik te maken van een kleur RGBA-formaat) en u wilt niet dat de fallback-achtergrond zichtbaar is, stelt u het verloop in met behulp van de shorthand background-eigenschap in plaats van background-image . Vervolgens wordt de achtergrondkleurwaarde overschreven naar transparant .

Verder in de tutorial: repeating-linear-gradient() - herhalende lineaire gradiënt.

• Vertaling

Toen ik aan een vertaling over het singlediv.com-project werkte, bleek dat sommige CSS-tools een bredere toepassing hebben dan ik altijd dacht. Maar om deze toepassing te kunnen vinden, is het noodzakelijk om de kenmerken van het onroerend goed duidelijk te begrijpen. Een sprekend voorbeeld werd een lineair verloop, dat Lynn Fisher op meesterlijke wijze in haar werken gebruikte.

Wilt u een schattige verloopachtergrond op uw website maken? achtergrondafbeelding: lineair verloop (rood, blauw); klaar! Ja, het is een beetje saai. Dus als je iets meer wilt, raad ik deze pagina met css- en MDN-tips aan. Ben je hier nu? Laten we dan eens kijken naar enkele dingen over hoe lineaire gradiënten eigenlijk werken. Laten we eerst eens kijken naar de syntaxis die kan worden gebruikt in de lineaire gradiëntfunctie:

lineair verloop ([van<угла>| voor<стороны-или-угла>]?, );
De functie gebruikt een optioneel eerste argument dat de hoek van de helling specificeert, die kan worden uitgedrukt met behulp van een maateenheid (graad, straal, graden, omwenteling) of als trefwoord (zijde of hoek).

De functie accepteert vervolgens een lijst met kleuren.

Verloopveld

De verloopafbeelding heeft geen afmetingen, deze is oneindig in tegenstelling tot andere achtergrondafbeeldingen. De zichtbare afmetingen worden eraan gegeven door het gradiëntveld, d.w.z. het gebied waarin het wordt weergegeven.

Meestal wanneer u gebruikt achtergrond afbeelding als een lineaire gradiënt naar DOM-element, is dit gebied het grenskader van het element (dat is precies het gebied waarin de achtergrondkleur wordt weergegeven).

Als u echter ook de CSS-eigenschap achtergrondgrootte gebruikt en deze instelt op bijvoorbeeld 200px * 200px, dan heeft het verloopveld deze grootte en wordt het standaard in de linkerbovenhoek van het DOM-element geplaatst, tenzij je stelt ook de achtergrondpositie in.

Houd er bij het lezen van de volgende paragrafen rekening mee dat het verloopvak niet altijd even groot of hetzelfde formaat heeft als het DOM-element waarop u het verloop toepast.

Verlooplijn

In een verloopveld wordt de lijn die door het midden loopt en waarlangs de kleuren worden verdeeld de verlooplijn genoemd. Deze lijn kan eenvoudiger worden beschreven door de gradiënthoek uit te leggen, dus dit zal in de volgende sectie gedetailleerder worden besproken.

Gradiënthoek

Het is duidelijk dat de hoek van een lineaire gradiënt wordt gebruikt om te bepalen in welke richting de gradiënt zal gaan. Maar laten we dit aspect in meer detail bekijken.

Als C dat is middelpunt gradiëntvelden, dan is A de hoek tussen de verticale lijn die door C gaat en de gradiëntlijn, die ook door C gaat, en waarlangs de stopkleuren van het verloop worden verdeeld.

Deze hoek kan op twee manieren worden bepaald:

Met behulp van een van de trefwoorden: naar boven (omhoog), naar beneden (omlaag), naar links (links), naar rechts (rechts), naar rechtsboven (rechtsboven), naar linksboven (linksboven), naar rechtsonder ( rechtsonder), linksonder (linksonder);
Of door een hoek te definiëren met een getal en een maateenheid, bijvoorbeeld 45 graden (45 graden), 1 draai (1 draai);

Als de hoek niet is opgegeven, is deze standaard naar beneden gericht (dat wil zeggen: 180 graden of 0,5 draaiingen):

In deze en de volgende afbeeldingen wordt het verloopvak begrensd door een rechthoek en is de verlooplijn de dikke grijze lijn die door het midden loopt waarlangs de kleuren verschijnen.

In het bovenstaande voorbeeld is geen hoek gespecificeerd, dus het verloop van wit naar rood beweegt van boven naar beneden, wat overeenkomt met het trefwoord naar beneden, zoals hieronder weergegeven:

En, zoals te zien is in de volgende 2 afbeeldingen, komt de bovenkant overeen met een hoek van nul graden:

Een andere belangrijk punt Iets dat de moeite waard is om te overwegen bij het gebruik van hoekzoekwoorden: dat naar rechtsboven bijvoorbeeld (of een ander hoekzoekwoord) afhankelijk is van de afmetingen van het verloopvak.

De logica is dat als je een verloop van rood naar blauw naar de rechterbovenhoek van een element zou willen maken, het element blauw in de rechterbovenhoek zou hebben en de paarse kleur in het midden van het verloop zich zou vormen rond een lijn die loopt van de linkerbovenhoek naar de rechteronderhoek. Zo ziet het eruit op de afbeelding:

Naar rechtsboven betekent dus niet dat de verlooplijn door rechts gaat bovenste hoek, en dat betekent niet eens dat de gradiënthoek 45 graden is!

Laten we eens kijken hoe de verlooplijn beweegt als de hoek verandert met de volgende animatie:

In deze animatie kantelt de hoek van 0 tot 360 graden in stappen van 10 graden. Door de lage resolutie van de GIF kun je zelfs beter zien hoe verschillende kleuren verschijnen als "lijnen" die altijd loodrecht op de verlooplijn staan.

Laten we onthouden wat we weten over gradiënthoeken:

De hoek wordt gemeten tussen de gradiëntlijn en de lijn die het midden van het gradiëntveld verlaat en naar boven beweegt.
Daarom betekent 0 graden omhoog.
Standaard waarde hoek, indien niet gespecificeerd, is naar beneden, wat gelijk is aan 180 graden.
De hoeksleutelwoorden zijn afhankelijk van de grootte van het verloopveld.

Lengte van de verlooplijn

Voordat we kunnen zien hoe kleuren langs een verlooplijn worden verdeeld, moeten we één ding uitleggen. Het is je misschien in de vorige animatie opgevallen dat de kleuren soms buiten het verloopvak zijn geplaatst, wat er op het eerste gezicht misschien een beetje vreemd uitziet, maar het is logisch als je de reden kent.

Kijk naar het voorbeeld:

We willen een rood naar blauw verloop in een hoek van 45 graden, en vanwege de beeldverhouding van het verloopveld kan de verlooplijn niet door de rechterbovenhoek gaan.

Maar de browser wil (dat wil zeggen, de specificaties dwingen dit af) om de rechterbovenhoek puur blauw te maken. Als we de gradiëntlijn laten beginnen en eindigen aan de randen van het veld, dan Blauwe kleur nam het grootste deel van het veld in beslag, en de gradiënt zou zich niet zo ver hebben verspreid.

Om dit te kunnen doen, moet de verlooplijn soms buiten het verloopvak uitsteken. Tegelijkertijd is het vrij eenvoudig om erachter te komen waar het begint en waar het eindigt. Teken eenvoudig een lijn die door de dichtstbijzijnde hoek gaat en loodrecht op de verlooplijn staat. Het punt waar deze lijn de gradiëntlijn snijdt, is de start-/eindlocatie.

Als u de breedte van het verloopveld W, de hoogte H en de hoek van het verloop specificeert, is de lengte van de verlooplijn feitelijk:

Abs(W * sin(A)) + abs(H * cos(A))

Kleuren

De kleuren vertegenwoordigen een door komma's gescheiden lijst waarin elk element als volgt kan worden gedefinieerd:
<цвет> [<процентное соотношение> | <длина>]?

Daarom is het niet nodig om op te geven waar de kleuren langs de verlooplijn moeten worden geplaatst. Bijvoorbeeld:

Geen van de kleuren heeft een eigen positie, dus de browser heeft zelf hun positie bepaald.

Eigenlijk eenvoudig voorbeeld met slechts 2 kleuren wordt kleur 1 op 0% geplaatst (aan het begin van de verlooplijn) en kleur 2 op 100% (aan het einde van de verlooplijn).

Als u vervolgens een derde kleur toevoegt, heeft u nog steeds kleur 1 op 0%, kleur 2 op 50% en kleur 3 op 100%, enzovoort.

In het bovenstaande voorbeeld werden 5 stopkleuren gegeven en de browser berekende hun relatieve positie als 0%, 25%, 50%, 75%, 100%. De reden hiervoor is de uniforme verdeling langs het gradiëntveld.

De kleurpositie kan worden uitgedrukt als een percentage (ten opzichte van de grootte van de verlooplijn) of als een CSS-lengte (waarbij elke CSS-eenheid geldig is).

Hier is een voorbeeld:

Zoals u kunt zien heeft elk van de 5 stopkleuren een eigen positie, aangegeven in pixels. Deze posities worden berekend vanaf het begin van de gradiëntlijn.

Met behulp van dergelijke posities kun je er meerdere krijgen interessante effecten. Je kunt bijvoorbeeld een verloop gebruiken om niet het verloop zelf te tekenen, maar een paar kleuren te laten:

Er zijn 7 kleuren in de afbeelding hierboven en deze zijn zo ingesteld dat de volgende kleur op precies dezelfde positie begint als de vorige, wat betekent dat de browser de ruimte tussen de twee stopkleuren niet hoeft te vullen met een verloop.

Natuurlijk, dat is allemaal schattig en grappig, maar wat gebeurt er als je gepositioneerde kleuren mengt met niet-gepositioneerde kleuren? Vervolgens dwingt u de browser harder te werken en vraagt ​​u hem automatisch kleuren te distribueren waarvoor u geen positie hebt opgegeven:

In dit eenvoudige voorbeeld heeft de tweede kleur (oranje) geen positie, dus de browser bepaalt deze en vindt een geschikte plaats tussen de eerder opgegeven kleur en de volgende kleur. Hier is het heel eenvoudig, aangezien de directe buren van de tweede kleur hun eigen positie hebben, maar als slechts enkele kleuren posities hebben, of als de vorige of volgende kleuren geen positie hebben, wordt het ingewikkelder.

Laten we een paar voorbeelden bekijken:

In het bovenstaande voorbeeld is alleen de derde kleur (geel) op 30% gepositioneerd. Om alle andere kleuren beter te verdelen, wordt de eerste op 0% geplaatst, de laatste op 100% en worden de overige kleuren daartussen verdeeld (zodat oranje direct tussen 0% en 30% terechtkomt, en rood tussen 30% en 30%). 100%).

In het bovenstaande voorbeeld zijn de eerste en de laatste kleur gepositioneerd, zodat de rest gelijkmatig over deze twee wordt verdeeld.

Het zou natuurlijk te simpel zijn als 0% en 100% rigide grenzen zouden zijn die niet overschreden kunnen worden. Maar zoals u in het vorige voorbeeld kunt zien, bevindt de laatste kleur zich op 120% en daarom moeten alle andere kleuren dienovereenkomstig worden verdeeld ten opzichte van deze positie (het standaard startpunt blijft in dit geval 0%).

En als u uw browser nog harder wilt laten werken, waarom specificeert u dan niet de volgorde van de posities?

In feite zouden de kleuren in orde moeten zijn, maar niets belet je dit te doen, en er zal niets vreselijks gebeuren als je dat niet doet. Uw browser zal alles eenvoudig repareren, zoals hieronder weergegeven:

Laten we beginnen met de eerste kleur (rood), gelegen op 30%. Dan bevindt de tweede kleur zich op 10%, wat al onjuist is, aangezien kleuren, zoals hierboven vermeld, in oplopende volgorde moeten worden aangegeven. Hier corrigeert de browser dus de positie van de tweede kleur en stelt deze in op dezelfde positie als de vorige kleur (30%). Vervolgens komt de derde kleur (geel) op 60%, wat correct is, maar deze wordt gevolgd door een vierde (blauw) op 40%. Opnieuw wordt de positie aangepast en op dezelfde waarde gezet als de eerder gepositioneerde kleur.

Uiteindelijk wordt, zoals in het bovenstaande voorbeeld te zien is, de laatste kleur (blauw) verkeerd gepositioneerd en maakt de browser zijn positie hetzelfde als de vorige kleur, wat in in dit geval is noch zijn directe buur (geel), noch de buurman van de kleur die ervoor komt (oranje), dus hij moet terugvallen op de eerste kleur (rood). Zo worden alle kleuren tussen rood en blauw op 30% gezet en zijn dus onzichtbaar.

Hulpmiddelen

Alle schermafbeeldingen in dit artikel zijn afkomstig van een eenvoudig hulpmiddel dat ik op codepen heb gemaakt en waarmee u een lineaire gradiëntfunctie kunt invoeren en het verloopvak, de gradiëntlijn, de hoek en kleurinformatie bovenop het element kunt zien.

De tool heeft allerlei bugs en beperkingen (zie javascript-opmerkingen), dus verwacht er niet veel van.

Tags:

• CSS
• lineair verloop

Tags toevoegen