i wonder how to create blur effect such as ios7? not opacity.
only option i see is photoshop
You can put this one in the Custom Code section in the site dashboard in the second field before </body>
.
<style>
.datclassss {
filter: blur(5px);
// Browser Specific
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
</style>
So Iāve been trying this and I feel stupid because itās not working. I literally copied the code, but it in the custom code and then changed .datclassss to my class which is .backgroundimage and itās just not blurring anything. Any insight would be appreciated.
I would love to use this but cant get it to work? Is it possible to tell a bit more?
Dan
mine is working.
<style>
.blur {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
</style>
to name the class āblurā.
Hey ZFE, thanks for the reply. Perhaps what I want is not right, please let me explain. When I use your code that works, but what I was hoping to do was to have a background image and then a div that sits infront of it and blurās only where that div is. I donāt want the entire background imaged blurred. Is this possible? Iāve tried it with a blank div, but couldnāt get it to work, so I added a fill colour, still didnāt work, tried uploading a transparent png into the div to blur it and that didnāt work either.
Any help would be appreciated. Cheers, Michael
i know this is old, but I found two things regarding thisā¦
- apparently order matters, I mostly use Chrome and I couldnāt get Blur to work unless -webkit was first and/or plain āfilterā was last.
- background image with blurred div, hereās a link that Iām sure fits the bill:
Design Considerations: Text on Images | CSS-Tricks - CSS-Tricks
cheers,
Mike
try backdrop filter:
<style>
.blur {
background: rgba(255,255,255,.6);
-webkit-backdrop-filter: brightness(1.5) blur(4px);
}
</style>
so far, backdrop filter only works for safari.