Fórum Root.cz
Hlavní témata => Vývoj => Téma založeno: KodoerLv 14. 11. 2014, 12:57:35
-
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.
-
potvrzuju ze reseni co poslal X125 funguje i v Opera12, narozdil od LinuxDays kde zobrzuje vse uz rovnou barevne :)
Operu stejne nikdo nepouziva
-
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
-
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.