Jak vytvořit rozmazané pozadí u fixní hlavičky?

Stalker:
V CSS sa to dá len cez backdrop-filter, ten má ale zatiaľ naozaj minimálnu podporu - len Safari.
Videl som aj riešenie v JS, ale to bolo naozaj výkonovo náročné čize tiež neprichádza do úvahy.
Takže jediná možnosť je si to pozadie dopredu pripraviť v nejakom grafickom programe.

Stalker:
Png síce podporuje priehladnosť, ale nedokáže obsah pod sebou rozmazať, musíš si teda vytvoriť obrázok ktorý rozmažeš.

Fleš, Illustrátor i CSS umí obrázek pomocí opacity zprůhledňovat. Nechce se mi věřit, že to neumí Fotošop.

Taurus:
Jak si takové zprůhlednění a rozmazání pomocí opacity představuješ? Nevím, jak v grafických editorech, ale konkrétně v CSS pomocí opacity?

Jen tak mimochodem, Fleš a Fotošop, za to bys zasloužil pár facek. Příště můžeš rovnou místo CSS použít KS, Kaskádové styly.

Stalker:
Ak som to správne pochopil, tak rozmazanie ti bolo radené spraviť v nejakom grafickom editore, teda prehliadač by ho dostal už „rozmazaný“.

Tomášeek:
Jak píše _es, rozmazání je jeden efekt, zprůhlednění druhý.

Jestli chceš za takové blbosti rozdávat facky, tak zvaž doktora, brzo ti praskne cévka. Ale chovat se slušně ti doporučuju každopádně. A porovnávat slovo se zkratkou je fakt mimo.

Stalker:
„Udělat klasickej obrázek s průhledným pozadí není problém. Ale nepřišel jsem na to, jak vytvořit poloprůhlednej obrázek, kterej bude rozmazenej.“

Taurus:
„Fleš, Illustrátor i CSS umí obrázek pomocí opacity zprůhledňovat. Nechce se mi věřit, že to neumí Fotošop.“


Taurus:
Reaguješ jen na část otázky, to jsi si ji mohl ušetřit, navíc Stalker ví, že opacita jde udělat, ptal se na něco jiného.

Stalker:
Na jednom eshopu jsme potřebovali to samé, můžeš se smířit s tím, že to nepůjde skoro nikde a uděláš to pomocí CSS filteru, nebo si obrázky rozmažeš v grafickém editoru, taky mi není znám jiný způsob.

Velmi jednoduchého rozmazání se dá dosáhnout tak, že dáš dva stejné obrázky na sebe, horní zpoloprůhledníš a posuneš o pixel nějakým směrem. Komplexnější rozmazání bude vyžadovat vice vrstev obrazků, posunů a úrovní průhlednosti. Samozřejmě to není tak mocné jako to, čeho dosáhneš v grafickém editoru, ale základní rozmazání by tím mělo jít dosáhnout.
Pak už by mělo jít jen o synchronizaci posouvání se scrollováním.

Stalker:
Ještě můžeš prozkoumat tenhle jQuery plugin , autor píše


Browser Support:
Chrome
Firefox
Safari and Safari Mobile (iOS)
IE6, IE7, IE8 - blur is supported without animation (need to omit "duration" property in those browsers to make this plugin work, the problem will get fixed when Velocity.js issue gets fixed)
IE9, IE10, IE11
Android browsers
Possibly, more. Please let me know if some browser doesn't work

Taurus:
„Jak píše _es, rozmazání je jeden efekt, zprůhlednění druhý.“
Já vím, že to jsou dva různé efekty. A také vím, že Stalker bude pravděpodobně vědět, jak zprůhlednit.

Proto jsem také na ten tvůj příspěvek reagoval. Řeší se tu, jak rozostřit, ale ty radíš, jak zprůhlednit. Rozostření s opacitou nemá nic společného, proč jsi jej tedy uváděl, když na to hlavní jsi odpovděl nechtěl/nedokázal?

Stalker:
Tak polopate:
1. Otvoríš si obrázok a adekvátne si ho orežeš
2. Aplikujes na neho filter Gaussian blur - s cca 50 polomerom - resp. podľa potreby
3. Vrstve zmenšíš prehliadnosť na požadovanú hodnotu a toto celé uložíš ako PNG

Následne to dáš na web.

Stalker:
Tak to nemáš inú možnosť ako to dať bez rozmazania s tým, že jedine Safari to bude mať rozmazané. Niečo ako:

Stalker:
Ja osobne neviem o tom, že by sa to v Photoshope dalo, ale to samozrejme neznamená že sa to nedá :)

Stalker:
Vlastně přesně takto by to mělo vypadat :

Vpravo odrážka menu a ta špína vlevo je už nějakej content na stránce. A jak budu scrollovat dolů, tak se to bude měnit

A photoshop by neumel vytvorit nejakou tu masku, kterou bych vlozil jako background-image? Nejaky rozmazany bily pruhledny pngcko?

Aj keby si použil nejaký obrázok s textúrou "blur" ktorý by mal nastavenú priehľadnosť, tak by si nedosiahol požadovaného efektu. Ide o to že ty potrebuješ rozostriť samotný grafický zdroj - text, nie vrstvy nad tým. Keby bola rozostrená vrstva nad tým, tak vrstva(text) pod tým by bol stále ostrý. Nie som ale grafik, možno sa mýlim. Len uvažujem nad tvojím riešením.

Aký typ obsahu je ten ktorý chceš mat rozmazaný ? Ak ide o statický obsah (žiadny uživateľsky vkladaný obsah), tak riešenie by mohlo byť to že si vytvoríš grafický snapshot z celého obsahu(bez hlavičky) a výsledný obrázok rozmažeš v grafickom editore. Následne tento obrázok použiješ ako background-image, ktorý je vrstva nad pôvodným obsahom, ale vidieť ju iba v oblasti fixed hlavičky...no neviem či je v čistom CSS možné to nastaviť, ale za pokus by to stálo. Samozrejme nevýhoda tohto riešenia by bola, že pri každej zmene obsahu by si musel vytvárať nový rozmazaný obrázok.

Dusann:
„Ak ide o statický obsah (žiadny uživateľsky vkladaný obsah), tak riešenie by mohlo byť to že si vytvoríš grafický snapshot z celého obsahu(bez hlavičky)“
Takto určitě ne. Nikdy nevíš (ani při stejném rozlišení), jestli statický text "Dobrý den, vítáme Vás na našich stránkách XY a doufáme, že se Vám tu bude líbit" zabere řádek, dva, nebo tři. To, že tobě se text vejde na řádek a půl neznamená, že já jej nemám na 1 nebo na 3. Tvoje metoda pochopitelně není použitelná v praxi, na délku/velikost/vyhlazení/render fontu se nedá nikdy spolehnout.

Několik vrstev přes sebe navzájem posunutých dokáže efekt rozmazání vytvořit. Živá ukázka Má to ovšem spoustu nedostatků. Ale třeba to někoho inspiruje k vytvoření lepší verze.

Inak samotný text je možné rozostriť pomocou text-shadow. Ale neviem či to niečomu pomôže v kontexte úlohy v tejto téme.

Živá ukázka

Stejný problém se zde již párkrát řešil, viz Windows Aero Effect na webu - jak na to? a jak na blur na část pozadí.


Reaguji na Dusanna:
Tvoje ukázka nefunguje v žádném Exploreru, protože v něm se přenáší průhlednost textu i na stín. Spolehlivější řešení je dostat text pryč (třeba vodorovně posunout o -100vw mimo obraz) a jeho stín vrhnout na původní místo (na pozici 100vw 0).
Kdyby se měly rozmazávat jen texty, šlo by takto vytvořit skoro ideální řešení, kde by v hlavičce byla správně posunutá kopie obsahu, ze které by byl vidět jen stín. Říkal jsem si, že to večer zkusím vyrobit, ale když už jsi vyzradil pointu tohoto triku, tak se mi do toho nechce :-)
Na rozmazání (kopie) obrázků by šel použít <canvas>. Problémem by bylo všechno ostatní (okraje, pozadí, stíny, videa, formulářové prvky atd.).

Když už uvažuji o kopii obsahu, málo spolehlivé řešení, ale pořád kompatibilnější než -webkit-backdrop-filter, by bylo rozmazat tu kopii filterem (a -webkit-filterem atd.).
V Mozille by se nemusela používat kopie kusu DOMu, ale -moz-element.


Reaguji na Stalkera:
„Potřebuji rozmazávat všechno, co je pod hlavičkou.“
Nic lepšího, než dosud nastíněné varianty, neexistuje. Všechny budou pravděpodobně větší či menší žrouti výkonu, takže bych se jim na tvém místě raději vyhnul.

„A photoshop by neumel vytvorit nejakou tu masku, kterou bych vlozil jako background-image?“
To není otázka editoru, žádný z běžně podporovaných formátů obrázků tohle neumí. Formát PNG zná jen průhlednost jednotlivých pixelů, žádné chytřejší efekty nepodporuje.
Žebráš opakovaně o zázrak… a jak vidíš, jakékoliv kompromisní řešení si navzájem s chutí zkritizujeme :-)

Stalker:

Uplne jednoducho takto!
jsfiddle.net/1x60mmte/2

pismo si uz vies napoziciovat aj sam.

M.

Monkeys:
Jemu ide ale o to aby bol rozmazaný obsah podtým keď bude scrollovať stránkou...

Toto si skúšal? Object moved alebo ešte toto: Živá ukázka