| Autor | Zpráva | ||
|---|---|---|---|
| Tedd Profil * |
#1 · Zasláno: 19. 7. 2011, 18:32:06
Zdravim. Dá se nějak v CSS docílit efektu v image galerii, že je obrázek (zmenšenina) černobílá a při hoveru se ta samá zmenšenina hodí do vícebarevného režimu ? Vím, že by to šlo pomocí backround-image, ale bude-li více obrázků vedle sebe, pak pro každy budu muset definovat samostatný div, kde bude nejdříve černobílá verze a následný hover efekt, kde už bude jako pozadí verze barevná...
Nedá se to nějak zjednodušit ? Děkuji |
||
| Bubák Profil |
#2 · Zasláno: 19. 7. 2011, 18:46:18
Samostatný DIV tam mít nemusíš, jde využít jakýkoliv element a ve tvém případě se přímo nabízí využít element A, odkaz.
V IE jde jednoduše využít filter: gray, pro ostatní moderní prohlížeče CANVAS (nevím jak), problém by byly starší verze ne-IE prohlížečů, protože CANVAS neumí. |
||
| Tedd Profil * |
#3 · Zasláno: 19. 7. 2011, 18:49:05
aha... a nepomohli byste mi prosím někdo s kódem ? CANVAS jsem v životě neviděl...
|
||
| Dero Profil |
#4 · Zasláno: 19. 7. 2011, 18:57:27 · Upravil/a: Dero
Tedd: Zjednodušit se to nedá. Vytváření černobílé verzi přes canvas je pomalé.
Pokud tě zajímá konkrétní implementace, můžeš se inspirovat zde: http://james.padolsey.com/demos/grayscale/ Možnou cestou by mohlo být použití desaturace přes SVG: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html (nevím ale, zda se chytnou všechny soudobé prohlížeče) |
||
| joe Profil |
#5 · Zasláno: 19. 7. 2011, 19:09:59
Podívej se sem, moc rychlé to nebude, ale že by to bylo tak hrozné, že by se to nedalo použít, to se mi taky nezdá.
|
||
| Str4wberry Profil |
#6 · Zasláno: 19. 7. 2011, 19:36:10
Pokud by vadila pomalost, tak lze lehce podobného efektu docílit průhledností a černou barvou na pozadí.
|
||
| Bubák Profil |
#7 · Zasláno: 19. 7. 2011, 20:26:55
joe:
„Podívej se sem, moc rychlé to nebude“ Tam se záměrně mění saturace plynule a pomalu, nikoliv skokově a změnit časy jde jednoduše v kódu. |
||
| joe Profil |
#8 · Zasláno: 19. 7. 2011, 20:35:18
Bubák:
Plynule se to mění jen pro hezčí efekt. Kdybys prozkoumal tak rychle, jako když píšeš, všimnul by sis, že tam dochází ke klonování původního obrázku, původní obrázek je převeden na černobílý a na ten klonovaný se používá klasická animace fade z jQuery. Takže pro skokovou změnu by bylo lepší upravit CSS než změnit nějaké číslo v kódu... |
||
|
Časová prodleva: 13 let
|
|||
0