Share
I denne opplæringen lærer du om bruk av gradienter på nettet. Jeg vil gi deg noen eksempler, noen øvelser (for eksempel hvordan du lager gradienter til grenser), og jeg vil også kaste inn noen nyttige ressurser som vil gjøre å skape gradienter mye lettere.
I dagene var det ikke veldig mulig å bruke gradienter uten å stole på bilder, men utviklingen i CSS betyr at det nå er enkelt og pålitelig å skape gradienter fra våre stilark.
I sin enkleste form definerer vi gradienter som bakgrunnsbilder. Vi setter bakgrunnsbildet (bare ved bruk av stenografi bakgrunn er helt greit) som enten a lineær-gradient eller a radial-gradient, så passerer vi i start- og sluttfargene:
.boks bakgrunn: lineær gradient (# 000046, # 1cb5e0);
Som standard går en lineær gradient fra topp til bunn, noe som gir oss noe slikt:
Vi kan endre retningen ved å legge til en ny parameter før fargene, for eksempel:
.boks bakgrunn: lineær gradient (til høyre, # 000046, # 1cb5e0);
Likeledes, endre denne parameteren for å lese øverst til høyre ville skape en diagonal gradient. Du kan gjøre det diagonalt nøyaktig også, ved å spesifisere noe som 45deg (eller hvilken vinkel du velger).
Å ta ting et skritt videre, trenger du ikke å stoppe med bare to farger. Og du kan også bruke farge navn, slik:
.boks bakgrunn: lineær gradient (til høyre, oransje, # ec38bc, # 7303c0, cyan);
I dette tilfellet vil hver av de fire farger okkupert like stor plass som tilgjengelig, noe som gir oss en jevn, balansert gradient.
Hvis vi ikke ønsker jevn fordeling, men vil ha en farge til å oppta mer plass enn en annen, kan vi spesifisere den verdien som en prosentandel direkte etter fargen slik:
.boks bakgrunn: lineær gradient (til høyre, # f05053 80%, # e1eec3);
Gir oss:
Fortsett, vi kan bruke alt vi har lært så langt og endre det til å vise radial gradienter i stedet. Bytter ut lineær-gradient til radial-gradient er alt du trenger å gjøre her.
.boks bakgrunn: radial-gradient (# fdbb2d, # 22c1c3);
Denne radiale gradienten strekker seg til dens overordnede element, så dette rektangel ender med en ellipse-lignende gradient. For å begrense den gradienten slik at den forblir en sirkel uavhengig av foreldrenes proporsjoner, kan vi legge til sirkel søkeord slik:
.boks bakgrunn: radial-gradient (sirkel, # fdbb2d, # 22c1c3);
Når vi går videre, kan vi også angi kilden til sirkelgradienten, slik at den begynner (for eksempel) øverst til venstre for foreldrene.
.boks bakgrunn: radial-gradient (sirkel øverst til venstre, # fdbb2d, # 22c1c3);
Effekten er subtil, men forskjellen mellom dette og en enkel lineær gradient kan være akkurat det du leter etter.
Hvor kan vi bruke gradienter på noen interessante måter?
Her er et eksempel på et overlegg, hvor gradienten er litt gjennomsiktig (den bruker RGBA verdier) og sitter på et bilde.
De bakgrunn Egenskapen kan akseptere flere verdier som danner en stabel, den første er den øverste og den siste finner seg på bunnen av haugen. Hvis vi definerer en gradient først, vil den sitte på toppen av det vi definerer etterpå. Ta en titt på denne brikken og se om du kan finne ut hva som skjer:
.helten (bakgrunn: lineær gradient (til høyre, rgba (75, 123, 211, 0,5), rgba (22, 215, 177, 0,3)), url (https: //bg.jpg);
Her er den resulterende effekten:
Å ha en gradient på tekst er en god effekt, men ikke helt støttet i ren forstand. I stedet stoler vi på bakgrunn klype eiendom (og dens prefiks -webkit-bakgrunn klemme venn), som er noe av en hack men fungerer veldig pent.
Vi begynner med et stykke tekst (en h1 i dette tilfellet) og bruk en gradient til dens bakgrunn. De bakgrunn klype eiendom, gitt en verdi på tekst, Fjerner deretter bakgrunnen fra hele blokken, bortsett fra området bak teksten. Teksten farge skjuler bakgrunnen selvsagt, så vi gjør det gjennomsiktig for å la gradienten skinne gjennom:
h1 bakgrunnsbilde: lineær gradient (til høyre, # 0cebeb, # 20e3b2, # 29ffc6); -webkit-bakgrunnsbilder: tekst; bakgrunnsbilder: tekst; farge: gjennomsiktig;
Bordergradienter er noe du kanskje har sett på Envato Elements, og de er en fin måte å visuelt krydre på brukergrensesnittet ditt. Det er subtilt gjort, men ta en titt på den blå-til-lilla lineære gradienten på disse knappernes grenser:
For å oppnå denne effekten er det et par tilnærminger. Den første stoler på oss først å gi et element (et anker, en beholder, uansett) en gjennomsiktig ramme. Vi bruker deretter vår gradient ved hjelp av border-image eiendom. Til slutt setter vi border-image-slice til 1, slik at gradienten bruker hele oversikten over grensen.
.card1 border: 5px solid transparent; border-image: lineær gradient (til bunn, # 22c1c3, # fdbb2d); border-image-skive: 1;
Her er resultatet:
Det er imidlertid et par problemer med denne tilnærmingen. for det første, border-image støttes ikke universelt i alle nettlesere, særlig eldre versjoner av IE. For det andre vil denne tilnærmingen ikke tillate deg å legge til border-radius som du ser i Envato Elements UI. Så la oss se på en alternativ tilnærming.
Vi begynner med å gi vår div a stilling: relativ. Vi legger da et pseudo-element til det, og gir det a negativ absolutt posisjon av det vi valgte vår grensebredde å være (5px i dette tilfellet):
.card2 :: etter innhold: "; posisjon: absolutt; topp: -5px; bunn: -5px; venstre: -5px; høyre: -5px;
Dette vil gi oss en solid gradient blokk som dekker hele vår div. Legge til en z-indeks av -1 vil sikre at gradientblokken beveger seg til bak div.
Neste (hei, det er mange trinn for denne), legger vi til en border-radius til pseudo-elementet som er dets forelder (la oss bruke 10px hver). Og så gir vi foreldrene en bakgrunn av hva vi vil; Det samme som sidebakgrunnen vil få det til å virke gjennomsiktig.
Til slutt vender vi igjen til vår venn bakgrunn klype, bruke den til foreldrene og denne gangen gir den en verdi av padding-box. Denne siste tiltak sørger for at divens fylling løper til kanten av grensen og ikke lenger.
Så denne siste tilnærmingen er egentlig ikke en grense i sann forstand, men det oppnår effekten vi leter etter.
En tredje tilnærming er mulig, denne gangen bruker box-shadow for å oppnå effekten. Jeg anbefaler at du tar en titt på Border-gradient mixin av John Grishin på CodePen for å se hvordan dette fungerer.
Så der går du! Denne primeren på CSS-gradienter har gitt deg den starten du trenger, pluss en titt på hvordan du kan bruke gradienter på nettet. Hvis du har sett noen andre kreative bruksområder av gradienter ute i naturen, vennligst slipp dem i kommentarfeltet.
Accentsconagua