Udělání přechodu na kraji www stránek Vyřešeno

Napište nám o svých webových stránkách, dejte vědět o jakémkoliv jiném zajímavém webu

Moderátoři: Myloš, Mods_senior

pajacz17
Level 3
Level 3
Příspěvky: 592
Registrován: březen 14
Pohlaví: Muž
Stav:
Offline

Udělání přechodu na kraji www stránek

Příspěvekod pajacz17 » 26 čer 2014 13:39

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

Reklama
Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Udělání přechodu na kraji www stránek

Příspěvekod CZechBoY » 27 čer 2014 00:20

čau,
otočíš přechod a uděláš to stejný na druhý straně.
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

pajacz17
Level 3
Level 3
Příspěvky: 592
Registrován: březen 14
Pohlaví: Muž
Stav:
Offline

Re: Udělání přechodu na kraji www stránek

Příspěvekod pajacz17 » 07 črc 2014 07:33

A mohu poprosit o informaci jak ho otočím? Děkuji

IDVert3X
Pohlaví: Nespecifikováno

Re: Udělání přechodu na kraji www stránek

Příspěvekod IDVert3X » 07 črc 2014 10:34

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.

Uživatelský avatar
Myloš
Master Level 8.5
Master Level 8.5
Příspěvky: 6990
Registrován: duben 06
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

Re: Udělání přechodu na kraji www stránek

Příspěvekod Myloš » 07 črc 2014 10:37

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?
Přílohy
GIMP_prevraceni.png
V GIMPu je to takhle
GIMP_prevraceni.png (11.57 KiB) Zobrazeno 1134 x
  • Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
  • Výňatek z pravidel fóra PC-HELP:
    • Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
    • Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
  • Mýliti se je Myloš. ;-)

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Udělání přechodu na kraji www stránek

Příspěvekod CZechBoY » 07 črc 2014 12:11

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 :D
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

IDVert3X
Pohlaví: Nespecifikováno

Re: Udělání přechodu na kraji www stránek

Příspěvekod IDVert3X » 07 črc 2014 12:18

@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.
Naposledy upravil(a) IDVert3X dne 07 črc 2014 12:20, celkem upraveno 1 x.

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Udělání přechodu na kraji www stránek

Příspěvekod CZechBoY » 07 črc 2014 12:19

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
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

IDVert3X
Pohlaví: Nespecifikováno

Re: Udělání přechodu na kraji www stránek

Příspěvekod IDVert3X » 07 črc 2014 12:21

Prečo zoomovať? Čo si chceš zoomovať pozadia stranky?

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Udělání přechodu na kraji www stránek

Příspěvekod CZechBoY » 07 črc 2014 12:23

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.
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

pajacz17
Level 3
Level 3
Příspěvky: 592
Registrován: březen 14
Pohlaví: Muž
Stav:
Offline

Re: Udělání přechodu na kraji www stránek  Vyřešeno

Příspěvekod pajacz17 » 08 črc 2014 09:45

Díky. Místo cover jsme napsal 100% a vše funguje.


  • Mohlo by vás zajímat
    Odpovědi
    Zobrazení
    Poslední příspěvek
  • DECO - M4 blokovani stranek
    od MK_Vs » 15 srp 2023 10:27 » v Sítě - hardware
    10
    2717
    od MrVoltz Zobrazit poslední příspěvek
    29 srp 2023 15:46

Zpět na “Web-tipy a vaše weby”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 4 hosti