Autor Zpráva
poustevnik
Profil
na pevném pozadí bg.jpg, které se neroluje ale jeho šířka se mění podle okna chci dát div "blur element" který by překrytou část pozadí rozmazal.

Netušíte někdo jak na to?

Je dobré ještě zmínit, že obrázek bg.jpg je proměnlivý a bude se načítat z databáze, kam se dostane bez zásahu člověka. Datová nenáročnost tohoto efektu je hodně rozhodující.

Pro snazší představivost koukněte na obrázek:



Jak má vypadat element blur?, v případě že to přímo nejde, tak jak tuto dynamickou záležitost nasimulovat?
Chamurappi
Profil
Reaguji na poustevnika:
Rozmazat si to budeš muset sám v grafickém editoru a dát to pak na pozadí s background-position: fixed.
Edit: V dotazu původně nebylo, že to má rozmazávat sám element.
poustevnik
Profil
Chamurappi:
Rozmazat si to budeš muset sám v grafickém editoru a dát to pak na pozadí s background-position: fixed.“ Tohle neřeší, nejspíš ani část úkolu.

1. obsah a element se rolují, mění se tedy jeho poloha (poloha rozmazané výseče se mění)
2. obrázek se neroluje, ale mění se jeho šířka. (mění se rozlišení pozadí v rozmazané výseči)
3. obrázky na pozadí se budou měnit automatickým načítáním z databáze (bez zásahu člověka - tedy bez možnosti úpravy v grafickém editoru)
Plaváček
Profil
poustevnik:

Obávám se, že současnými prostředky, které dává CSS, jde o úkol neřešitelný. Zvážil bych tím pádem nutnost jeho nasazení.
Chamurappi
Profil
Reaguji na poustevnika:
Jedničku fixní pozadí řeší.
Dvojku jsem moc nepochopil, připadá mi stejná jako jednička.
Trojku jde udělat bez zásahu člověka, rozmazanou verzi může jednorázově vyrobit a uložit něco na serveru.


Reaguji na Plaváčka:
Hlavně by to zbytečně zatěžovalo počítač návštěvníka. Ke zbytečnému opakování úkonů, které mají vždy stejné výsledky.
poustevnik
Profil
Chamurappi:
Reaguji na poustevnika:
Můj dotaz se vztahuje čistě k tomu efetku blur. Fixní pozadí a plovoucí div samozřejmě není problém dát dohromady. Jak plně automaticky vyměnit obrázek na pozadí vyřeším taktéž - měnit se bude cca 4x denně, takže se snad ani není třeba bát toho zatěžování počítače.

Plaváček:
toho se právě bojím, ale nechce se mi věřit ... :-) původně mě napadlo, že by šel použít normální Webkit Filter blur , nějak ho ohraničit a přiřadit mu stejnou polohu, jako má ten div s obsahem.

Existuje css funkce (nebo jiná), která umožňuje zobrazit jen výřez obrázku - dynamicky v závislosti na poloze jiného elementu? Pokud by to bylo v závislosti na myši (hover) tak by to zřejmě šlo, ale jde to udělat i jinak?
rafej
Profil
Myslím, že Chamurappiho původní nápad není uplně od věci. Chce to jen upravit.

1) Vytvořit tu rozmazanou vrstvu třeba jako téměř průhledný obrázek s barevným přechodem mezi bílou a libovolnou barvou, která bude označena jako průhledná a do další vrstvy obrázku aplikovat rozostření nebo masky.

2) Pohyblivému divu nastavit tuto rozmazanou vrstvu jako obrázek na pozadí + upravit z-index

Mě to funguje, v rychlosti jsem schopna nasimulovat něco jako mléčné sklo, jen by bylo potřeba si pohrát s tou obrázkovou simulací rozmazané vrstvy, aby byla co nejprůhlednější.
Fisir
Profil
Reaguji na poustevnika:
Téma rozmazání se tu již řešilo, a Str4wberry rozmazávání hezky popsal. Pravděpodobně tedy budeš potřebovat něco takového.
Chamurappi
Profil
Reaguji na poustevnika:
měnit se bude cca 4x denně, takže se snad ani není třeba bát toho zatěžování počítače
Měnit rozmazaná plocha se bude při každém posunu stránky, což je neefektivní a hardwarově náročné. Procedurální grafika je na vykreslování vždy náročnější než plácnout někam texturu. Vygeneruj si rozmazanou verzi pozadí na straně serveru, návštěvníkův stroj netýrej.

Existuje css funkce (nebo jiná), která umožňuje zobrazit jen výřez obrázku - dynamicky v závislosti na poloze jiného elementu?
Ano, background-attachment: fixed. Jak jsem už psal… i když koukám, že jsem omylem napsal background-position, nevím, proč se mi pořád pletou. Pozice fixovaného pozadí se vždy vztahuje k celé stránce, i když je na menším (a třeba i posouvaném) elementu.


Reaguji na Fisira:
Ve starším Exploreru ve tvé ukázce žádné rozmazání nevidím. V mobilním také ne, ani v devítce, ani v desítce.
Dave159
Profil *
Fisir:
V mobilním chromu take rozmazani nevidim.
poustevnik
Profil
rafej:
Vytvořit tu rozmazanou vrstvu třeba jako téměř průhledný obrázek
To mě taky napadlo, ale pokud nastavím div s částečně průhledným pozadím, skrz který bude prosvítat pozadí, neudělá to ten efekt rozmazání o který mi jde. Ale nejspíš správně nechápu tu část zadání s aplikací rozostření masky. Chtělo by to příklad.

Fisir:
Téma rozmazání se tu již řešilo
Já ani tak neřeším samotné rozmazání, jako spíš to, že hledám způsob, jak rozmazat část statického obrázku pohyblivým výřezem (něco jako je hover lupa ale ne v závislosti na myši, nýbrž na plovoucím divu)

Chamurappi:
Měnit rozmazaná plocha se bude při každém posunu stránky
To s tím zatěžováním PC klienta mě právě napadlo, jestli to nemyslíš tak, že se to nebude generovat při rolování průběžně ... takže to opravdu docela blbé je.

Takže jako alternativa náhrady fce blur mě napadl postup následující:

1. na straně serveru automaticky vygenerovat rozmazanou kopii name-blur.jpg nově nahraného obrázku name.jpg (to by mělo jít)
2. obrázek name.jpg napozicovat pomocí css na střed s background-attachment: fixed a roztáhnout přes celé okno prohlížeče při zachování poměru stran (s tím už mám trochu potíž)
3. vytvořit překryvný - vnořený div rolovací s menší šířkou a výškou a nastavit mu jako pozadí ten upravený obrázek name-blur.jpg, ale pouze tu výseč, která odpovídá aktuálnímu překryvu divu a obrázku name.jpg (a s tím si opravdu rady nevím)

Bylo by možné použít tento postup, především mě zajímá bod 3 - zda to jde a jak to udělat.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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