Autor Zpráva
Stalker
Profil
AHoj,

mám fixní hlavičku a chci dosáhnout takového efektu:

Zdrojový kód: jsfiddle.net/7y4xzugs/4

Absolutně netuším jak na to. Nemáte s tím někdo zkušenosti?
pcmanik
Profil
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
Profil
pcmanik:
Tak díky :)
Stalker
Profil
pcmanik: a nevis jak to udelat v photoshopu? predstavuju si, ze by stacil 1px, kterej bych opakoval po ose X, ale nevim, jak to v .psd vytvorit
pcmanik
Profil
Stalker:
Png síce podporuje priehladnosť, ale nedokáže obsah pod sebou rozmazať, musíš si teda vytvoriť obrázok ktorý rozmažeš.
Stalker
Profil
pcmanik:
No, to je právě ten problém. 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. Tzn, když ho pak vložím jako background do headeru, problém se vyřeší.
Taurus
Profil
Fleš, Illustrátor i CSS umí obrázek pomocí opacity zprůhledňovat. Nechce se mi věřit, že to neumí Fotošop.
Tomášeek
Profil *
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.
_es
Profil
Stalker:
Ak som to správne pochopil, tak rozmazanie ti bolo radené spraviť v nejakom grafickom editore, teda prehliadač by ho dostal už „rozmazaný“.
Taurus
Profil
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.
Kcko
Profil
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.
Keeehi
Profil
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.
Kcko
Profil
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
Tomášeek
Profil *
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?
pcmanik
Profil
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
Profil
Díky za diskuzi, co se tu rozjela. Ten obrázek je pouze ilustrační. Ve skutečnosti se snažím dosáhnout toho, abych mě fixní header (v něm by byla na pravé straně ikonka menu) a pozadí pod celým headerem bylo cca rgba(0,0,0,.2) a vše co bylo zrovna pod headerem by bylo rozmazaný.

Takže nějaké průhledné pozadí v rozmazanou maskou, či jak to říct.

Zatím mě nic nenapadlo a vytvořit v photoshopu se mi to nepovedlo


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


Jinak, ta ukázka je už nachystaná tady: jsfiddle.net/7y4xzugs/4 Jediný co tam potřebuju je rozmazat vždy ten text, co je pod headerem.
pcmanik
Profil
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:
background: rgba(0, 0, 0, 0.2);
-webkit-backdrop-filter: blur(10px);
Stalker
Profil
pcmanik:
Diky moc, lepsi nez dratem do oka :)

A photoshop by neumel vytvorit nejakou tu masku, kterou bych vlozil jako background-image? Nejaky rozmazany bily pruhledny pngcko?
pcmanik
Profil
Stalker:
Ja osobne neviem o tom, že by sa to v Photoshope dalo, ale to samozrejme neznamená že sa to nedá :)
Dusann
Profil
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.
Stalker
Profil
pcmanik, Dusann:
Díky moc :) Z toho mi vyplívá, že to prostě nejde udělat. Je teda divný, že to něco nejde, ale zatím to skutečně tak vypadá. Obsah pod tím má být samozřejmě dynamický. Budou se jistě měnit obrázky, texty.. nehledě na to, že to musí fungovat i na responziv.

Nejlepší řešení mi zatím přišlo od pcmanika, alespoň pro to safari :)
Tomášeek
Profil *
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.
Keeehi
Profil
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.
Dusann
Profil
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
Stalker
Profil
Dusann:
To je pěkný ale v tomto případě je to k ničemu. Potřebuji rozmazávat všechno, co je pod hlavičkou.
Chamurappi
Profil
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
Profil
Chamurappi:
Dík za názor :) Celá diskuze tady byla super, jsem rád, že se zde tolik lidí vyjádřilo. Nejlepší řešení přinesl pcmanik, bohužel je to dostupné zatím pouze pro Safari. Z celého toho je nejlepší řešení se tomu vyhnout. Ostatně, jakmile by bylo na stránce černé pozadí, i onen blur efekt by byl k ničemu :)
Monkeys
Profil *
Stalker:

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

pismo si uz vies napoziciovat aj sam.

M.
pcmanik
Profil
Monkeys:
Jemu ide ale o to aby bol rozmazaný obsah podtým keď bude scrollovať stránkou...
IdemeNaHavaj
Profil
Toto si skúšal? Object moved alebo ešte toto: Živá ukázka

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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