| Autor | Zpráva | ||
|---|---|---|---|
| André Profil * |
#1 · Zasláno: 28. 6. 2014, 14:12:17
Ahoj, potřeboval bych, aby toto http://kod.djpw.cz/beeb vypadalo jako chlívek s fotkou na této stránce www.allmusic.com/genre/country-ma0000002532.
Nejsem profík a nenapadá mě, jak hodit tu opacitu dolů a jak tam vrazit text, zdroják na tom webu je plnej vaty. Předem děkuju. |
||
| Bubák Profil |
#2 · Zasláno: 28. 6. 2014, 14:23:27
Kokni na http://kod.djpw.cz/eeeb, není to hotové, ale snad si dál poradíš.
Doporučuji k přečtení http://jecas.cz/opacity, abys věděl, jaké jsou možnosti, pokud chceš průsvitné pozadí pod textem na neprůsvitný text. |
||
| Fisir Profil |
Reaguji na André:
„jak hodit tu opacitu dolů“ Nadřazenému divu dáš position: relative a divu s opacity position: absolute; left: 0; bottom: 0;.
„jak tam vrazit text“ Normálně jej vepíšeš. Ale neuvidíš jej, protože je stejně jako pozadí psaný černým písmem. Navíc používáš vlastnost opacity, která zprůhlední celý element, ne jen jeho pozadí (jak je to na tvé ukázce). Tudíž budeš muset použít zápis barvy v rgba v kombinaci s nějakým šířeji podporovaným zápisem barvy (tudíž třeba nejdříve deklarace ve formátu rgb a až poté to přebít zápisem v rgba, který zohlední jen ty prohlížeče, které jej podporují).
Živá ukázka. |
||
| Bubák Profil |
#4 · Zasláno: 28. 6. 2014, 14:34:18
Fisir:
„Tudíž budeš muset použít zápis barvy v rgba.“ RGBA barvy nemají stoprocentní podporu, doporučuji použít nějaké kompatibilnější řešení. |
||
| Fisir Profil |
#5 · Zasláno: 28. 6. 2014, 14:36:10
Reaguji na Bubáka:
V živé ukázce je to řešené kombinací rgb a rgba.
|
||
| André Profil * |
#6 · Zasláno: 28. 6. 2014, 16:15:10
Díky oběma.
Trochu jsem to poupravil a z obrázku udělal odkaz. http://kod.djpw.cz/ieeb Tři věci, které by bylo vhodné vyladit: 1. Jak udělám, aby se už při najetí na obrázek barvil pruh, ne jenom při najetí na pruh? 2. Udělalo se likatelné bílé místo vedle obrázku, což je nežádoucí, kdybych dal dva obrázky vedle sebe. Jak udělat klikatelný jen obrázek? 3. Neprůhledná barva textu. Není to tak akutní jako předešlé dva body, ale vyřešení by bylo fajn. Rád bych to měl přes opacity a plně kompatibilní s prohlížeči napříč různými zařízeními, s tim rgba mi to nepřijde moc standardní. |
||
| Fisir Profil |
#7 · Zasláno: 28. 6. 2014, 16:40:51
Reaguji na André:
Ad 1) Místo .pruh:hover dej a:hover .foto .pruh.
Ad 2) Ve kterém prohlížeči? V IE 11 se nic takového neděje. Ad 3) Smaž opacity a za deklaraci background-color přidej další, u .pruh background-color: rgba(0, 0, 0, 0.5) a u :hoveru background-color: rgba(0, 153, 204, 0.5). Pokud prohlížeč podporuje rgba, .pruh bude průhledný, pokud ne, bude neprůhledný.
|
||
| juriad Profil |
#8 · Zasláno: 28. 6. 2014, 16:44:00
3) Nebo vytvořit dva překrývající se pruhy.
První (spodní) bude mít opacity, ale jinak bude prázdný a ten druhý bude mít průhledné pozadí a bude obsahovat text. |
||
| André Profil * |
#9 · Zasláno: 28. 6. 2014, 18:46:27
Fisir:
Paráda, takže všechny body pořešeny, jen zbývá bod č. 2, klikatelný pruh přes celou šíři stránky mimo obrázek. V IE 10 bez problému, ale Firefox a Chrome to tak zobrazuje. Nejaktuálnější kód - http://kod.djpw.cz/neeb či přímá ukázka http://jsfiddle.net/we7Aa/embedded/result/ Juriad: Takhle nějak, že? To mi přijde jako shůdnější varianta. http://kod.djpw.cz/oeeb |
||
| Fisir Profil |
#10 · Zasláno: 28. 6. 2014, 19:15:13
Reaguji na André:
Nastav .foto display: inline-block.
|
||
|
Časová prodleva: 10 let
|
|||
0