Logowanie

Płynna zmiana koloru wypełnienia ikony

pytanie zadane 6 czerwca 2019 w HTML i CSS przez Moras Obywatel (1,620 p.)

Cześć w jaki sposób mogę zrealizować płynne wypełnienie się ikony (np. serduszka symbolizującego dodanie czegoś do ulubionych) po najechaniu i po kliknięciu? Czy da się to zrealizować w samym css?

1	komentarz 7 czerwca 2019 przez rafal.budzis Szeryf (85,340 p.) W css jest właściwość transition ;-) myśle że tego potrzebujesz.

3 odpowiedzi

odpowiedź 7 czerwca 2019 przez thryndl Nałogowiec (30,470 p.)
wybrane 7 czerwca 2019 przez Moras

odpowiedź 6 czerwca 2019 przez kalczur Gaduła (4,320 p.)

Coś takiego?

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>a</title>

<style>
	
	#try{
		cursor: pointer;
		font-size: 60px;
		color: red;
	}
	#try:hover{
		color: blue;
	}
	#try:active{
		color: green;
	}	
</style>

</head>
<body>

<span id="try"> &#x2764; </span>

</body>
</html>

komentarz 7 czerwca 2019 przez Moras Obywatel (1,620 p.)

o właśnie coś takiego tylko, żeby się ten symbol płynnie zmieniał kolor jak na tej stronie po najechaniu https://www.toptal.com/designers/htmlarrows/symbols/

Oraz, żeby po kliknięciu pozostawał taki kolor jak po najechaniu, ale to myślę, że uda mi się zrobić w jquery.

komentarz 7 czerwca 2019 przez kalczur Gaduła (4,320 p.)

wystarczy dodać transition i zamienić active na focus

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>a</title>

<style>
	
#try{
	cursor: pointer;
	font-size: 60px;
	color: red;
	outline:none;
}
    
#try:hover{
	color: blue;
	transition: all 0.25s ease-in;
}
#try:focus{
	color: green;
	transition: color 0.5s ease;
}
</style>

</head>
<body>

 <span id="try" tabindex="0"> &#x2764; </span>

</body>
</html>

odpowiedź 7 czerwca 2019 przez dawid6512 Gaduła (4,550 p.)

Podobne pytania

+1 głos

1 odpowiedź 214 wizyt

Dwie różne ikony do tego samego programu?

pytanie zadane 9 marca 2018 w C i C++ przez Hiskiel Pasjonat (22,830 p.)

+1 głos

3 odpowiedzi 860 wizyt

Jak zmienić kolor ikony używanej jako slider-thumb (CSS)

pytanie zadane 20 stycznia 2021 w HTML i CSS przez Mlorism Użytkownik (580 p.)

0 głosów

1 odpowiedź 623 wizyt

Ustawienie ikony wewnątrz search inputa

pytanie zadane 12 września 2019 w HTML i CSS przez MAXIM7 Obywatel (1,990 p.)

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...

Płynna zmiana koloru wypełnienia ikony

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

3 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci