Autor Zpráva
Kcko
Profil
Ahoj,

lze vůbec v CSS toto vyrobit? Normálně bych tu zkousenou zaoblenou šipku říznul jako obrázek a napozicoval nebo nafloatoval, ale web má být plně responsivní, tlačitka jsou různě barevná a vysoká.
Co jsem googlil a díval se na různé akce s CSS3 shapes tak jsem podobný tvar nenašel a nejsem toho schopen docílit ani pomocí border-radiusu.

Nějaký nápad?

Obrázek (nejedná se o klasický trojúhelník, je lehce zaoblený a zkosený).
Plaváček
Profil
Kcko:

Zkus si pohrát s tímhle http://cssarrowplease.com/.
Kcko
Profil
Plaváček:
Díky to znám, ale to mi moc nepomůže. Našel jsem způsob jakým by to šlo http://dabblet.com/gist/4592062, ale to je něco šílenýho. (+ nekompatibilita v minimálně v IE 8 a níž a nejsem si ani jist co na to IE 9).
DJ Miky
Profil
Napadá mě nastavit border-radius, trojúhelník trochu vertikálně zmenšit (aby se projevilo zaoblení), zprava useknout a napozicovat na ten useknutý pravý cíp malý kruh… Ne že by to bylo jednodušší :-)

http://kod.djpw.cz/ytc
Kcko
Profil
DJ Miky:
Díky moc. Pořád to ale není ono ( i když jsme se už celkem posunuli k výsledku), stále je tam tmavší border kolem toho elementu (musí být v barvě celého tlačítka). Asi se budu muset dohodnout s grafikem resp. klientem, aby ustoupil, pak nechci řešit že v nějakém IE / Safari / mobilním zařízení to nefunguje.
kaktuss
Profil
myslím, že z tohto hľadiska je ďaleko efektívnejšie urobiť SVG a použiť ho ako tlačítko (prípadne PNG kvôli starinám)
Kcko
Profil
kaktuss:
Neumím. Navíc jak se pak to tlačítko bude chovat v responsivu když jej budu zmenšovat? (paddingem, marginem, fontem .. atd?
DJ Miky
Profil
Tak ten tmavý rámeček je problém ve Firefoxu, změnou ze solid na outset se to vyřeší, alespoň ve FF: http://kod.djpw.cz/ztc
O podpoře v mobilních prohlížečích nevím.
Kcko
Profil
DJ Miky:
Aspoň, že tak tohle bych nevymyslel, máš u mě bludištáka :) (stejně budu apelovat na změnu grafiky, ale super, že mám k dispozici nějaké řešení).
kaktuss
Profil
Kcko:
Navíc jak se pak to tlačítko bude chovat v responsivu když jej budu zmenšovat? (paddingem, marginem, fontem .. atd?
Úplne bez problémov. SVG je vektorový formát, ktorý dokáže vyzerať rovnako dobre pri akejkoľvek veľkosti a dá sa upravovať aj pomocou CSS.
Kcko
Profil
kaktuss:
Aha ok, zkusím se na to večer juknout.
Chamurappi
Profil
Reaguji na Kcka:
stejně budu apelovat na změnu grafiky
Kvůli tomu, aby se nemusel použít obrázek? Divné.

Okolí je jednobarevné? Co všechno může být proměnlivé? Okolní pozadí, barva šipky, velikost zobáčku?


Reaguji na kaktusse:
Explorery 8 a starší nepodporují SVG.
kaktuss
Profil
Chamurappi:
Explorery 8 a starší nepodporují SVG.
Áno a preto som vyššie spomenul PNG. Dá sa použiť popri SVG ako fallback pri IE8 a staršom.
1Pupik1989
Profil
Nebo místo png se mrknout na dokumentaci VML. Potom stačí jen to VML uzavřít do podmínky IE < 8. Měl jsem někde takovou miniknihovnu pro vektorové kreslení v php, aby byly názvy metod pro vytváření tvarů stejné. Nicméně určitě už někde na internetu bude takové řešení hotové.
Kcko
Profil
Chamurappi:
Kvůli tomu, aby se nemusel použít obrázek? Divné.
Nevím co je na tom divného. Je to poměrně atypický tvar, který se špatně přenáší z "grafiky" do "webu".

Jak jsem psal v prvním příspěvku, buttonků je hodně, hodně variant (velikostní, barevné, zobák je vlevo nebo vpravo, pozadí na kterém je button se také liší) a vidím to problémově. Je to navíc jen špička ledovce z velmi rozsáhlého webu (60+ stránek k nakodování).
Chamurappi
Profil
Reaguji na Kcka:
Zkusil jsem to vyřešit s bitmapou. Protože se mi nechtělo kreslit ručně sprite obrázek se šipkou, napsal jsem si i jeho generátor, přímo v JS s <canvas>em a spojil jsem to do jedné ukázky. Tady je.

Kdybych to měl používat v praxi, tak bych si vygenerované PNG normálně uložil jako soubor (stačí zrušit canvas { display: none }, pravý klik na <canvas> atd.), pro každou barvu jeden, protože postup generování potřebuje nejen podporu pro <canvas>, ale i správné pochopení metody clip (a i při správném pochopení se výsledek v různých prohlížečích liší). V mobilním Exploreru 9 ta má ukázka moc dobře nevypadá, to by asi ještě šlo doladit. V ostatních mobilních prohlížečích bych také očekával nějaké mouchy… mno, nevím, jestli by to takhle šlo.
kaktuss
Profil
Chamurappi:
Pekná práca, ale na môj vkus príliš kostrbaté.
Chamurappi
Profil
Reaguji na kaktusse:
Jak jsem již řekl, závisí to na kvalitě clipu. Některé prohlížeče řežou moc ostře.
1Pupik1989
Profil
Proč nezkusíte to svg a vml? Když bude javascript vypnutý, tak co se stane? Já už za nekompatibilitu byl seřván několikrát. Přitom šipka v svg i vml je jeden řádek. Má mít pozadí no tak to už jsou 2 řádky. Clipnout není co, takže další problém ubyde. Chceš to mít jako png? Tak není problém to převést. Klasická šipka se dá udělat i s borderem.
Chamurappi
Profil
Reaguji na 1Pupika1989:
Když bude javascript vypnutý, tak co se stane?
Můj postup není závislý na JS. Opakuji: generátor sprite obrázku jsem spojil do jedné ukázky jen proto, aby to mohla být jedna ukázka.

Clipnout není co, takže další problém ubyde.
Tohle není problém, stačí si obsah <canvas>u uložit jako PNG v prohlížeči, který clipuje hezky. Pak ti stačí jedno společné CSS i jeden PNG obrázek (na jednu barvu šipky) pro všechny prohlížeče.

Má mít pozadí no tak to už jsou 2 řádky.
A jemný vnitřní stín. Jestli dobře vidím a není to jen kompresí…
Bez stínu by se v <canvas>ovém generátoru nemusel použít clip a stroke.

Proč nezkusíte to svg a vml?
Zkusím. Zatím si nejsem úplně jistý, jak je přiměju k natahování podle obsahu.
1Pupik1989
Profil
Já se kdysi inspiroval u explorer canvasu. Sice je to také javascript, ale zase hotové řešení, které stačí jen přepsat do php. Schválně to také zkusím, ať je víc možností. Prakticky by to šlo i přes gd, ale bylo by to nejspíš zbytečně pomalé. Za pokus to ale také stojí.

Hlavně tím svg a vml by se docílilo hladkých hran.
Kcko
Profil
Chamurappi:
Díky za snahu, ocenuji to. Nicméně prohlídl jsem si grafiku a jsou tam další zhůvěřilosti (button na tmavém pozadí, šipka jen "oborderovaná" bez výplně, začínám z toho mít bolehlav a udělám to přes obrázky a v responsivu to nějak zkrouhnu)-
1Pupik1989
Profil
Tak první pokud zde.
Chamurappi
Profil
Reaguji na 1Pupika1989:
Hlavně tím svg a vml by se docílilo hladkých hran.
Ty můžu mít v <canvas>u také. Pokud je nevidíš, zkus jiný prohlížeč.

Tak první pokud zde.
Nenatahuje se podle rozměrů obsahu šipky. Je to sice SVG, ale bez předností, kvůli nimž dotaz vznikl. (Kdyby měla šipka fixní velikost, tak stačí jedno PNG.)


Reaguji na Kcka:
prohlídl jsem si grafiku a jsou tam další zhůvěřilosti
Jedna výzva za druhou :-)
1Pupik1989
Profil
Já dal jen příklad. Samozřejmě to jde obalit funkcí v php a nastavovat libovolné rozměry. Na kod.djpw.cz jde php? Já to tedy nezkoušel.

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: