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,260 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ź 198 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 698 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ź 581 wizyt

Ustawienie ikony wewnątrz search inputa

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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...

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