| Autor | Zpráva | ||
|---|---|---|---|
| XolyCZ Profil |
#1 · Zasláno: 7. 10. 2018, 08:57:50
Ahoj, mám otázku. Jak se dá jednoduše udělat takové šikmé pozadí s nějakým textem a obrázky na něm, jako je tady? www.epicgames.com/fortnite/en-US/battle-pass/season-6. Tipuju že je to vždycky normální div a k němu je absolutně pozicovaný ten šikmý vrch, ale možná se to dá udělat všelijak. Děkuji za rady :)
|
||
| Mlocik97m Profil * |
#2 · Zasláno: 7. 10. 2018, 09:22:10
Je problém sa na to pozrieť cez dev consoli, v pripade stranky OBS projekt to tam maju taky a v kode to maju pekne napisane. Stačí si označiť tie šikmé divi.
|
||
| XolyCZ Profil |
#3 · Zasláno: 7. 10. 2018, 09:29:17
Na stránce OBS to mají pomocí absolutní pozice a rotace. No, tak zkusím si s tím nějak pohrát, díky :)
|
||
| T-fon Profil |
#4 · Zasláno: 7. 10. 2018, 09:33:17
A nebo si do googlu zadat šikmé pozadí pomocí CSS?
codepen.io/pipozoft/pen/vBwjl css-tricks.com/creating-non-rectangular-headers |
||
| XolyCZ Profil |
#5 · Zasláno: 7. 10. 2018, 09:43:42
T-fon:
Zkoušel jsem to, ale psal jsem to trochu jinak, takže mi to nic takového nenašlo. |
||
| XolyCZ Profil |
#6 · Zasláno: 7. 10. 2018, 15:19:25
Ještě mě napadá, když se to týká pozadí..Mám udělané pozadí pro mobily a když se na to dívám v responzivním designu mozilly, vypadá to dobře. konkrétně takhle:
No ale když si tu stránku otevřu v mobilu, tak se mi to pozadí natáhne na celou výšku té stránky a vypadá to strašně divně, protože je to natáhlé. Ten kód pro to pozadí je takový, ale zkoušel jsem už více variant.. .index{
min-height:calc(100vh - 105px);
background:url("images/background2_360px.jpg") no-repeat fixed center center;
background-size:cover;
background-color:#eee;
padding:0;
} |
||
| XolyCZ Profil |
#7 · Zasláno: 7. 10. 2018, 16:23:13
Tak už jsem to vyřešil přes nový div zafixovaný, co má pozadí to co chci. Akorát, když na mobilu rychle scrolluju, nestíhá se to vykreslovat. Neví někdo proč?
|
||
| XolyCZ Profil |
#8 · Zasláno: 7. 10. 2018, 22:35:02
Můžu vám sem hodit odkaz, našel jsem tohle: will-change - CSS: Cascading Style Sheets | MDN, ale prý je to až poslední možnost použití. Věděl by někdo co s tím? Když na mobilu rychle posunu stránku, hlavně nahoru, nestíhá se vykreslit ten obsah a jde vidět jenom to pozadí. www.forthewin.cz/test2/index.php?str=uvod
|
||
| blaaablaaa Profil |
#9 · Zasláno: 8. 10. 2018, 08:33:15
XolyCZ:
OT: bacha na udavani rozmeru s vh, safari s tim docela bojuje. |
||
| XolyCZ Profil |
#10 · Zasláno: 8. 10. 2018, 10:58:52
blaaablaaa:
No teď jsem se na to díval na kámošovém iPhonu a nefunguje to no. Musím to udělat jinak. |
||
| Tomáš123 Profil |
#11 · Zasláno: 8. 10. 2018, 15:12:18
XolyCZ:
Spoľahlivejšie by mali fungovať pseudoelementy :before a :after spolu s absolútnou pozíciou a z-indexom. Limitom očakávaného vzhľadu riešenia je podpora background-size: cover. Ak background-size zoskupíš pod spoločnú deklaráciu backgroundu, vytvoríš hack a nepodporujúce prehliadače pozadie vôbec nevykreslia (zbavíš sa skosenia na necelú šírku). Na druhej strane nenastáva sekanie a obsah zostáva čitateľný v každom prehliadači bez ohľadu na podporu.
Viď živá ukážka: Živá ukázka. |
||
| XolyCZ Profil |
#12 · Zasláno: 9. 10. 2018, 20:38:19
Tomáš123:
Díky za tip, ale už jsem si s tím poradil jinak. Pro mobily jsem to udělal jednodušší, na pc ta stránka vypadá normálně a funguje jak by měla. |
||
|
Časová prodleva: 6 let
|
|||
0