Gaussian blur met CSS
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:
Dit is wat ik er uiteindelijk maar van gemaakt heb:
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:
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).
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. =/
Danny von Gaal op 28/01/2016 15:06:18:
Het enigste is dat Internet Explorer niet alle types ondersteund. =/
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.
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! :-)
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.
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