Share
In deze zelfstudie leer je over het gebruik van verlopen op internet. Ik zal je een aantal voorbeelden geven, enkele oefeningen (zoals hoe gradiënten voor grenzen te maken), en ik zal ook wat nuttige bronnen erin gooien die het maken van gradaties een stuk gemakkelijker zullen maken.
Vroeger was het niet echt mogelijk om gradiënten te gebruiken zonder te vertrouwen op afbeeldingen, maar ontwikkelingen in CSS betekenen dat het nu eenvoudig en betrouwbaar is om gradiënten te maken vanuit onze stylesheets.
In hun eenvoudigste vorm definiëren we gradiënten als achtergrondafbeeldingen. We stellen de achtergrondafbeelding in (alleen het gebruik van de steno achtergrond is absoluut prima) als een van beide lineaire gradiënt of a radiale gradiënt, dan geven we de begin- en eindkleuren door:
.vak achtergrond: lineair verloop (# 000046, # 1cb5e0);
Standaard loopt een lineair verloop van boven naar beneden, wat ons zoiets geeft als:
We kunnen de richting wijzigen door vóór de kleuren een nieuwe parameter toe te voegen, bijvoorbeeld:
.vak achtergrond: lineair verloop (naar rechts, # 000046, # 1cb5e0);
Evenzo, deze parameter wijzigen in lezen naar rechts bovenaan zou een diagonale gradiënt creëren. Je kunt die diagonaal ook exact maken door iets als te specificeren 45deg (of welke hoek je ook kiest).
Als je een stap verder gaat, hoef je niet bij slechts twee kleuren te stoppen. En u kunt ook kleurnamen gebruiken, zoals dit:
.vak achtergrond: lineair verloop (naar rechts, oranje, # ec38bc, # 7303c0, cyaan);
In dit geval bezetten elk van de vier kleuren een gelijk deel van de beschikbare ruimte, waardoor we een vloeiend, gebalanceerd verloop krijgen.
Als we geen gelijkmatige verdeling willen, maar willen dat de ene kleur meer ruimte inneemt dan de andere, kunnen we die waarde direct achter de kleur als percentage opgeven, zoals:
.vak achtergrond: lineair verloop (naar rechts, # f05053 80%, # e1eec3);
Geeft ons:
Verderop kunnen we alles gebruiken wat we tot nu toe hebben geleerd en het veranderen in weergave radiale verlopen in plaats daarvan. Uitschakelen lineaire gradiënt voor radiale gradiënt is alles wat je hier hoeft te doen.
.vak achtergrond: radiale gradiënt (# fdbb2d, # 22c1c3);
Deze radiale gradiënt strekt zich uit tot het bovenliggende element, zodat deze rechthoek eindigt in een ellipsachtige gradiënt. Om dat verloop te beperken, zodat het een cirkel blijft ongeacht de verhoudingen van de ouder, kunnen we het verloop toevoegen cirkel trefwoord zoals zo:
.vak achtergrond: radiale gradiënt (cirkel, # fdbb2d, # 22c1c3);
Stilzwijgend kunnen we ook de bron van de cirkelgradiënt specificeren, zodat deze begint (bijvoorbeeld) in de linkerbovenhoek van de bovenliggende.
.vak achtergrond: radiale gradiënt (cirkel bovenaan links, # fdbb2d, # 22c1c3);
Het effect is subtiel, maar het verschil tussen dit en een eenvoudige lineaire gradiënt kan precies zijn wat u zoekt.
Waar kunnen we gradiënten op een aantal interessante manieren gebruiken?
Hier is een voorbeeld van een overlay, waarbij het verloop enigszins transparant is (het gebruikt RGBA waarden) en staat op een foto.
De achtergrond eigenschap kan verschillende waarden accepteren die een stapel vormen, de eerste is de bovenste en laatste bevinding zelf onderaan de stapel. Als we eerst een verloop definiëren, staat deze bovenaan wat we achteraf definiëren. Bekijk dit fragment en kijk of je kunt uitzoeken wat er gebeurt:
.hero background: linear-gradient (naar rechts, rgba (75, 123, 211, 0.5), rgba (22, 215, 177, 0.3)), url (https: //bg.jpg);
Dit is het resultaat:
Het hebben van een verloop op tekst is een groot effect, hoewel niet volledig ondersteund in een zuivere betekenis. In plaats daarvan vertrouwen we op de background-clip eigenschap (en zijn voorafgegaan -webkit-background-clip vriend), wat een hack is maar heel goed werkt.
We beginnen met een stuk tekst (een h1 in dit geval) en breng een verloop op zijn achtergrond. De background-clip eigendom, gegeven een waarde van tekst, verwijdert vervolgens de achtergrond uit het hele blok, behalve het gebied achter de tekst. De tekst kleur verdoezelt de achtergrond natuurlijk, dus we maken het transparant om het verloop door te laten schijnen:
h1 achtergrondafbeelding: lineair verloop (naar rechts, # 0cebeb, # 20e3b2, # 29ffc6); -webkit-achtergrond-clip: tekst; achtergrond-clip: tekst; kleur: transparant;
Grensgradiënten zijn iets dat je misschien op Envato Elements hebt gezien en ze zijn een geweldige manier om je gebruikersinterface visueel aantrekkelijker te maken. Het is subtiel gedaan, maar bekijk de blauw-naar-paarse lineaire gradiënt op de randen van deze knoppen:
Om dit effect te bereiken, zijn er een aantal benaderingen. De eerste vertrouwt erop dat we eerst een element (een anker, een container, wat dan ook) een transparante rand geven. Vervolgens passen we ons verloop toe met behulp van de border-image eigendom. Eindelijk, we gaan zitten border-image-slice tot 1, zodat het verloop de volledige omtrek van de rand gebruikt.
.card1 border: 5px solid transparent; border-image: lineair verloop (naar beneden, # 22c1c3, # fdbb2d); border-image-slice: 1;
Dit is het resultaat:
Er zijn echter een aantal problemen met deze aanpak. ten eerste, border-image wordt niet universeel ondersteund in alle browsers, met name oudere versies van IE. Ten tweede kunt u met deze aanpak niet toevoegen border-radius zoals je ziet in de gebruikersinterface van Envato Elements. Laten we dus eens kijken naar een alternatieve aanpak.
We beginnen met het geven van onze div een positie: relatief. We voegen er vervolgens een pseudo-element aan toe, en geven dat een negatief absolute positie van wat we ook kozen voor onze grensbreedte (5px in dit geval):
.card2 :: after content: "; position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px;
Dit geeft ons een solide verloopblok dat het geheel van onze div bedekt. Een toevoegen z-index van -1 zorgt ervoor dat het verloopblok zich achter de div verplaatst.
Volgende (pfff, er zijn veel stappen voor deze) we voegen een toe border-radius naar het pseudo-element gelijk aan dat van zijn ouder (laten we 10px toepassen). En dan geven we de ouder een achtergrond van wat we willen; hetzelfde als de pagina-achtergrond maakt het transparant.
Eindelijk wenden we ons opnieuw tot onze vriend background-clip, het toepassen op de ouder en deze keer het een waarde geven van padding-box. Deze laatste actie zorgt ervoor dat de vulling van de div naar de rand van de rand loopt en niet verder.
Dus deze laatste benadering is eigenlijk geen grens in de ware zin, maar bereikt het effect waarnaar we op zoek zijn.
Een derde benadering is mogelijk, deze keer met gebruiken box-shadow om het effect te bereiken. Ik raad u aan Border Grensein mixin van John Grishin over CodePen te bekijken om te zien hoe dit werkt.
Daar ga je dan! Deze primer op CSS-gradiënten heeft u het begin gegeven dat u nodig hebt, plus een blik op hoe u gradiënten op het web kunt gebruiken. Als je andere creatieve gebruiken van verlopen in het wild hebt gezien, kun je deze laten vallen in het gedeelte Opmerkingen.
Accentsconagua