Playing around with Blurs , has anyone succeeded in bluring the background? [RESOLVED]


#1

using
-webkit-filter : blur(1px)
for editor background , only blurred the text , not the background image .


#2

You cannot blur a property, you can only blur an element (and everything in it). If you want to blur a background, you have to put that background in a separate layer (e.g. in a pseudo element) and blur that.


#3

thanks a lot , any example doing that? i am new to shadow dom and pseudo elements.


#4

What you can do is this:

  • install and select the isotope-ui theme
  • for isotope-ui select the option Custom Background Color (just put it at any color, we’re just using this to make a number of panels transparent)
  • then put this in your stylesheet:
body {
    background: transparent !important;
    &:before {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        bottom: -50px;
        left: -50px;
        background: url(http://imgsrc.hubblesite.org/hu/db/images/hs-2010-22-a-full_jpg.jpg);
        background-size: cover;
        -webkit-filter: blur(10px);
    }
}

(you can of course substitute your own image)


#5

I will take a look , i was trying to do it for my theme https://github.com/v3ss0n/steam-pirate-ui


#6

So what you did on Isotope was adding another pseudo element via coffeescript for bluring ?


#7

I think the Isotope requirement is just there to set a transparent background to the correct elements. The &:before part in the snippet above is the pseudo element.

For your theme, you should set the blur on the element you set a background-image on :smile:


#8

Thanks ! i gonna try .


#9

thanks a lot! it works

i want to understand why this is necessary? removing it dosen’t work at all.

position: absolute;
        top: -50px;
        right: -50px;
        bottom: -50px;
        left: -50px;

#10

i want to understand why this is necessary? removing it dosen’t work at all.

What it does is stretch the background to cover the parent element completely. It’s more reliable than just saying width:100%; height:100%; and it allows negative values (-50px) to stretch it beyond the parent element. This is required because at the edges of the image, white is mixed in with the image to make the blur, creating a gradient. So to make sure the blurred image covers the parent nicely, we “trim” the outer 50px.


#11

thanks alot ! thats cool!


#12

Another question,

i am trying to set blur radius via setting but i cannot select pseudo elements via coffeescript and google searches for cofeescripts are sooo rare.
I am trying this but not working. I am very very new to coffeescript

    setBlurRadius = (blurRadius) ->
        document.sytleSheets[0].insertRule("body:before 
        {-webkit-filter : blur(#{blurRadius});}"
        , - 1)

#13

I don’t think you can reach pseudo-elements (:before) via javascript, but you should be able to insert a style element into the dom. That’s a bit beyond what I know off the top of my head though.


#14

You can insert a style element like this :

style = document.createElement 'style'
style.type = 'text/css' 
document.querySelector('head atom-styles').appendChild style

# insert a css rule 
style.CSSRules.insertRule '... // some css', style.CSSRules.length

#15

style.CSSRules.length

this will append at the end? Neat!


#16

that is undefined .

is that style.sheet.rules ?


#17

Ah yes… I always forget about the .sheet


#18

Thanks alot man , this does the job:

        setBlurRadius = (blurRadius) ->
            style = document.createElement('style')
            style.type = 'text/css'
            rule = "body:before{ -webkit-filter: blur( #{blurRadius}px );}"
            document.querySelector('head atom-styles').appendChild(style)
            style.sheet.insertRule(rule,style.sheet.rules.length)

New version released : 0.3.0


#19

You should keep a reference to just one stylesheet, and update it as necessary with this function. That code adds a new stylesheet to the atom-styles element every time it is called.

style = document.createElement 'style'

setBlurRadius = ->
 style.sheet.insertRule ...

Also don’t forget to remove the style element from the DOM when your package (or theme) is deactivated :smile:

deactivate = ->
  style.parentNode.removeChild style

#20

Thanks a lot! Yeah i noticed a lot of style sheets being appended lol :smiley: