Obraz w skali szarości z CSS i ponownym kolorem po najechaniu myszą?
86
Chcę wziąć ikonę, która jest kolorowa (i będzie linkiem) i obrócić ją w skali szarości, aż użytkownik umieści kursor myszy nad ikoną (gdzie następnie pokoloruje obraz).
Czy jest to możliwe iw sposób obsługiwany przez przeglądarki IE i Firefox?
czy nie byłby to ciekawszy efekt, gdybyś zrobił to na odwrót? czy kursor myszy będzie czymś w rodzaju magicznej różdżki, która wnosi kolor do mrocznego świata?
X10D
Odpowiedzi:
242
Istnieje wiele metod osiągnięcia tego celu, które szczegółowo opiszę na kilku przykładach poniżej.
Czysty CSS (przy użyciu tylko jednego kolorowego obrazu)
Czysty CSS (używając skali szarości i kolorowych obrazów)
Takie podejście wymaga dwóch kopii obrazu: jednej w skali szarości, a drugiej w pełnym kolorze. Używając :hoverpsuedoselectora CSS , możesz zaktualizować tło elementu, aby przełączać się między nimi:
Można to również osiągnąć, używając hover()w ten sam sposób efektu kursora opartego na JavaScript, takiego jak funkcja jQuery .
Rozważ bibliotekę innej firmy
Desaturate biblioteka jest wspólna biblioteka, która pozwala na łatwe przełączanie między wersji pełnej skali szarości i kolorze wersji danego elementu lub obrazu.
Nie musisz nawet używać dwóch obrazów, które brzmią jak ból lub biblioteka do manipulacji obrazami, możesz to zrobić z obsługą wielu przeglądarek (aktualne wersje) i po prostu użyj CSS. Jest to metoda stopniowego ulepszania, która po prostu wraca do wersji kolorystycznych w starszych przeglądarkach:
Działa świetnie w przeglądarkach webkit! Twój kod nie działa u mnie w przeglądarce Firefox, ale z drugiej strony myślę, że ma to coś wspólnego z plikiem SVG i używam bitmapy w tym skrzypcach jsfiddle.net/coolwebs/num04rya/10 Coś dziwnego - przejście Efekt w Safari sprawia, że obraz „szarpie” przy kumulacji…
Ryan Coolwebs
0
Możesz użyć duszka, który ma zapisane w nim obie wersje - kolorową i monochromatyczną.
Odpowiedzi:
Istnieje wiele metod osiągnięcia tego celu, które szczegółowo opiszę na kilku przykładach poniżej.
Czysty CSS (przy użyciu tylko jednego kolorowego obrazu)
img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ } img.grayscale:hover { filter: none; -webkit-filter: grayscale(0%); }
Pokaż fragment kodu
img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ -webkit-backface-visibility: hidden; /* Fix for transition flickering */ } img.grayscale:hover { filter: none; -webkit-filter: grayscale(0%); } svg { background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg); } svg image { transition: all .6s ease; } svg image:hover { opacity: 0; }
<p>Firefox, Chrome, Safari, IE6-9</p> <img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" width="400"> <p>IE10 with inline SVG</p> <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377"> <defs> <filter id="filtersPicture"> <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" /> <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" /> </filter> </defs> <image filter="url("#filtersPicture")" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" /> </svg>
Możesz znaleźć artykuł dotyczący tej techniki tutaj .
Czysty CSS (używając skali szarości i kolorowych obrazów)
Takie podejście wymaga dwóch kopii obrazu: jednej w skali szarości, a drugiej w pełnym kolorze. Używając
:hover
psuedoselectora CSS , możesz zaktualizować tło elementu, aby przełączać się między nimi:#yourimage { background: url(../grayscale-image.png); } #yourImage:hover { background: url(../color-image.png}; }
Pokaż fragment kodu
#google { background: url('http://www.google.com/logos/keystroke10-hp.png'); height: 95px; width: 275px; display: block; /* Optional for a gradual animation effect */ transition: 0.5s; } #google:hover { background: url('https://graphics217b.files.wordpress.com/2011/02/logo1w.png'); }
<a id='google' href='http://www.google.com'></a>
Można to również osiągnąć, używając
hover()
w ten sam sposób efektu kursora opartego na JavaScript, takiego jak funkcja jQuery .Rozważ bibliotekę innej firmy
Desaturate biblioteka jest wspólna biblioteka, która pozwala na łatwe przełączanie między wersji pełnej skali szarości i kolorze wersji danego elementu lub obrazu.
źródło
Odpowiedział tutaj: Konwertuj obraz do skali szarości w HTML / CSS
Nie musisz nawet używać dwóch obrazów, które brzmią jak ból lub biblioteka do manipulacji obrazami, możesz to zrobić z obsługą wielu przeglądarek (aktualne wersje) i po prostu użyj CSS. Jest to metoda stopniowego ulepszania, która po prostu wraca do wersji kolorystycznych w starszych przeglądarkach:
img { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ } img:hover { filter: none; -webkit-filter: none; }
i filter.svg w ten sposób:
<svg xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" /> </filter> </svg>
źródło
Używam następującego kodu na http://www.diagnomics.com/
Płynne przejście od cz / b do koloru z efektem powiększenia (skala)
img.color_flip { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE5+ */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ -webkit-transition: all .5s ease-in-out; } img.color_flip:hover { filter: none; -webkit-filter: grayscale(0); -webkit-transform: scale(1.1); }
źródło
Możesz użyć duszka, który ma zapisane w nim obie wersje - kolorową i monochromatyczną.
źródło
Oto demo. Działa nawet w IE7:
http://james.padolsey.com/demos/grayscale/
i
http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/
źródło