• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak pokazać obrazek w skali szarości tylko z użyciem CSS i przywrócić mu kolory po najechaniu kursorem?

VPS Starter Arubacloud
+4 głosów
3,033 wizyt
pytanie zadane 3 kwietnia 2015 w HTML i CSS przez MarekT Początkujący (400 p.)
No właśnie - wiadomo, że można przygotować dwie wersje grafiki, ale czy efekt "wyszarzenia" (utraty koloru) można uzyskać w samym CSS? Najlepiej żeby obraz w skali szarości po najechaniu na niego kursora myszy odzyskał kolory (taki efekt przyda mi się na blogu). Jakieś pomysły? :)

4 odpowiedzi

+6 głosów
odpowiedź 4 kwietnia 2015 przez Blu33 Użytkownik (780 p.)

http://designshack.net/articles/css/joshuajohnson-2/

 

tutaj masz pożądany efekt pod nazwą B&W

komentarz 4 kwietnia 2015 przez MarekT Początkujący (400 p.)
Dzięki za linka!
+3 głosów
odpowiedź 4 kwietnia 2015 przez niezalogowany

Pokombinowałem w CSS3 przy użyciu przejścia (transition)

Chodzi Ci o taki efekt?

http://jsfiddle.net/peyaLnjj/

#kwadrat
{
    width: 100px;
    height: 100px;
    background-color: grey;
    -webkit-transition: .2s ease-in; //wsparcie dla chrome
    -moz-transition: .2s ease-in; //wsparcie dla mozilli 
    -o-transition: .2s ease-in; //wsparcie dla opery
    transition: .2s ease-in;
             //  ^--wybierasz czas trwania animacji, dalej to jaki efekt szybkości chcesz uzyskać
            // http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_speed
}

#kwadrat:hover
{
    background: blue;
}
+2 głosów
odpowiedź 4 kwietnia 2015 przez Virzen Użytkownik (760 p.)

Pożądany efekt można uzyskać dzięki atrybutowi CSS filter.

Przykład:

img {
	-webkit-filter: grayscale(1);
		    filter: grayscale(1);
}

img:hover {
	-webkit-filter: grayscale(0);
		    filter: grayscale(0);
}

 

0 głosów
odpowiedź 4 kwietnia 2015 przez Wilczu Mądrala (5,190 p.)
A tego nie robi się w java script ?

http://stackoverflow.com/questions/10709016/change-image-onmouseover

Pozdrawiam :)

Podobne pytania

0 głosów
2 odpowiedzi 201 wizyt
0 głosów
1 odpowiedź 303 wizyt
0 głosów
2 odpowiedzi 1,460 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

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!

...