Autor Zpráva
Jay R
Profil *
Zdravím, vytvořil sem si z obrázku hexagon pomocí css, a chtěl bych se zeptat jeslti je to dobré řešení, popřípadě, jeslti znáte lepší. http://jsfiddle.net/eDjGf/
A ještě bych se chtěl zeptat jesltí .hexagon-in1 a .hexagon-in2, by nešli nahradit, pomocí :before a :after. Děkuji moc :)
jenikkozak
Profil
Jay R:
Je pro tebe fakt, že se příklad nezobrazuje dobře v IE, zanedbatelný?
Chamurappi
Profil
Reaguji na Jayho R:
Nepřipadá mi to jako dobré řešení. Je užvaněné, -webkit-užvaněné, -moz-užvaněné, -o-užvaněné a i trochu -ms-užvaněné (ale málo) a neřehledné. Na tvém místě bych si vygeneroval obrázek s oříznutím. Proč to patlat v CSS?
Jay R
Profil *
od ie 9 to funguje a pro web pro který dělám, je fakt že funguje špatně od ie9 níž zanedbatelný. a proč ten obrázek neořiznu? no proto že se to bude taková galerie ve slideru, která bude ukazovat poslední uživatelské práce, takže se to bude přidávat dynamicky, a už vidím jak to bude každý uživatel obřezávat...
tyhle topici mi přitou trochu od temátu moc neodpovidáte na to co jsem se ptal...
Chamurappi
Profil
Reaguji na Jayho R:
od ie 9 to funguje
Špatně testuješ, tvá ukázka v devítce nefunguje, protože jsi vynechal několik -ms-transformů. Nebylo by těžké zařídit, aby to fungovalo i ve starších Explorerech, maticové transformace uměla už verze 5.5.

a už vidím jak to bude každý uživatel obřezávat
Já nenavrhoval obřízku, ale oříznutí. Vygenerovat oříznutý obrázek přeci není problém, nehledě na to, odkud se vzal. Můžeš ho ořezávat na straně serveru po dokončení uploadu. Vlk se nažere a předkožka zůstane celá.

moc neodpovidáte na to co jsem se ptal
Chtěl jsi lepší řešení, ne úchylnější. Má-li být okolí šestiúhelníku průhledné, tak to asi jinak nepůjde a :before ani :after ti nepomůžou. Kdyby průhledné být nemuselo a štítil by ses použít překrývající obrázek, šlo by použít vhodně propočítané bordery. V návrzích CSS 3 existují i psudoelementy pro vnitřní obsah, těmi bys mohl nahradit vnitřní <div>y, ale nepodporuje je žádný prohlížeč (což možná pro web, který děláš, není zanedbatelné).
joe
Profil
Ano, je to dobré řešení.

Shodou událostí taky teď dělám na webu, kde se používají šestiúhelníky. O lepším řešení nevím.

Chamurappi:
Nepřipadá mi to jako dobré řešení. Je užvaněné, -webkit-užvaněné, -moz-užvaněné, -o-užvaněné a i trochu -ms-užvaněné (ale málo) a neřehledné.
Užvaněné? :-) Dokážeš to napsat tak, aby to fungovalo ve všech různých podporovaných prohlížečích bez toho, aby to bylo užvaněné? Nejde to, jednou už tvůrci vynalezli (bohužel) tyhle prefixy a tak to s nimi musíme chvíli vydržet. Pokud chceš vytvářet CSS animace, musíš například celý blok definovaných klíčových snímků zduplikovat pro každý prohlížeč...

Nepřehledné proč? To že jeden element otočí ve směru h. r. a druhý proti?

Na tvém místě bych si vygeneroval obrázek s oříznutím. Proč to patlat v CSS?

Protože někdy třeba takové polygony musí tvořit skupinu odkazů a s klikací mapou se ti nechce dělat, protože je všechno dynamické... Tento způsob se mi zdá celkem jednoduchý a efektivní, i když nefunguje moc v IE, no co, čtverec je snad taky polygon :-)

Jay R:
Dál třeba pomocí rámečku, ale nejde z toho udělat hexagonový odkaz (bude to čtverec...) a nedej Bože měnit barvu při hoveru :-)
Jay R
Profil *
ukázka nefunguje, je jasné že bych -ms- doplnil... za ořiznuti se ti omlouvám, nepochopil jsem tě, a ani nevím jak v php obřiznout takový tvar, prosím nedal by jsi mi nějaký návod? děkuji, a sorry za moje možná trošku neuvažené chování.. Jinak to poslední řešení jeslti dobře chápu není pro průhledné okoli?


