« 1 2 »
Autor Zpráva
quatzael
Profil
Jak lze docílit blur effectu podobného jako je u Windows Aero přímo jako pozadí elementů?
Windows Aero

Někde jsem to viděl na webu a teď si zaboha nemůžu vzpomenout kde..
Str4wberry
Profil
Vytvořit průhlednost a rozmazání teoreticky není problém, ale nevím o tom, že by šlo z elementu v popředí rozmazávat prosvítající obsah v pozadí.
quatzael
Profil
Str4wberry:
Možná jsem to viděl u Komerční banky, když tam na mě vyskočilo nějaký dialogový okno, ale opravdu si nejsem jistej..
Každopádně jsem to opravdu viděl na webu, takže mě to překvapilo, že je to vůbec možný.
Roman Plencner
Profil
quatzael: myslíš niečo podobné, ako na http://blog.squarespace.com/?
quatzael
Profil
Roman Plencner:
Ne. Myslím skutečně efekt, který je stejný jako to Aero.
okolojsoucí
Profil *
http://webstandard.kulando.de/post/2010/03/24/windows-7-fenster-mit-css3-und-jquery-tutorial-teil-2
Chamurappi
Profil
Reaguji na quatzaela:
Mozilla podporuje -moz-appearance: -moz-win-glass, ale tato hodnota nepůsobí při použití uvnitř webové stránky.

Každopádně jsem to opravdu viděl na webu
Jsi si jistý, že jsi neviděl skutečné dialogové okno?


Reaguji na okolojsoucího:
Nerozmazává.
quatzael
Profil
Chamurappi:
100%! Bylo tam rozmazaný pozadí zbytku stránky.

Doufám, že mě chápete správně. Nejde o to samotný okno, ale o to pozadí.
Mám na mysli něco, co už jsem řešil tady.

Řešil jsem ten efekt, že to pozadí ztmavne a zůstane "svítit" jen to dialogový okno.
No a protože jsem to teď někde viděl s tím rozmazaným efektem a hodně se mi to líbilo, tak bych to chtěl aplikovat místo toho tmavnutí případně v kombinaci s tím.


Mě tehdy nenapadlo, že bych si měl tu stránku nějak zapamatovávat. Myslel jsem, že je to jednoduše proveditelná věc.
peta
Profil
quatzael: neni, musi se podsunout pozadi s css opacitou pod celou oblast. Kdyz udelas div s opacitou a dovnitr das text, take zpruhledni. A to rozmazani pravdepodobne resil nejaky js pres canvas nebo svg. Pokud na to nema prohlizec vestavenou funkci

https://developer.cdn.mozilla.net/media/uploads/demos/D/a/David%20Mulder/c65123ae9f13eaf293101077308a23f0/aero-windows_1316465302_demo_package/index.html
(v IE9 to dela pekny binec)
https://www.google.cz/search?q=svg+win+aero
margin
Profil *
Mám dojem, že pro stromy není vidět les a bez CSS3, HTML5 a jQuery už nic neumíme udělat jednoduše, přitom by stačily 2 obrázky, první neupravený, druhý obrázek s požadovanou úpravou, v tomto případě s aero efektem, pak 3 řádky CSS a 8 řádků JS, a chodilo by to možná i v IE5. Netestoval jsem, zda příklady chodí také v IE9/IE10, ale v ostatních prohlížečích, včetně již nepoužívaného IE6, není problém.
Hrátky s clip - Lupa (většina odkazů nefunguje, ale je tam habrndorfův slovní popis řešení)
http://pokusy.1-webdesign.cz/lupa/ (aktuální odkaz)
http://pokusy.1-webdesign.cz/clip/ (aktuální odkaz)

Takže jde o odchycení pozice myši a napozicování a CSS ořez (clip). Ty asi budeš chtít odchytávat pozice objektu, nad kterým je myš, nebo na který myš klikla, takže budeš muset udělat nějaké úpravy.
Str4wberry
Profil
Reakce na peta:
Nerozmazává.

Reakce na margina:
Nevím, jestli něco uniká mně nebo tobě, ale jak docílíš toho, aby element v popředí rozmazával element, který překrývá? Nebo to myslíš tak, že by byl jeden obrázek pozadí normální a druhý rozmazaný, který by na nastražil za Aero okno v odpovídajícím výřezu a umístění?
margin
Profil *
Str4wberry:
Nebo to myslíš tak, že by byl jeden obrázek pozadí normální a druhý rozmazaný, který by na nastražil za Aero okno v odpovídajícím výřezu a umístění?
Tak jsem to myslel, možná jsem to nepopsal dost jasně, jen jsem na konci zmínil, že quatzael bude „muset udělat nějaké úpravy“.
Str4wberry
Profil
Aha, no, dva obrázky by byly problematické v tom, když by za Aero oknem měl být ještě nějaký jiný obsah. Asi by bylo potřeba spíš naklonovat celou stránku, udělat výřez, umístit jej pod Aero okno a rozmazat.
quatzael
Profil
Str4wberry, margin:
Aby jste mi správně rozuměli kluci. Opravdu mi nejde o nějaký windowsacky Aero okno, prostě chci rozmazat celou stránku podobným způsobem jako to dělá Aero, a na to si dat svoje vlastní dialogový okno..
margin
Profil *
Str4wberry, quatzael:
Už rozumím, tím, že quatzael často zmiňoval pozadí, já to chápal jako CSS background stránky.
Str4wberry
Profil
Živá ukázka (pro ostatní prohlížeče než Chrome jsem zatím rozmazávání neřešil)
quatzael
Profil
Str4wberry:
Jojo, takhle přesně jsem to myslel, perfektní! Akorát blbý je, že to funguje jen v tom Chromu.. Já se na to večer pořádně mrknu. Myslíš, že to půjde udělat i na ostatní prohlížeče?
peta
Profil
http://kod.djpw.cz/snc - sis, to je desny :) ty barvy, spatne viditelna cisla radku, cisla radku do 10 zadna Doufam, ze tohle vidim naposled nebo to priste bude aspon cernobile az na obarveny kod a s bilym podkladem. Treba fialova <p> na tom sedem podkladu, des.
Str4wberry: nechapu, na co reagujes. To mozilove demicko ve FF vypada slusne, ale desne potrhava. V IE9 to nedela nic, jen je to pruhledne. Ale, to jsem psal, ze to v IE9 dela binec.
quatzael
Profil
Str4wberry:
Fakt si s tím nevím rady jak to udělat na ty ostatní prohlížeče.
Předpokládám, že filter: blur(3px) by mělo fungovat na všechny prohlížeče, ale nějak to nefunguje.

Dokázal by prosím někdo poradit, plís.
1Pupik1989
Profil
Tak jsem to zkusil také. Internet explorer 8 to skousne. Pokud má někdo IE6, tak to zkuste.

http://kod.djpw.cz/ync
quatzael
Profil
1Pupik1989:
Díky, tohle vypadá trochu nadějněji. Jede mi to na všem kromě Opery (o tu mi ani tak moc nejde) a IE10 (o to ale jde ukrutně).
Paradoxně to jede na IE7..
1Pupik1989
Profil
Zkus postupně ty filtry zakomentovat. Nebo je napsat za sebe a ne pod sebe, to mě nějak nenapadlo. IE10 by mělo umět právě i to svg, takže by neměl problém.

Nejspíš se opravdu hodnoty ve filter přepisují. Mě to bylo nějaké divné.
margin
Profil *
Podpora proprietárních microsoftích filtrů byla odebrána v IE 9.

Nejspíš se opravdu hodnoty ve filter přepisují.
Tipuji, že příčina problému bude jinde.
quatzael
Profil
1Pupik1989:
Zkus postupně ty filtry zakomentovat.
To nevím co to je? Myslíš ty hvězdičky *?

margin:
Tipuji, že příčina problému bude jinde.
A jak tedy na to? Všiml jsem si, že v některých ukázkách jsou přímo <svg> tagy.
Fisir
Profil
Reaguji na quatzaela:
To nevím co to je?
Zakomentuješ to obalením do /* a */.
quatzael
Profil
Fisir:
Jo, jasně já jsem pak myslel na něco jinýho..

Zkoušel jsem to všelijak zvlášť, ale nefunguje to.
Chamurappi
Profil
Reaguji na margina:
Podpora proprietárních microsoftích filtrů byla odebrána v IE 9.
Myslím, že nebyla. Tuším, že až desítka podporu většiny z nich zrušila (krom těch, které se často používají, jako je třeba Alpha) a to tak, že nefungují ani ve starších režimech.


Reaguji na quatzaela:
Mně ukázka od 1Pupika1989 v Exploreru 10 funguje. Nemáš zapnutý kompatibilní režim (tedy režim Exploreru 7)?


Reaguji na 1Pupika1989:
Pokud má někdo IE6, tak to zkuste.
Funguje.
quatzael
Profil
Chamurappi:
Mně ukázka od 1Pupika1989 v Exploreru 10 funguje. Nemáš zapnutý kompatibilní režim (tedy režim Exploreru 7)?
No, mě to v IE10 teda nefunguje. IE10 mám standardně nainstalovaný. Ale právě v tom kompatibilním režimu (Exploreru 7) mi to funguje. Zvláštní..

Ještě někomu to tady jede v IE10 neboje problém opravdu jen u mě?
1Pupik1989
Profil
Mělo by to samozřejmě jít ve všech prohlížečích s podporou css3. IE 10 tuším css3 podporuje.
quatzael
Profil
1Pupik1989:
Jak je to možný?
Já mám verzi IE10: 10.0.9200.16721
Verzi aktualizace: 10.0.10 (KB2879017)

Nejnovější aktualizace se mi tam pravidelně automaticky stahujou. Je možný, že bych měl někde v nastavení prohlížeče to CSS3 vypnutý?
« 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: