Endre farge dynamisk til lysere eller mørkere med prosentandel

For å opprettholde interaktiviteten og attraktiviteten til nettstedet, ønsker utviklere ofte å endre elementets farger etter en tid. Mer spesifikt tillater CSS utviklere å endre fargen dynamisk. Det fungerer på en slik måte at en mengde multipliseres mellom 0 og 1 for å gjøre fargen mørkere eller lettere. Dessuten vil standardmørket bli oppgitt som "1”, Som ikke bruker noen fargeeffekt på det valgte elementet.

Dette innlegget vil demonstrere:

• Hvordan du dynamisk endrer farge til mørkere med prosentandel?
• Hvordan du dynamisk endrer farge til lysere etter prosentandel?

Hvordan du dynamisk endrer farge til mørkere med prosentandel?

I CSS, verdien av "filter”Eiendom brukes til å bruke effekter. Denne egenskapen setter inn grafiske effekter med høy oppløsning som farge, litt uskarphet eller full uskarphet i et element. Mer spesifikt brukes filtre ofte for å justere gjengivelsen

Å dynamisk endre farge til mørkere ved å sette verdien av “filter”Eiendom i prosent, sjekk ut de undergitte instruksjonene.

Trinn 1: Lag en beholder

Først av alt, lag Div -beholderen ved hjelp av “”Element og setter også inn et klasseattributt med et spesifikt navn i henhold til din preferanse.

Trinn 2: Opprett en knapp

Neste, bruk "”Element for å opprette en knapp mellom åpnings- og lukkekoden til Div:

Sende inn

Produksjon

Trinn 3: Tilgangsknapp

Bruk nå klassenavnet med klasselektoren ".knapp”For å få tilgang til knappen.

Trinn 4: Bruk CSS -egenskaper

Bruk deretter de nedenfor-børsnoterte egenskapene:

.knapp
Margin: 70px;
Bredde: 60%;
Grense: 3px Solid #EC9C08;
polstring: 10px;
Farge: #FF0000;
bakgrunnsfarge: RGB (140, 192, 240);
Font-vekt: 200;
Font-størrelse: stor;
Font: fet;

Her:

• “margin”Eiendom brukes til å spesifisere det tomme rommet utenfor grensen.
• “bredde”Angir elementstørrelsen horisontalt.
• “grense”Definerer en grense rundt elementet.
• “polstring”Brukes til å tildele plassen inne i den definerte grensen.
• “farge”Eiendom brukes til å sette fargen på elementet.
• “bakgrunnsfarge”Bestemmer en farge for baksiden av elementet i grensen.
• “Fontvekt”Verdien bestemmer tykkelsen på skriften.
• “skriftstørrelse”Angir størrelsen for skriften som stor.
• “Font”Er en kortvarig eiendom som brukes til å tildele skriften.

Produksjon

Trinn 5: Endre farge til full mørkere

Få tilgang til knappen med hover Pseudoklasse-eiendommen. Dette samsvarer når brukeren kobler et element med en mus. Imidlertid kan den ikke sette i gang det:

.Knapp: Hopp
Filter: lysstyrke (0%);

I ovennevnte kodebit, "filter”Eiendom brukes til å spesifisere effekten på elementet. Her har vi satt "Lysstyrke (0%)”For å mørkere elementet.

Med 0% prosentvis verdi vil knappfargen bli mørk, noe som til slutt skjuler bildeteksten:

Å håndtere denne situasjonen, “filter”Med verdien”(50%)" blir brukt:

.Knapp: Hopp
Filter: lysstyrke (50%);

“Lysstyrke (50%)”Viser fargen endrer femti prosent av effekten.

Produksjon

Hvordan du dynamisk endrer farge til lysere etter prosentandel?

For å dynamisk endre farge til lettere etter prosentandel, angi verdien av "filter”Eiendom større enn 50%.

For eksempel vil vi sette verdien lysstyrke til “80%”:

.Knapp: Hopp
Filter: lysstyrke (80%);

Det kan observeres at når brukeren beveger markøren over knappen, blir svevende effektfarge lettere:

Imidlertid å sette "100%”Lysstyrkeverdien påvirker ikke fargen:

.Knapp: Hopp
Filter: lysstyrke (100%);

Produksjon

Vi har lært deg om dynamisk skiftende farge til lysere eller mørkere med prosentandel.

Konklusjon

For å dynamisk endre farge til lysere eller mørkere med prosent, "filter”Eiendom brukes. Denne egenskapen påkaller da “lysstyrke ()”Funksjon for anvendelse av lysstyrkeffekten. Du kan sette verdien i prosent fra 0 til 100, der den lille verdien endrer fargen til mørk, og det store antallet gjør den lettere. Dessuten er 100% standard lysstyrke som ikke gir noen effekt på fargen. Denne artikkelen forklarte prosedyren for dynamisk å endre fargen etter prosentandel.