Gradient Borders - CSS

Å bruke intuitive farger i webdesign kan hjelpe deg med å trekke brukerens oppmerksomhet. Ulike fargemetoder kan brukes i webapplikasjoner. Gradientfarger er betydningsfulle og attraktive fordi de kombinerer flere farger for å produsere flere fargetoner. Det er ingen spesielle CSS -egenskaper for å legge til gradientgrenser rundt elementet. Noen andre egenskaper hjelper oss imidlertid i denne sammenhengen.

Dette innlegget vil beskrive hvordan du bruker gradientgrenser i CSS.

Hvordan bruke gradientgrenser i CSS?

Vi har listet opp metodene for å anvende gradientgrensene rundt HTML -elementet:

• Metode 1: Legg til gradient kant rundt elementet ved bruk av CSS “grensebilde”Eiendom
• Metode 2: Legg til gradient kant rundt elementet ved bruk av CSS “polstring”Eiendom

La oss først lage en HTML-side før du hopper inn i de ovennevnte metodene.

Forutsetning

Følg instruksjonene for å opprette en HTML -side:

• Legg til en "”Element og tilordne det en klasse”hoved-”.
• Inne i dette elementet, legg til et annet “” element for å plassere et bilde. Sett klassen sin som "bilde”. Dette DIV -elementet inneholder "”Tag med“ SRC ”,“ ALT ”og“ Bredde ”attributter.
• “src”Attributt spesifiserer nettadressen til bildet.
• “alt”Attributt definerer en tekst som vises på skjermen hvis bildet ikke kan laste.
• “bredde”Bestemmer bildets bredde.

Her er HTML -koden:

La oss bruke litt CSS -styling på HTML -siden.

Stil “” element

Div -elementet som har klasse “hoved-”Er stylet med følgende CSS -egenskaper:

.hoved
Bredde: 350px;
Høyde: 230px;
Display: Flex;
Justify-Content: Center;
Align-elementer: sentrum;
Margin: Auto;

Beskrivelsen av den ovennevnte koden er listet opp nedenfor:

• “bredde”Justerer elementets bredde.
• “høyde”Bestemmer elementets høyde.
• “vise”Eiendom definerer skjermatferden til elementet. Verdien "Flex”Gjør elementoppsettet fleksibelt.
• “Justify-Content”Eiendom justerer de fleksible gjenstandene horisontalt.
• “Align-elementer”Justerer de fleksible varene vertikalt.
• “margin”Legger til plass rundt elementet.

Det kan observeres at bildet er vellykket justert til websiden:

Metode 1: Legg til gradientgrense rundt elementet ved bruk av CSS “Border-Image” -egenskaper

Nå, i det pågående eksemplet, CSS “grensebilde”Eiendom brukes til å generere gradienter. I CSS, legg til følgende egenskaper til Div som har klasse ".hoved-”:

Grense: 5px fast gjennomsiktig;
Border-Image: Linear-gradient (40deg, RGB (19, 29, 163), RGB (138, 211, 253)) 1;

Nedenfor er forklaringen på de ovennevnte egenskapene:

• “grense”Er en kortvarig eiendom som bruker en grense rundt elementet ved å spesifisere bredden, stilen og fargen på grensen.
• “grensebilde”Tildeles verdien”Lineær-gradient ()”Funksjon, som skaper et bilde med flere farger som utvikler seg i en bestemt retning. Denne funksjonen har noen parametere. Den første verdien representerer "vinkel”Som gradienten vil vippe til, er start og slutt på gradienten spesifisert av de to“farge”Verdier. Til slutt er opaciteten definert.

Bildet nedenfor viser at gradientgrensen har blitt brukt med suksess rundt bildet:

Metode 2: Legg til gradientkanten rundt elementet ved bruk av CSS “polstring” -egenskap

For å legge til gradientelementet, er de to CSS -egenskapene som er viktigere oppført nedenfor:

• “hoved-”Div er stylet med“bakgrunn”Eiendom med verdien tildelt som en“Lineær-gradient ()”Funksjon.
• Div containeren har en “bilde”Klasse tildeles“polstring”Eiendom for å produsere plass rundt“”Element. Dette vil gjøre det lettere å se gradientbakgrunnen til “hoved-”Klasse av div som bildegrensen.

La oss implementere disse to punktene.

Stil “Main” -klasse

.hoved
Bredde: 380px;
Bakgrunn: Lineær-gradient (til høyre, RGB (17, 17, 17), RGB (184, 178, 178), RGBA (141, 19, 86, 0.857));
Margin: Auto;
Display: Flex;
Justify-Content: Center;
Align-elementer: sentrum;

“.hoved-”Brukes for å få tilgang til DIV -elementet med klasse”hoved-”. Følgende egenskaper brukes på det:

• “bakgrunn”Eiendom tildeles en" lineær-gradient () "-funksjon som en verdi. Den har flere parametere. Den første verdien representerer gradientretningen. De tre andre parametrene representerer gradientfargene.

Stil “image” div

.bilde
polstring: 10px;

CSS “polstring”Eiendom brukes på DIV -containeren som har klasse”bilde”. Denne eiendommen vil produsere plass rundt innholdet. I vårt tilfelle har vi innebygd bildet.

Gradientgrensen rundt bildet vises i utgangen nedenfor:

Vi har lært metodene for å anvende gradientgrenser rundt elementene ved hjelp av CSS.

Konklusjon

I CSS, “grensebilde”Eiendom med verdien tildelt som“Lineær-gradient ()”Funksjon brukes til å legge til gradientgrenser rundt elementet. CSS “polstring”Eiendom kan også være nyttig for å representere gradientbakgrunnen som en grense til innholdet. I dette innlegget har vi demonstrert hvordan vi bruker gradientgrenser rundt elementene ved hjelp av CSS.