Autor Zpráva
Corwin
Profil
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
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
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é…
Corwin
Profil
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
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
Chamurappi:

ještě jednou děkuji, teď už si s tím pohrát zvládnu :)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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