Grenseegenskapen i CSS lar webdesignere spesifisere stilen, bredden og fargen på kantene til et element.
I CSS lar en gradient en designer bruke en jevn overgang mellom to eller flere farger. Du kan bruke gradienter til å lage visuelle effekter som skyggelegging, fargeblanding og tekstur på elementene på nettsiden din.
Border gradient er en CSS-egenskap som lar utviklere bruke en gradient til et elements kantlinje.
En gradientkant skaper en visuell effekt der kantfargen endres fra en farge til en annen.
Innholdsfortegnelse
Hvorfor bruke en gradientkant?
Border gradienter var blant de forskjellige stylingfunksjonene som ble introdusert i CSS3. Dette er noen av grunnene til at du bør ha det på din neste nettapp:
- En kantlinjegradient er fleksibel: Du kan lage komplekse og lagdelte effekter ved å bruke gradientkanter. Dette er i motsetning til ensfargede kanter, som er stive. Gradientkanter er derfor nyttige når du arbeider med komplekse oppsett eller former som krever nyanserte visuelle design.
- Skap visuell appell: Ved å bruke gradientkanteffekten kan du legge til iøynefallende visuelle effekter til designene dine. Du kan for eksempel bruke dristige fargekontraster for å trekke oppmerksomheten til et bestemt element på nettsiden din.
- Gi sømløs integrasjon: Gradientkanter lar deg sømløst integrere kantlinjen i elementets bakgrunn. En slik tilnærming gir nettsiden din et solid og sammenhengende utseende, som viser et gjennomtenkt design.
Hvordan legge til Border Gradient i CSS
Før vi demonstrerer hvordan du legger til en kantlinjegradient, kan vi illustrere hvordan du legger til en kantlinje til et HTML-element.
Vi kan bruke denne koden;
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> <title>Document</title> </head> <body> <div class="box contains-border"> How to add a Border illustrated!!! </div> </body> </html>
CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}
Den gjengitte siden vil vises som:
Selv om koden ovenfor har en kantlinje, er den ikke så attraktiv for øynene da den er tom. Vi har bare en 5px solid Rebecca lilla kant rundt vår div.
Vi kan gjøre grensen vår tiltalende ved å bruke grensegradienter. Det finnes forskjellige tilnærminger for å legge til en kantlinjegradient. Følgende er noen av de viktigste:
Bruke gradientkanter (lineær gradient, radial gradient, konisk gradient)
Vi vil illustrere hvordan du bruker Gradient Borders på tre forskjellige måter:
Lineær gradient
En lineær gradient skaper en jevn overgang mellom to eller flere farger i en rett linje. Vi kan bruke følgende kode for å demonstrere:
HTML
<!DOCTYPE html> <html> <head> <title>Linear Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box linear-gradient"> Linear Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.linear-gradient {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}
Vi har spesifisert kantstilen som solid, noe som betyr at kanten rundt boksen vår er en hel linje. Kantbredden på koden vår er 10px.
Den lineære gradienten starter med rgb(143, 55, 0)» og slutter med «rgb(66, 228, 250)». Vi har også spesifisert en 45 graders vinkel. Bredden på kantbildesnittet er satt til «1».
Den gjengitte siden vil vises som:
Radiell gradient
En radiell gradient skaper en sirkulær gradient som stråler ut fra et sentralt punkt, slik at brukere kan gå over fra en farge til en annen i en nettsides element.
Vi kan illustrere hvordan du legger til en radiell gradient ved å bruke denne koden:
HTML
<!DOCTYPE html> <html> <head> <title>Radial Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box radial-gradient"> Radial Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.radial-gradient {
border-style: solid;
border-width: 5px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}
Vi har satt grensestilen til elementet vårt som solid. Vi har også gitt vår kant en kantbredde på 5px.
Den radielle gradienten starter med mørkegrønn RGB(0,143,104) og slutter med lys gul, angitt med rgb(250,224,66).
«1» på slutten av koden representerer egenskapen border-image-repeat. Denne verdien instruerer nettleseren til å gjenta kantbildet bare én gang rundt elementets kantlinje.
Den gjengitte siden vil vises som:
Konisk gradient
En konisk gradient skaper en sirkulær fargeovergang. I denne effekten starter overgangen fra et sentralt punkt og sprer seg deretter utover, og danner en sirkulær effekt.
HTML
<!DOCTYPE html> <html> <head> <title>Conic Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box conic-gradient"> Conic Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.conic-gradient {
border-style: solid;
border-width: 7.5px;
border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}
I denne koden setter vi kantstilen som solid og gir kantlinjen en bredde på 7,5 px. Border-image-egenskapen setter kantlinjegradienten. Det er syv farger, som starter med rød og slutter med rgb(255, 0, 38).
Figur «1» på slutten av koden gir kantbredden på 1 piksel.
Den gjengitte siden vil vises som:
Bruke kantbilder
Kantbilder erstatter standard helkanter til HTML-elementer. Kantbilder brukes til å lage komplekse design i stedet for å kombinere farger for å lage en kantlinjegradient.
HTML
<!DOCTYPE html> <html> <head> <title>Border Images Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box border-images"> Border Images Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.border-images {
border-style: solid;
border-width: 15px;
border-image-source: url(/images/elephant-2910293_1920.jpg);
border-image-slice: 60 30;
}
Vi har gitt border-width-egenskapen vår en bredde på 15px og satt kant-stilen som solid.
Border-image-slice setter bredden og høyden på kantboksen til henholdsvis 60 % og 30 %.
Den gjengitte siden vil vises som:
Bruker stenografi eiendom
En stenografi-egenskap lar utviklere style flere individuelle CSS-egenskaper ved å bruke én kodelinje. I dette tilfellet bruker vi border-image for å spesifisere kant-bilde-kilde og kant-bilde-slice.
HTML
<!DOCTYPE html> <html> <head> <title>Shorthand Property Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box shorthand"> Shorthand Property Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.shorthand {
border-style: solid;
border-width: 15px;
border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}
Den gjengitte siden vil vises som:
CSS-grensegradientgeneratorer
CSS-grensegradientgeneratorer hjelper utviklere med å legge til gradienteffekter på elementer på en nettside. Disse generatorene lar deg justere innstillingene, noe som betyr at du ikke trenger å lage alt fra bunnen av. Følgende er noen av verktøyene du kan bruke:
#1. CSS Gradient Generator-konverterende farger
Konvertering av farger lar deg generere lineær eller radiell gradient CSS-kode med opptil fem farger. CSS-gradientkoden du genererte kan brukes som et elements kantlinje eller bakgrunnsbilde.
Du kan gjøre følgende med denne generatoren;
- Velg opptil fem farger og bruk dem i kantlinjegradienten.
- Velg retningen på gradienten. Verktøyet har både lineære og radielle gradienter.
- Du kan bestemme hvordan overgangen av farger skal skje ved å bruke fargestoppfunksjonen.
Når du er ferdig med å eksperimentere og generere koden, kan du kopiere og bruke den på nettstedet ditt.
#2. CSS Border Gradient Generator-Ubrukt CSS
Unused-CSS hjelper utviklere med å generere gradientgrenser som de kan bruke på blokkelementer uten å lage pseudoelementer eller ekstraelementer.
Du kan gjøre følgende;
- Velg mellom ulike gradienttyper. Du kan enkelt bytte mellom radielle og lineære gradienter når du arbeider med dette verktøyet.
- Forhåndsvisning-fanen. Verktøyet lar deg forhåndsvise hvordan kantlinjegradienten vil vises på nettsiden din når du tilpasser den.
- Fargen stopper. Dette verktøyet gjør det enkelt å bestemme hvordan overganger skal skje for forskjellige farger.
- Tilpasning av kantstørrelse. Du kan enkelt tilpasse kantstørrelsen og kantradiusen med dette verktøyet.
Når du er fornøyd med den genererte koden, kan du kopiere og bruke den på prosjektet ditt.
#3. Gradient Border Generator- Amit Sheen
Dette verktøyet har åtte forskjellige bakgrunnsområder, som gjør det mulig for utviklere å lage avrundede gradientkanteffekter.
Du kan oppnå følgende;
- Lag gradientanimasjoner. Verktøyet lar deg generere gradientanimasjoner som går mellom to eller flere farger.
- Du kan inkludere JavaScript-kode. Hvis ditt tilpassbare element trenger JS-kode, kan du alltid finne og tilpasse det fra kontrollpanelet.
- Live forhåndsvisning. Du kan se endringene i koden din mens du tilpasser den.
Du kan kopiere og lime inn koden etter å ha tilpasset grensegradienteffektene etter eget ønske.
Konklusjon
Når du designer nettsidene dine, kan du bruke hvilken som helst av metodene ovenfor for å legge til en gradientkant til elementene dine. Valget av tilnærming kan variere basert på preferanser, ferdighetsnivå og arten av elementet du styler.
Du kan også bruke forskjellige tilnærminger for forskjellige elementer på samme nettside.
Sjekk ut hvordan du lager en dobbel kantlinje i CSS for å forbedre nettsidens visuelle appell.