jinak joe, díky btw taky použiváš stejné řešení?
joe
Profil
Jay R:
Používám stejné... na některých místech ale mám i obrázky..
Chamurappi
Profil
Reaguji na joa:
Užvaněné? :-)
Ano, užvaněné. Je to delší než čtyři řádky, což je na tak primitivní efekt hodně.

Pokud chceš vytvářet CSS animace, musíš například celý blok definovaných klíčových snímků zduplikovat pro každý prohlížeč...
Upřímně řečeno nechápu, proč by někdo měl chtít používat takovou zhůvěřilost. Pro člověka, který umí JavaScript, nepředstavují CSS animace žádnou výhodu. Je to akorát méně funkční alternativa…

Nepřehledné proč?
Kodér může zjevně snadno zapomenout na některý z prefixů.

a s klikací mapou se ti nechce dělat, protože je všechno dynamické
Já bych se raději patlal s klikací mapou než s -webkit-moz-o-ms-příšerou a můj výsledek by fungoval lépe většímu počtu návštěvníků.

i když nefunguje moc v IE
V Exploreru jde použít PNG a AlphaImageLoader, pak nejsou průhledné pixely prokliknutelné. Ale to je spíš taková relativně zbytečná třešinka :-)


Reaguji na Jayho R:
ani nevím jak v php obřiznout takový tvar, prosím nedal by jsi mi nějaký návod?
Nedal, PHP neumím. V C# bych to asi dokázal napsat. I když vlastně také zatím nevím jak, dosud jsem to nepotřeboval.
Jako další možnost, jak obrázek oříznout, se nabízí <canvas> (=> spáchat to v prohlížeči JavaScriptem), ten funguje ve více prohlížečích než transform.
joe
Profil
Chamurappi:
Ano, užvaněné. Je to delší než čtyři řádky, což je na tak primitivní efekt hodně.
S klikací mapou bys taky napsal řádků ještě víc a zrušil by sis možnost možnost jednoduchého zvětšení, snadného přesouvání elementů, transformaci na jiné tvary a pro dnes hodně využívané responsivní designy bys musel vytvářet alternativu.

Upřímně řečeno nechápu, proč by někdo měl chtít používat takovou zhůvěřilost.
Protože nativní operace budou vždycky rychlejší, než ty, které člověk napíše.

Je to akorát méně funkční alternativa…
Ano, fungovat to sice nebude všude, ale třeba návštěvníci se obejdnou CSS transitions. Je třeba se taky na to dívat z jiného úhlu pohledu - uživatel má starší prohlížeč, proč ho zatěžovat animacemi? Moderní uživatelé uvidí více efektů.

Pro člověka, který umí JavaScript
Víme, že umíš, ale nedávej červenou aktuálním trendům (které jen tak nezmizí) webdesignu :-)
Chamurappi
Profil
Reaguji na joa:
zrušil by sis možnost možnost jednoduchého zvětšení
Tam bych už použil transform a zoom. Čtyři řádky.

Protože nativní operace budou vždycky rychlejší, než ty, které člověk napíše.
Zanedbatelně. Nepostřehnutelně.

uživatel má starší prohlížeč, proč ho zatěžovat animacemi?
Protože ten starší prohlížeč je zvládá úplně stejně, jako když byl nový. Nevím, co je to za zdegenerovanou představu, že se starší prohlížeče stávají méně schopné v průběhu času. Akorát weby se vyrábějí čím dál hůř a hledají se záminky pro to, aby nemusely fungovat stoprocentně všem a všude. Kdyby CSS animace fungovaly správně v Exploreru 6, vypnul bys je snad podmíněným komentářem, aby nezdržovaly?

Moderní uživatelé uvidí více efektů.
Proč by měli tvůrci stránek záměrně chtít rozdílnou funkčnost napříč prohlížeči? Aby odměnili moderního uživatele? Nebo aby trápili nemoderního? Můžou použít postup, který funguje takřka všem, bez vměšování do otázek, které jim nepřísluší řešit.

nedávej červenou aktuálním trendům (které jen tak nezmizí) webdesignu :-)
Však ani já nezmizím :-)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: