5
cb219
6y

how hard can it be to make a section in html/css, so that it has a nice blurry background and a fancy title on it??😩
damn i've lost so much knowledge about html/css/js i can look up everything again😭 ... and i don't even know what to search for, that's how bad i have become😭😭

Comments
  • 1
    You mean like

    filter: blur(5px);

    ?
  • 0
    @joycestick thanks for the suggestion but already got that far😅
    my problem was how to make a blurry background image and put text on it without blurring out the text too
    tried it using 2 sections like
    <section background></>
    <section text></>
    mind you, that's not the actual code, just to show the idea

    needless to say, didn't work well😅
    hope a little tutorial i've found helps😅
  • 1
    Have you tried applying the background and filter to the :before pseudo-element of the section? That way it wouldn't apply to the section's children and you could position that pseudo-element as you see fit within the section, and all children would be rendered on top of it by default.
  • 0
    I was trying to do something like this before, I wanted a video playing with 100vh/vw and a centered div that would blur the video behind it, and some text over the blurred div. Shuts super annoying to try and do without resorting to webgl
  • 0
    @ethernetzero not sure whether i got this right what you mean but i might try it out tomorrow (would you be so kind to explain it further? i just have some text and the background behind it)
    have actually found an article on quora, which works with position relative and position absolute
    i'll give both a shot, let's see what works better but your idea with :before could be promising 🤔
  • 1
    What about something like this: https://codepen.io/joycestick/pen/...
  • 0
    @joycestick i guess you just solved my problem😊🤩
    thanks so much🤗
    i tried it that way but i surely fucked smth up, as it clearly wasn't like that🙄
  • 1
    @cb219 Sure, I've made a JSFiddle for you to check out:

    https://jsfiddle.net/7gxLnrqy/27/

    Would that be close to what you want?
  • 0
    @ethernetzero oh yeah jsfiddle on the phone, what a joy🙄😅
    i'll look into it when i've got a bigger screen😎
  • 0
    @ethernetzero Nice solution. Mine was a bit too divy.
  • 0
  • 0
    no problem, by the way jsfiddle doesn't seem to work for me
    i can see the html code but that's it, so thanks for sharing via codepen 😊
  • 0
    @cb219 No problem at all.
Add Comment