Dynamicznie zmień kolor na jaśniejszy lub ciemniejszy według odsetka
Aby utrzymać interaktywność i atrakcyjność witryny, programiści często chcą zmienić kolory elementu po pewnym czasie. Mówiąc dokładniej, CSS pozwala programistom dynamicznie zmienić kolor. Działa w taki sposób, że ilość jest pomnożona między 0 a 1, aby kolor był ciemniejszy lub jaśniejszy. Co więcej, domyślna ciemność zostanie określona jako „1”, Który nie ma wpływu na kolor na wybrany element.
Ten post będzie pokazał:
- Jak dynamicznie zmieniać kolor na ciemniejszy według odsetka?
- Jak dynamicznie zmieniać kolor na zapalniejsze według odsetka?
Jak dynamicznie zmieniać kolor na ciemniejszy według odsetka?
W CSS wartość „filtr„Nieruchomość jest wykorzystywana do stosowania efektów. Ta właściwość wprowadza efekty graficzne o wysokiej rozdzielczości, takie jak kolor, odrobina rozmycia lub w pełni rozmycie w element. Mówiąc dokładniej, filtry są powszechnie używane do dostosowania renderowania
Aby dynamicznie zmienić kolor na ciemniejszy, ustawiając wartość „filtr„Nieruchomość w procentach, sprawdź poniżej podanie instrukcji.
Krok 1: Zrób pojemnik
Po pierwsze, zrób kontener DIV za pomocą „”Element, a także wstaw atrybut klasy o określonej nazwie zgodnie z Twoimi preferencjami.
Krok 2: Utwórz przycisk
Następnie skorzystaj z „„Element, aby utworzyć przycisk pomiędzy znacznikiem otwierania i zamykania Div:
Wyjście
Krok 3: Przycisk dostępu
Teraz użyj nazwy klasy z selektorem klasy „.przycisk„Aby uzyskać dostęp do przycisku.
Krok 4: Zastosuj właściwości CSS
Następnie zastosuj nieruchomości poniżej na liście:
.przycisk
Margines: 70px;
Szerokość: 60%;
granica: 3px solid #EC9C08;
Wyściółka: 10px;
Kolor: #FF0000;
kolor tła: RGB (140, 192, 240);
Font-Waight: 200;
Rozmiar czcionki: duży;
pogrubiona czcionka;
Tutaj:
- "margines„Własność jest wykorzystywana do określenia pustej przestrzeni poza granicą.
- "szerokość”Określa rozmiar elementu w poziomie.
- "granica”Definiuje granicę wokół elementu.
- "wyściółka”Służy do przydzielenia przestrzeni wewnątrz zdefiniowanej granicy.
- "kolor„Właściwość jest wykorzystywana do ustawiania koloru elementu.
- "kolor tła”Określa kolor tylnej części elementu w granicy.
- „„grubość czcionki„Wartość określa grubość czcionki.
- "rozmiar czcionki”Określa rozmiar czcionki jako duży.
- "czcionka”To krótka nieruchomość wykorzystywana do alokacji czcionki.
Wyjście
Krok 5: Zmień kolor na pełne ciemniejsze
Uzyskaj dostęp do przycisku z pseudoklasą zawisową. To pasuje, gdy użytkownik łączy element z mysią. Nie może go jednak zainicjować:
.Przycisk: Hover
Filtr: jasność (0%);
W powyższym fragmencie kodu „„filtr„Właściwość jest wykorzystywana do określenia wpływu na element. Tutaj ustawiliśmy „jasność (0%)„Aby ciemniejsz element.
Przy wartości 0% procent przycisków będzie ciemny, co ostatecznie ukrywa podpis:
Poradzić sobie z tą sytuacją, „filtr”Z wartością„(50%)”Zastosowano:
.Przycisk: Hover
Filtr: jasność (50%);
„„jasność (50%)”Pokazuje, że kolor zmienia pięćdziesiąt procent efektu.
Wyjście
Jak dynamicznie zmieniać kolor na zapalniejsze według odsetka?
Aby dynamicznie zmieniać kolor na zapalniczkę według procentowej, ustaw wartość „filtr„Nieruchomość większa niż 50%.
Na przykład ustawimy jasność wartości na „80%”:
.Przycisk: Hover
Filtr: jasność (80%);
Można zauważyć, że gdy użytkownik przesuwa kursor nad przyciskiem, kolor efektu nachylenia staje się lżejszy:
Jednak ustawienie „100%„Wartość jasności nie wpływa na kolor:
.Przycisk: Hover
Filtr: jasność (100%);
Wyjście
Nauczyliśmy cię o dynamicznie zmieniającym kolorze na podkreślsze lub ciemniejsze według odsetka.
Wniosek
Aby dynamicznie zmieniać kolor na jaśniejsze lub ciemniejsze z procentu, „filtr„Własność jest używana. Ta właściwość następnie wywołuje „jasność()”Funkcja stosowania efektu jasności. Możesz ustawić jego wartość w procentach od 0 do 100, gdzie niewielka wartość zmienia kolor na ciemność, a duża liczba sprawia, że jest lżejszy. Ponadto 100% to standardowa jasność, która nie dodaje wpływu na kolor. W tym artykule wyjaśniono procedurę dynamicznej zmiany koloru według odsetka.