Autor Zpráva
paTaNiNho
Profil
Zdravím všechny ochotné,
s CSS3 teprve začínám, ale rád bych Vás podle níže zaslaného příkladu požádal o pomoc. Na adrese www.inovujeme.cz jsem narazil na velmi pro mou osobu zajímavé horní menu s odkazy. Nevíte, jak toho přesně bylo docíleno? Uvítal bych i příklady, neboť nějaké animace jsem zkoušel, ale není to ono.
Všem ochotným předem moc děkuju! =)
Medvídek
Profil
paTaNiNho:
transition: top 0.2s ease 0s;
Trejpa
Profil
paTaNiNho:
To je taková hloupost, tohle menu. Z atributu data-text si vezme jeho obsah, dá ho do pseudoelementů :before a :after a při najetí myší ho vymění za původní text pomocí display: block, napozicování nad původní prvek a prolnutí pomocí transition.

V Internet Exploreru to funguje až od verze 10, ve starších to jen mění barvičky. Já bych to asi nedělal.

Menu z inovujeme.cz
paTaNiNho
Profil
Děkuju všem za pomoc. . .je to hloupost, ale líbí se mi ;)
margin
Profil *
V Opeře to taky nejde, možná proto, že transitions nepodporuje u všech CSS vlastností.
Trejpa
Profil
Ještě doplním, že pozornější si jistě všimnou malého artefaktu, pokud položka menu začíná na písmeno „j“.
joe
Profil
Trejpa:
To je taková hloupost, tohle menu.
A proč je to podle tebe hloupost? To, že to nefunguje v každém prohlížeči, neznamená, že to je hloupost. Náhodou, ten kdo to psal, se mi zdá, že ví co dělá

(až na to, že to nejde v Opeře a je tam o-transition a není to úplně odladěné)
Trejpa
Profil
joe:
A proč je to podle tebe hloupost?
Protože upřednostňuji rovný přístup vůči všem návštěvníkům. Nechci, aby někdo trpěl jen proto, že má jiný prohlížeč, který ještě neumí jednu z všeobecně nerozšířených novinek. Poskytovat něco půlce návštěvníků mi přijde jako mrhání prostředky, které můžu využít jinak pro všechny.

Náhodou, ten kdo to psal, se mi zdá, že ví co dělá
Ano, je to napsáno přístupně s ohledem na zpětnou kompatibilitu a dotykové ovládání.
paTaNiNho
Profil
Jediný problém je v případě nejednotného pozadí, kde to tak prímově nefunguje. . .škoda :/
joe
Profil
Trejpa:
Nechci, aby někdo trpěl jen proto, že má jiný prohlížeč,
Tím, že nevidí efekt ale nikdo přece netrpí. Je to jen zvýhodnění za používání chytrého prohlížeče.

Samotné Google aplikace taky používají CSS3 vlastnosti (jasně, řekneš si Google aplikace = Google Chrome), ale on to používá třeba i Microsoft na svém webovém e-mailovém klientovi Outlook.com. Trpí snad uživatelé, co mají starší prohlížeč?

paTaNiNho:
Proč by to nefungovalo? Možna by to chtělo jen trochu rozšířit. Můžeš to také udělat obrázkem a původní text schovat, připravíš se ale o jednoduchou možnost změny textu.
Chamurappi
Profil
Zkusil jsem si to spíchnout v JavaScriptu. Bez neprůhledného pozadí.


Reaguji na joa:
Je to jen zvýhodnění za používání chytrého prohlížeče.
Proč bych měl chtít někoho zvýhodňovat? Co z toho budu mít? Já chci nabídnout všem stejně dobrý zážitek.

Samotné Google aplikace taky používají CSS3 vlastnosti
Samozřejmě, že i Google dělá chyby. (Krom toho prosazuje vlastní zájmy…)
Proč záleží na tom, kdo všechno to používá? Hledáš způsob, jak ospravedlnit kompromis mezi funkčností a vlastní leností. Kdybys dal tisíci náhodným uživatelům na výběr mezi pěknou CSS animací a jejím javascriptovým ekvivalentem, vyhrál by u nich s velkou pravděpodobností ten ekvivalent. Na ničem jiném nezáleží.

Trpí snad uživatelé, co mají starší prohlížeč?
Vidí to bez efektů. Takže pokud uvedené efekty lze považovat za přínos či zvýhodnění, pak ano, trpí… vidí to hůř. Zbytečně hůř.
paTaNiNho
Profil
To javascript řešení na jedničku, moc jsi mi pomohl. . . !
paTaNiNho
Profil
Ještě k tomu JS. V případě písmene pod řádkem např. y, vzniká menší problém se zobrazením a to zvlášť v IE10. Viz.: http://ft.trillian.im/9ad7a51fda3d4a03c16601e7c855e6c6cccf3c87/6fWJiCTZ1yi1ubm7sQU3Taa7kIVzu.jpg
Šlo by z toho nějak vybruslit? Např. zvětšením délky span? Případně děkuji. . . =)
Chamurappi
Profil
Reaguji na paTaNiNha:
Asi jo. Ale v mé ukázce s onožičkovanými písmenky potíž není, takže nevím přesně, na co bych se měl zaměřit. Můžeš dodat živou ukázku svých problematických nožiček?

Např. zvětšením délky span?
Já bych <span>ům žádné konkrétní rozměry nedával…
paTaNiNho
Profil
U mé osoby to jak ve Firefoxu, Chromu a IE9 funguje adekvátně a skvěle, ale když jsem to zasílal kamarádovi, který vlastní IE10, tak mu to ukazovalo jako v odkazu na screen výše.
Live ukázka: zde
předem případně děkuji. . .
Chamurappi
Profil
Reaguji na paTaNiNha:
Hm, vidím… z nějakého důvodu se špatně změří výška řádku.
Zkus proházet trojici řádků, která nastavuje innerHTML a měří/nastavuje výšku, do takovéto podoby:
  a.innerHTML = "<span>" + a.innerHTML + "<span>" + a.innerHTML;
  var height = a.offsetHeight / 2;
  a.style.height = height + "px";
(Ve své ukázce jsem úpravu také provedl.)
joe
Profil
Chamurappi:
Proč bych měl chtít někoho zvýhodňovat? Co z toho budu mít? Já chci nabídnout všem stejně dobrý zážitek.
Důležité je hlavně nabídnout všem stejný obsah, ať už s efektama a nebo bez. To jestli se někomu zobrazí s efektama nebo ne, už nemám za tak důležité. Prostě se nejde pořád vracet zpět a brát ohled na starší prohlížeče. Snad pokaždé tady vytáhnu příklad s mobilama a použiju ho i teď :-)

Hledáš způsob, jak ospravedlnit kompromis mezi funkčností a vlastní leností
To není lenost, to je jen využití aktuálních trendů. Dokážeš si představit, že by ti do dnešního smartphonu dali místo několika mega pixelového foťáku půl mega pixelový s tím, že bys mohl fotit o den déle? Asi bys to neuvítal :-)

V tomto případě jde o trochu jiný případ, kdy lze animaci nasimulovat.

PS: co třeba čtečky, v takovém případě, že se před nima zduplikuje položka menu? Nebudou pak taky duplikovat čtení?

A jinak pěkný nápad.
Str4wberry
Profil
Reakce na joe:
Na to má Chamurappi hezký argument, že když je web s efektem lepší, tak bude lepší i pro ty uživatele, kterým jej bude třeba doskriptovat, řešit obrázkem atp. (A naopak.)

Tedy to je podle mě skutečně kompromis mezi funkčností a vlastní leností (ekonomickou návratností). Což ale nemusí být nic špatného.
Chamurappi
Profil
Reaguji na joa:
Důležité je hlavně nabídnout všem stejný obsah, ať už s efektama a nebo bez.
Takže na dokonalosti formy nezáleží? Vůbec? Nebo jen trochu? Záleží na ní ze sedmdesáti procent? Ó, jaká náhoda, že se význam formy přesně shoduje s tržním podílem prohlížečů :-)

Prostě se nejde pořád vracet zpět a brát ohled na starší prohlížeče.
Proč to nejde? Protože to vede k horším výsledkům? Nebo protože to vede k lepším výsledkům, které se nehodí?
Já se nevracím zpět. Jen se neženu bezhlavě kupředu. Držím se současnosti.

Dokážeš si představit, že by ti do dnešního smartphonu dali místo několika mega pixelového foťáku půl mega pixelový s tím, že bys mohl fotit o den déle?
Dokážu si představit, že mi dají možnost fotit v nižší kvalitě. Důležitý pro uživatele není samotný vývoj, ale jeho reálné uplatnění.
Mimochodem, drtivá většina analogií (včetně téhle) je jako argument naprosto neúčinná. Analogie a metafory se hodí k vysvětlování, ne k přesvědčování, protože na jakýkoliv postoj jde najít připodobnění, které navíc při troše šťourání přestane pasovat.

co třeba čtečky, v takovém případě, že se před nima zduplikuje položka menu?
Já bych na místě čtečky četl i obsah vlastnosti content, ale skutečné čtečky jsou možná hloupější než já, takže mé položky menu přečtou dvakrát a v originále asi jen jednou. Dalo by se to vyřešit, ale také dělám kompromisy.
Kdybych to menu animoval přes CSS, zkusil bych duplikát udělat přes text-shadow a ne krkolomně přes pozicovaný content, protože text-shadow funguje všude, kde funguje transition.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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