Prajem pekny den.
Mam taku otazocku do plena. Html / css. Mam klasicke menu kde su ikony. Bohuzial maju len jednu farbu a klient pozaduje aby sa menila len ta ikona na inu farbu po hover efekte. Ako hladam tak hladam nenasiel som riesenie a cele to prekreslovat sa mi naozaj nechce. Ma niekto skusenost ? Radu ?
Dá se to řešit pomocí filtrů, ale ve Firefoxu se to nechová dobře. Mrkni, jak jsem to řešil na https://www.linuxdays.cz/ vpravo na těch čtyřech ikonách DNSSEC, TLSA, IPv6 a SSL. Je tam řešení, které funguje v Chrome (filtr) i ve Firefoxu (překryvná SVG vrstva).
Musi sa farbit cela? nestacil by 1-2px okraj? Pripadne sprav ikonu priehladnou a men farbu pozadia. Alebo daj nejaky div pred to a men jeho farbu.
Něco takového?
http://www.jakpsatweb.cz/odkazy.html#menici
Je to (z mýho laickýho pohledu) nejlepší tak, jak naznačil X125. Doporučuju i Pixiho vylepšení (je taky popsaný v tom odkazu, je tam i vysvětleno proč).
Je to fakt jednoduchý jako facka a funkční ;-)
potvrzuju ze reseni co poslal X125 funguje i v Opera12, narozdil od LinuxDays kde zobrzuje vse uz rovnou barevne :)
Aby změn bylo co nejméně, tak aspoň napiš, zda ikony v menu máš jako <img>, nebo jako obrázky na pozadí, zpravidla to bývají obrázky na pozadí odkazu.
Takto vypadá nejjednodušší řešení pro změnu obrázku na pozadí odkazu, v podstatě jde o Pixyho řešení ořezané na kost, ale je funkční od IE6 (pravděpodobně i v IE5, ale nemám otestováno) až po moderní prohlížeče:
http://teststranek.kvalitne.cz/css-rollover/
Takto vypadá jedno z mnoha řešení pro změnu obrázku, vloženého jako element IMG:
http://teststranek.kvalitne.cz/blend-hover-01/
Plynulou změnu je možné vypustit. Změna obrázku funguje od IE6 (pravděpodobně i v IE5, ale nemám otestováno) až po moderní prohlížeče, ale plynule probíhá jen v prohlížečích s podporou CSS3 transitions.
Citace od: nobody kdy 14. 11. 2014, 16:56:19
potvrzuju ze reseni co poslal X125 funguje i v Opera12, narozdil od LinuxDays kde zobrzuje vse uz rovnou barevne :)
Operu stejne nikdo nepouziva
Citace od: jehovista kdy 14. 11. 2014, 17:34:24
Operu stejne nikdo nepouziva
Hrdě se hlásím ke skupině "nikdo" :)
Problem je ten ze ja mam ten obrazok defaultne v jednej farbe a netusim ako ho zmenit to je ten master problem ale inak presne ako pise X
Citace od: KodoerLv kdy 14. 11. 2014, 17:59:49
Problem je ten ze ja mam ten obrazok defaultne v jednej farbe a netusim ako ho zmenit to je ten master problem ale inak presne ako pise X
1. uděláš si novej obrázek o dvojnásobnym rozměru (přesněji o dvojnásobné výšce)
2. do horní poloviny dáš ten obrázek co máš
3. do dolní poloviny musíš vyrobit vzor obrázku "po najetí na něj"
4. uložíš a používáš už jen tento obrázek
Pak už postupuješ dle návodu od X125. Obrázek použiješ v CSS stylu jako background-image zarovanej svisle na "top" a po najetí ho CSS stylem posuneš o polovinu jeho výšky (takže se vlastně zobrazí spodní polovina) nebo ho svisle zarovnáš na "bottom". Snad si to ještě pamatuju...
Pokud nemáš žádný grafický editor nainstalovaný, tak použij třebas online editor http://apps.pixlr.com/editor/ - vyžaduje flash.
Pak otevřeš obrázek v editoru a dáš:
Seřízení, Tón a sytost, barvu měníš táhelkem Tón. Podle potřeby můžeš změnit i sytost a světlost (jas).
Pak obrázek uložíš pod novým jménem!, doporučuji ve formátu PNG.
Já osobně vidím problémy dva, vytvoření obrázku s jinou barvou, postup jsem nyní popsal a stále tajíš, zda se má měnit IMG, nebo baskgound-image.
Málo informací. Nejjednodušší je používat už v grafických návrzích ikonové fonty(např. fornt Awesome), které vypadají dobře při jakékoliv hustotě pixelů a hlavně se na ně dá aplikovat CSS. Ušetříš tím spoustu práce sobě i těm, co budou muset s tvým kódem následně pracovat. Pokud už to máš ve spritech, tak si vygoogluj dávkové zpracování ve Photoshopu(nebo v čem zrovna pracuješ). Možná bys klienta přesvědčil jednoduchým snížením opacity ikony o třetinu, zlehka se tak zabarví do barvy pozadí menu. Animovat to pak můžeš třeba přes transitions.
Teoreticky je podpora ikonových fontů v prohlížečích velice dobrá, praxe je horší (externí fonty nepodporují některé mobilní prohlížeče, blokují je některá rozšíření anebo proxy) fallback, na rozdíl od obrázkových řešení, není.
Prakticky je podpora skvělá, s trochou snahy to funguje i v IE7. Oproti spritům to má skoro samá pozitiva. Samozřejmě by se s tím mělo počítat už v grafickém návrhu. Jako náhradu spritů do budoucna vidím vektory v jakékoliv podobě, momentálně je nejvýhodnější použít fonty.