| Autor | Zpráva | ||
|---|---|---|---|
| Kcko Profil |
#1 · Zasláno: 29. 10. 2013, 10:12:36
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 |
#2 · Zasláno: 29. 10. 2013, 10:24:52
Kcko:
Zkus si pohrát s tímhle http://cssarrowplease.com/. |
||
| Kcko Profil |
#3 · Zasláno: 29. 10. 2013, 10:30:05
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 |
#4 · Zasláno: 29. 10. 2013, 10:47:39
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 |
#6 · Zasláno: 29. 10. 2013, 11:10:54
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 |
#7 · Zasláno: 29. 10. 2013, 11:15:00
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 |
#8 · Zasláno: 29. 10. 2013, 11:19:10
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 |
#10 · Zasláno: 29. 10. 2013, 12:41:42
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 |
#11 · Zasláno: 29. 10. 2013, 12:54:12
kaktuss:
Aha ok, zkusím se na to večer juknout. |
||
| Chamurappi Profil |
#12 · Zasláno: 29. 10. 2013, 13:14:32
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 |
#14 · Zasláno: 30. 10. 2013, 09:16:20
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 |
#15 · Zasláno: 30. 10. 2013, 09:31:32
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 |
#16 · Zasláno: 30. 10. 2013, 18:23:54
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 |
#17 · Zasláno: 30. 10. 2013, 22:02:16
Chamurappi:
Pekná práca, ale na môj vkus príliš kostrbaté. |
||
| Chamurappi Profil |
#18 · Zasláno: 30. 10. 2013, 22:22:50
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 |
#19 · Zasláno: 31. 10. 2013, 01:13:39
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 |
#20 · Zasláno: 31. 10. 2013, 10:13:17
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 |
#22 · Zasláno: 31. 10. 2013, 14:27:03
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 |
#23 · Zasláno: 31. 10. 2013, 15:38:22
Tak první pokud zde.
|
||
| Chamurappi Profil |
#24 · Zasláno: 1. 11. 2013, 16:55:12
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 |
#25 · Zasláno: 1. 11. 2013, 18:35:02
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.
|
||
|
Časová prodleva: 10 let
|
|||
0