dodání ihned! nové
Hledáme programátora do rostoucího týmu ITnetwork.cz, 100% home office, 100% flexibilní pracovní doba. Více informací
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
BF
Avatar
Vakos
Redaktor
Avatar
Vakos:13.8.2014 14:34

Ahoj,
v současné době kóduji jeden web a narazi jsem na jednu věc a chtěl bych se zeptat, jakým kódem by jste to řešili vy

Odpovědět
13.8.2014 14:34
"Jediný způsob, jak dělat skvělou práci, je milovat to, co děláte. Pokud jste to ještě nenašli, hledejte dál. Ne...
Avatar
Odpovídá na Vakos
Michal Žůrek - misaz:13.8.2014 16:23

tak základem bych viděl lichoběžník (http://www.itnetwork.cz/…vary-v-css-3), pak si v JavaScriptu pohraješ s čísly.

 
Nahoru Odpovědět
13.8.2014 16:23
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:13.8.2014 16:34

S lichoběžníky by to šlo, ale zde máš zakulacené hrany... Na tuto situaci bych použil pravděpodobně přesně naměřený obrázek - každé okýnko zvlášť...

Tzn. budeš mít každé LI nastylované na jinou šířku a s jiným pozadím.

Stín pak aplikuješ pravděpodobně na celé UL - zvlášť.

Editováno 13.8.2014 16:35
Nahoru Odpovědět
13.8.2014 16:34
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:13.8.2014 16:48

napadají mě CSS 3d transofarmace, ale to by bylo složité a ještě zkoumám, kdybychom ten okraj vyřízli. Že by to byl normální hranantý div a spomocí css clip-path bychom vyřízki půlkruh nahoře a dole.

 
Nahoru Odpovědět
13.8.2014 16:48
Avatar
Michal Žůrek - misaz:13.8.2014 17:57

primitivní verzi mám hotovou :)

http://jsfiddle.net/tvaxy1bj/

 
Nahoru Odpovědět
13.8.2014 17:57
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:13.8.2014 18:13

Jasně, jasně... avšak tady je zase problém s průhledností okolí (zelená část tvého návrhu).

Navíc udělat to menu tak, aby fungovalo aj v IE8+ půjde podle mne jen pomocí těch obrázků pro každé li... :/

Holt není vždy nejlepší dělat design abnormálně.

Nahoru Odpovědět
13.8.2014 18:13
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Odpovídá na Vakos
Neaktivní uživatel:13.8.2014 18:17

Souhlasím s Honzou, obrázky budou asi nejlepší :)

Nahoru Odpovědět
13.8.2014 18:17
Neaktivní uživatelský účet
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Vakos
Samuel Illo :13.8.2014 18:19

To zahnutie menu teda neviem urobiť, jedine pomocou tých obrázkov ako píše Honza Bittner, inak by som vedel len zahnutý tieň na plochom menu.
A môj názor je, že to menu by bolo krajšie ploché ako zahnuté :)

Nahoru Odpovědět
13.8.2014 18:19
www.samuelillo.com | www.github.com/lamka02sk
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:13.8.2014 18:39

pokud má jednobarevné pozadí, tak to není problém.

 
Nahoru Odpovědět
13.8.2014 18:39
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:13.8.2014 18:41

Pap přijde příkaz: "hele, dej mi na pozadí tuto" ... A bude v háji. :)

Lepší je to udělat tak, aby s tím neměl v budoucnu problémy. ;)

Editováno 13.8.2014 18:42
Nahoru Odpovědět
13.8.2014 18:41
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:13.8.2014 18:42

no tak pak do budoducna přemýšlet o clip nebo použít SVG, které by dnes mělo clip umět.

 
Nahoru Odpovědět
13.8.2014 18:42
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:13.8.2014 18:43

Stále tu je však problém se staršími prohlížeči. :/

Nahoru Odpovědět
13.8.2014 18:43
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Odpovídá na Michal Žůrek - misaz
Neaktivní uživatel:13.8.2014 18:45

Nemyslím si, že tohle je zrovna ideální příklad na použití SVG. Pokud by prohlížeč SVG nezvládl, tak bude stránka bez menu, což není zrovna 2x žádoucí.

Nahoru Odpovědět
13.8.2014 18:45
Neaktivní uživatelský účet
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:13.8.2014 18:46

nebudu se tu s tebou hádat, dal jsem pro mobilní zařízení šťastnější variantu, pokud má jednobarevné pozadí mohl by toto klidně použít.

 
Nahoru Odpovědět
13.8.2014 18:46
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:13.8.2014 18:50

Nevidím, že bychom se hádali. :)

Určitě je to uspokojivé řešení pro jednobarevné pozadí, to ano.

Btw. SVG nějaké prohlížeče nezvládají, CSS3 taktéž ne. Je proto nutné tvořit vše, minimálně tedy klíčové části webu, tak, aby fungovali i na starých prohlížečích, tedy IE8+.

Nahoru Odpovědět
13.8.2014 18:50
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:13.8.2014 18:50

tak to ověříš javaScriptem, apk můžeš stáhnout obrázky. Obrázková varianta je úplně na nic v mobilním telefonu.
1.) na EDGE a podobných šnecích ji budeš stahovat věčnost
2.) jen těžko bude responzivní

 
Nahoru Odpovědět
13.8.2014 18:50
Avatar
Odpovídá na Michal Žůrek - misaz
Neaktivní uživatel:13.8.2014 19:27

1.) Rozumně komprimovaný asi 100kb veliký obrázek mi přijde mnohem lepší, než stahovat SVG a JavaScript, poté kontrolovat JavaScriptem zda to vůbec půjde a pak to nějak nastavovat.
2.) A jak bude SVG responzivní?

Například můj telefon, který není rád za jakýkoliv skript, by ten web neměl rád.

Editováno 13.8.2014 19:28
Nahoru Odpovědět
13.8.2014 19:27
Neaktivní uživatelský účet
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:13.8.2014 23:47

Pořád se oháníte, že HTML 4 je staré a bavíte se tu o edge? Snad spoustu lidí má 3G a zbylých 10% je jedno ne?

 
Nahoru Odpovědět
13.8.2014 23:47
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Samuel Illo :14.8.2014 9:26

Dávať ešte k tomu zbytočné skripty na telefón je totálny zabijak. Používateľ bude rád ak mu raz z desiatich pokusov nespadne prehliadač...

Nahoru Odpovědět
14.8.2014 9:26
www.samuelillo.com | www.github.com/lamka02sk
Avatar
Odpovídá na 1Pupik1989
Neaktivní uživatel:14.8.2014 9:37

To je dost možné, ale víme jak je to s pokrytím 3G/4G, že :)

Nahoru Odpovědět
14.8.2014 9:37
Neaktivní uživatelský účet
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Neaktivní uživatel
1Pupik1989:15.8.2014 7:30

S tím souhlasím. U nás Vodafone před třemi měsíci přidal na vysílač 3G, ale ještě ho nespustili. Proto používám Operu Mini, přeci jen ty data trochu zcvrkne.

 
Nahoru Odpovědět
15.8.2014 7:30
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 21 zpráv z 21.