Stránka 1 z 1
Udělání přechodu na kraji www stránek
Napsal: 26 čer 2014 13:39
od pajacz17
Ahoj, mám tento problém. Dělám web. stránky, kde chci mít na obou krajích tmavou barvu, která jde postupně ke světlé.
Jako hlavní mám div, který je nastaven na 1000px. V tomto divu se odehrává děj www stránek a pozadí je bílé. Udělal jsem si proužek obrázku s přechodem a dal repeat v ose y. Tím se mi udělal přechod na levé straně tak jak chci,že ta světlá končí na levém okraji divu a přechází to do bílé. Jak ale nastavím tento přechod i pro pravou stranu? Díky
Re: Udělání přechodu na kraji www stránek
Napsal: 27 čer 2014 00:20
od CZechBoY
čau,
otočíš přechod a uděláš to stejný na druhý straně.
Re: Udělání přechodu na kraji www stránek
Napsal: 07 črc 2014 07:33
od pajacz17
A mohu poprosit o informaci jak ho otočím? Děkuji
Re: Udělání přechodu na kraji www stránek
Napsal: 07 črc 2014 10:34
od IDVert3X
Jednoducho, vytvor pozadie široké 1920px, v strede nechaj 1000px ničoho, keďže tam bude content (obsah stránky, hlavný div) a tie okraje naštýluj. Následne do body nastav toto pozadie a vypni repeat. Taktiež ho sprav statické, aby po scrollnutí ostalo na mieste a zaroven nastav aby sa prisposobilo rozliseniu, tj. zobrazi sa cele na akomkolvek monitore.
Hlavný box zarovnáš na stred a odporúčam mierne odsadiť od vrchu, príklad:
Kód: Vybrat vše
#primarybox{
margin-top: 10px;
margin-left: auto;
margin-right: auto;
//a zvysok CSS pre hlavny box
}
Druha varianta je pouzit tiene... Ale to asi nieje efekt, ktory chces dosiahnut. Taktiez sa daju na toto pouzit CSS3 prvky bez nutnosti pouzitia akehokolvek obrazkoveho suboru.
Vela stastia.
Re: Udělání přechodu na kraji www stránek
Napsal: 07 črc 2014 10:37
od Myloš
pajacz17 píše:A mohu poprosit o informaci jak ho otočím? Děkuji
V grafickém programu, ve kterém jsi ho vytvořil, snad dokážeš najít funkci převrácení obrázku, ne?
Re: Udělání přechodu na kraji www stránek
Napsal: 07 črc 2014 12:11
od CZechBoY
jj určitě doporučuju udělat obrázek 1920px, potom totiž na mobilu nebude vidět nic víc než přechod z jedný strany
Re: Udělání přechodu na kraji www stránek
Napsal: 07 črc 2014 12:18
od IDVert3X
@CZechBoY, písal som, nech tam pridá arguement na to, aby pozadie bolo rovnaké na všetkých zariadeniach, viem, že som to mal na svojom starom webe a pozadie 1920x1080 sa zobrazilo rovnako na UltraHD TV aj na nejakom Tablete, ktorý ma 480p. Tomu sa hovorí responsive design. Tj. stránka sa prispôsobí rozmerom zariadenia napr. poprehadzovaním či zmenšením boxov a pri pozadí sa skrátka pozadie "zcvrkne" alebo "natiahne" tak, aby presne sedelo a bol tam celý obsah pozadia.
Tuším, že je to nejak takto:
Kód: Vybrat vše
background-image: url(obrazok.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
a dávať šírku 1000px je skôr blbosť, dal by som to takto:
Kód: Vybrat vše
width: 80%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
tj. bude na lavej aj na pravej strane 10% z velkosti monitoru prazdnych a sted monitoru (tj. ten box) bude mat 80% z celkovej velkosti a max. 1000px.
TJ. bude to aspon trosku responzivne.
Re: Udělání přechodu na kraji www stránek
Napsal: 07 črc 2014 12:19
od CZechBoY
Určitě chci zoomovat na tabletu jak blbec
Nicméně, když se nedá šířka těch 1920px tak by to mělo fungovat s tím background cover
Re: Udělání přechodu na kraji www stránek
Napsal: 07 črc 2014 12:21
od IDVert3X
Prečo zoomovať? Čo si chceš zoomovať pozadia stranky?
Re: Udělání přechodu na kraji www stránek
Napsal: 07 črc 2014 12:23
od CZechBoY
Stránku jako takovou...
Ale jak jsem psal.. s tim bz:cover by se mělo pozadí roztáhnout na max šířku prvku. Pokud ten prvek bude mít šířku 100% tak se na mobilu nebude muset zoomovat.
Re: Udělání přechodu na kraji www stránek Vyřešeno
Napsal: 08 črc 2014 09:45
od pajacz17
Díky. Místo cover jsme napsal 100% a vše funguje.