« 1 2 »
Autor Zpráva
quatzael
Profil
Nevěděl jsem jak lépe popsat problém.

Potřeboval bych, aby text, který vkládám do divu s pevnou šířkou se:
1. nezalamoval (tzn. aby to byl furt jen jeden řádek)
2. aby všechno co přesahuje a leze ven z toho divu bylo skryté
3. aby na konci divu byl nějaký gradient do ztracena (tzn. aby poslední slovo mělo fade out efekt)

Doufám, že mi rozumíte co mám na mysli. Na webu je to celkem běžné.
Sir Tom
Profil
quatzael:
Na webu je to celkem běžné.
Tak ukaž příklad.

Aby se text nezalamoval: White-space
Aby se text navíc nezobrazil: Overflow
Aby se udělal fade efekt: na konec divu dáš nějaký jiný div přes text, který bude mít pozadí gradientí z průhledné do neprůhledné - tím pádem vše pod tímto divem půjde ze stavu viditelného do stavu neviditelného...
quatzael
Profil
Sir Tom:
Tak ukaž příklad.
Zas tak běžný to asi není, protože teď zrovna nemůžu nic takovýho najít..

Každopádně 1. a 2. problém vyřešen.

Ale mám problém s tím gradientem. Vůbec nefunguje.

Zkusil jsem například tohle:
filter: alpha(opacity=100, finishOpacity=0, style=1);
Sir Tom
Profil
quatzael:
Udělej to přes obrázek (nebo div s pozadím), na kterým je gradient z průhledné do neprůhledné a tento obrázek (nebo div s pozadím) napozicuj.
quatzael
Profil
Sir Tom:
To bych celkem rád, ale to pozadí už má jeden gradient a to vertikálně. Takže moc nevím jak v inkscapu přes to udělat další gradient horizontálně. Jde to nějak?
buchti
Profil
filter myslím funguje jenom v IE

do ztracena by šlo udělat tím, že na ten div nastavíš bg, které si vygeneruješ zde http://www.colorzilla.com/gradient-editor/
quatzael
Profil
buchti:
Co je to bg?

Vygeneroval jsem si tam gradient, ale vypadá to, že to umí jen udělat přechod s vybranou barvou, ne? Já potřebuju udělat gradient z pozadí, kterým je obrázek s jiným gradientem.
Sir Tom
Profil
quatzael:
Jo jde, nyní ale netuším přesně jak, protože jsem už to dlouho nedělal. Inkscape se mi v tomto zdá docela divný. Já bych doporučil asi Gimp, nebo PS. Můžeš taky zkusit dát 2 gradienty přes sebe...

Bg je background.
quatzael
Profil
Sir Tom:
Můžeš taky zkusit dát 2 gradienty přes sebe...
To se právě snažím udělat, ale vypadá to, že to prostě nejde..
Sir Tom
Profil
quatzael:


1. Máš 2 objekty, kde je různý gradient.
2. Jeden objekt vezmeš a dáš ho na druhý objekt.
3. Ve výsledku máš na sobě 2 objekty.
quatzael
Profil
Sir Tom:
Jenže tohle jsou právě že dva různý objekty. To co já potřebuju je dva gradienty na jeden objekt. Nebo prostě jeden gradient s opacity 0->100 na obrázek obecně. Třeba kdyby šlo prostě například v Gimpu nebo v Hornilu importovat .png obrázek a tam udělat ten gradient průhlednosti.

Anebo by snad mělo i nějak jít v CSS přímo nějakým filtrem dát do ztracena přímo ten text a nemuselo by se to ničím přikrývat, ne?
Str4wberry
Profil
Byl by obrázek toho, jak to má vypadat?
quatzael
Profil
Str4wberry:

Obrázek jak to má vypadat bohužel není, protože ten se právě snažím tady už druhý den nějakým způsobem zkonstruovat.

Každopádně výchozí obrázek je tohle a potřeboval bych ho zprůhlednit zleva doprava.


A potom ještě jeden podobnej..


Je tam gradient vertikálně. A potřeboval bych udělat tam přidat ten horizontální gradient s transparentností..
Str4wberry
Profil
Předpokládám, že tento obrázek se bude vodorovně opakovat, je to tak?
quatzael
Profil
Str4wberry:
Ne ne, tohle má jen zakrýt konec delšího textu, který dál pokračuje jako skrytý mimo div. Aby to získalo ten efekt, že to jde do ztracena.
Str4wberry
Profil
Tak sem dejte obrázek nebo ideálně živou ukázku dlouhého textu, kde jen chybí to zakrytí.
quatzael
Profil
Str4wberry:

No nevím jak to líp popsat. Obrázek je zde:



Prostě potřebuju aby ten text s tím pozadím šel doztracena stejně tak jako ten text pod tím na bílém pozadí..
Str4wberry
Profil
Skoro mi přijde, že to vypadá docela dobře i s primitivním CSS přechodem.

Živá ukázka
quatzael
Profil
Str4wberry:
Díky, ještě jsem si to trochu upravil a udělal jsem vnitřní element čistě s textem a v něm ten element s přechodem, takže ten přechod překrývá čistě jen ten text a ne ten background pod a nad ním..


Str4wberry:
A jak jsi to prosímtě udělal?

Ještě potřebuju tenhle background:


Zkoušel jsem ten obrázek uploadovat sem: www.colorzilla.com

ale nevím jak z toho vygenerovat ten požadovaný gradient.
Chamurappi
Profil
Reaguji na quatzaela:
Vyrob PNG obrázek postupně přecházející z žádaného pozadí do ztracena (do průhledna). Generovat ten prefixový hnus nepotřebuješ (a v tomto případě to ani nejde).
quatzael
Profil
Chamurappi:
Vyrob PNG obrázek postupně přecházející z žádaného pozadí do ztracena (do průhledna).
Dík, že ses přidal, ale tohle tady právě řeším už pomalu ve dvou vláknech. Jak to udělat?
Chamurappi
Profil
Reaguji na quatzaela:
V nějakém grafickém editoru, ne?

Nejsem expert na grafiku. Umím trochu pracovat akorát s Paint Shop Pro 7, v něm jsem vyrobil nový obrázek 40×36, do něj jsem nakreslil gradient z černé do bílé, otevřel jsem ten tvůj obrázek, zadal jsem vytvořit novou masku podle světlosti toho gradientu… a je hotovo. Žádná velká věda.
quatzael
Profil
Chamurappi:
To vypadá docela dobře. Dík moc. Je tam sice pár pixelů trochu jinak ale na první pohled to nejde vidět, takže ok. Pokusím se stáhnout ten Paint Shop a zkusím to udělat i s tím druhým obrázkem.. V Gimpu ani v Hornilu jsem žádnou takovou funkci nemohl najít..
quatzael
Profil
Chamurappi:
Paint Shop Pro 7, v něm jsem vyrobil nový obrázek 40×36, do něj jsem nakreslil gradient z černé do bílé, otevřel jsem ten tvůj obrázek, zadal jsem vytvořit novou masku podle světlosti toho gradientu… a je hotovo.
Nainstaloval jsem si to, ale je to šílený. Vůbec nevím jak na to.. Zlatej inkscape tam se dá prakticky i bez návodu přijít skoro na všechny funkce, tady prakticky nejde nic..
Chamurappi
Profil
Reaguji na quatzaela:
Chce to trochu cvik. Mně připadají šílené (pomalé a těžkopádné) všechny ostatní pokročilé bitmapové editory :-) (včetně novějších verzí Paint Shop Pro)

Ten obrázek jsem po uložení ještě trochu zoptimalizoval, má jen 179 bajtů => je čtyřikrát menší než ten prefixový mišmaš.
quatzael
Profil
Chamurappi:
Fakt nevím jak na to. Mořím se s tím už den.
Podařilo se mi vytvořit ten přechod (šílený) a teď nevím co s tou maskou. Mám otevřenej ten obrázek, na který chci udělat ten přechod a ten gradient. Ale nevím z čeho mám vytvořit tu masku a na co a jak to aplikovat..
quatzael
Profil
Chamurappi:
Tak už jsem na to nakonec přišel, ale bylo to fakt hrozný..
Chamurappi
Profil
Reaguji na quatzaela:
Gratuluji, mně trvalo asi pět let, než jsem pochopil, jak (a k čemu) tamní masky používat. A také obcházet všelijaké chyby s nimi související.
Věřím, že podobnou schopnost mají i ostatní pokročilé grafické editory, tudíž jsi možná mohl svůj výzkumnický elán upřít k nějakému méně archaickému kousku softwaru.
quatzael
Profil
Chamurappi:
Já taky proto používám několik grafických editorů, podle toho jaký funkce se tam dají najít. Nezřídka šahám i po tom windowsáckým Malování:o)
Amunak
Profil
Hmm, tak já dříve používal Corel (Photo Paint), ale kvůli ceně jsem ho opustil (nechtěl jsem pořád kupovat nové verze), naučil jsem se s Gimpem, a jsem docela spokojený. Sice by tam některé věci (práce s vrstvami) mohly být praktičtější, ale dá se na to zvyknout. Udělat tam takhle gradient přes pozadí je otázka pár vteřin.
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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