| Autor | Zpráva | ||
|---|---|---|---|
| Corwin Profil |
#1 · Zasláno: 11. 12. 2015, 15:53:31
ahoj,
dostal jsem takovou zvláštní grafiku, které ale obsahuje spoustu prvků, co nevím, jak pořešit. mám například následující nadpis, pro představu: 
tento nadpis sám o sobě vyřeším jednoduše (bílý trojúhelník na h1:after), ovšem grafika obsahuje spoustu dalších, podobně uřízlých textů, pod nimiž je obrázek. jako například toto menu : 
a tak bych rád požádal o radu, jak to udělat. raději se ptám dřív, než klientovi napíšu, že to prostě nenjde. já tedy myslím, že to nějak jde - ale aby to řešení nenadělalo víc škody jak užitku. díky |
||
| Str4wberry Profil |
#2 · Zasláno: 11. 12. 2015, 16:02:36
V nových prohlížečích jde použít
clip: Oříznutí CSS vlastností clip
Pro starší by bylo (hodně pracné) řešení překrýt to obrázkem nebo mít zvláštní font s ukousnutými písmeny, který by se aplikoval na poslední písmeno. |
||
| Corwin Profil |
#3 · Zasláno: 11. 12. 2015, 16:53:15
děkuji za rychlou odpověď. každopádně jestli to nepodporuje firefox (což dle živé ukázky zjevně ne), tak s tím asi moc nepochodím...
|
||
| Chamurappi Profil |
Reaguji na Str4wberryho:
„V nových prohlížečích jde použít clip“
Jen v některých. Kdyby byl problémem jen starší Explorer, v něm by šel poměrně snadno použít filter: Chroma.
Reaguji na Corwina: Vlastnost clip-path pochází prapůvodně ze SVG a myslím, že v SVG je její podpora lepší. Akorát budeš muset udělat celý nápis jako SVG obrázek.
Nebo by šel použít <canvas>, s ním lze vyrobit prakticky libovolný bitmapový efekt.
Řekl bych, že tomu chybí tomu systém – řez je vedený různě v závislosti na tvaru posledním znaku, takže vymýšlet obecné řešení je asi ztráta času a použil bych raději PNG obrázek. Mimochodem, přijde mi to jako docela špatný nápad. Vypadá to jako chyba, zhoršuje to čitelnost… Edit: Teď mě napadlo, že by to šlo uříznout i přes CSS, kombinací dvou transformů s rotate a jednoho overflow: hidden. Vlastně by to mělo být docela snadné…
|
||
|
Časová prodleva: 3 dny
|
|||
| Corwin Profil |
#5 · Zasláno: 14. 12. 2015, 16:14:06
Chamurappi:
děkuji za odpověď. že je to špatný nápad a není to moc pěkné, s tím musím souhlasit... každopádně takto jsem to dostal a takhle to po mě chtějí. tedy po dnešní konzultaci to vypadá, že nejspíš dostanu font / nebo efekt úplně vyhodíme... ale: ve hře je stále původní varianta, kdy to má být textem s uřízlými konci. můžeš prosím trochu rozvést to řešení přes dva transformy s jedním overflow? (nechci, aby někdo dělal práci za mě, jenom si to prostě neumím přestavit, co čemu nadefinovat ...) předem dík. |
||
| Chamurappi Profil |
#6 · Zasláno: 14. 12. 2015, 19:54:55
Corwin:
Princip jsem naznačil tady: Živá ukázka Ořezává to sice špatný roh a asi trochu víc, než jsem chtěl, ale vyťukal jsem to teď na mobilu, tak jsou tyto vady snad odpustitelné :-) |
||
| Corwin Profil |
#7 · Zasláno: 14. 12. 2015, 22:49:45
Chamurappi:
ještě jednou děkuji, teď už si s tím pohrát zvládnu :) |
||
|
Časová prodleva: 8 let
|
|||
0