Gaussian blur met CSS

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Eschwin Moerkerken

Eschwin Moerkerken

21/01/2016 10:08:33
Quote Anchor link
Goedemorgen,

Een tijdje geleden heb ik wat research gedaan of een soort van gaussian blur background mogelijk is met CSS. Ik ben hier op een gegeven moment mee gestopt omdat dit een soort project was voor een goede bekende van mij en dit project waarschijnlijk niet meer door gaat. Toch wil ik weten of het iemand anders hier wel is gelukt met alleen CSS, en zo ja, hoe ?

Dit is wat ik wil bereiken:
Afbeelding

Dit is wat ik er uiteindelijk maar van gemaakt heb:
Afbeelding

het gaat dan ook om de witte balk. Het is mij op een gegeven moment wel gelukt om deze balk een beetje blurry te maken doormiddel van CSS maar op de manier die ik toen gebruikte (die ik onderhand al niet eens meer weet) waren de hoeken niet blurry en werd de content in de balk ook blurry.

Het effect wat ik wil nabootsen komt van de overlay van iOs control center, welke je krijgt te zien als je van onder naar boven swiped.

Voorbeeld:
Afbeelding

TL;DR
Wanneer je kijkt naar de afbeeldingen hierboven ben ik nieuwsgierig hoe je een gaussian blur effect kunt creëren (het liefst alleen met CSS(3)) op een background (met opacity natuurlijk).
 
PHP hulp

PHP hulp

22/12/2024 11:05:51
 
Danny von Gaal

Danny von Gaal

28/01/2016 15:06:18
Quote Anchor link
Hallo Eschwin,

Heb je al eens naar de filter gekeken? https://css-tricks.com/almanac/properties/f/filter/
Hiermee maak ik bijvoorbeeld een afbeelding zwart/wit en dit kent ook een Blur effect.

Het enigste is dat Internet Explorer niet alle types ondersteund. =/
 
Randy vsf

Randy vsf

28/01/2016 15:15:17
Quote Anchor link
Danny von Gaal op 28/01/2016 15:06:18:

Het enigste is dat Internet Explorer niet alle types ondersteund. =/


Internet explorer zijn fixes voor. Kijk vooral eens in eerdere topics over dit onderwerp. Heb geloof ik nog geen week geleden een antwoord op een soort gelijke vraag gepost.
 
Eschwin Moerkerken

Eschwin Moerkerken

28/01/2016 20:20:33
Quote Anchor link
Die effecten heb ik al eens geprobeerd @danny von gaal, ik bereik alleen niet het gewenste resultaat hiermee. Wat er bij mij gebeurd is dat de hoeken niet net zo blurry worden als in bijvoorbeeld het midden van de balk.

Toevoeging op 28/01/2016 20:29:47:

@Randy vsf
Je bedoeld dit topic neem ik aan?
Ik ga eens het een en ander proberen van het weekend, bedankt! :-)
 
Randy vsf

Randy vsf

28/01/2016 21:37:26
Quote Anchor link
Hier is er nog een topic erover.

Ik heb een voorbeeld fiddle in elkaar gezet met een voorbeeld waar je 2 canvas elementen over elkaar plaatst.
Gewijzigd op 28/01/2016 21:37:46 door Randy vsf
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.