I tried Blurring things in Quirky ways

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 มิ.ย. 2024
  • Let's talk about 10 different levels of blurring (Gaussian blur) in design and code.
    // Find all the codes in this CodePen collection:
    codepen.io/collection/vBPmZQ
    // ✨ Become a supporter:
    ko-fi.com/juxtopposedme
    // ✨ Let's connect:
    Twitter: / juxtopposed
    CodePen: codepen.io/Juxtopposed
    Dribbble: dribbble.com/juxtopposed
    Github: github.com/juxtopposed
    // Helpful resources:
    gist.github.com/dmnsgn/76878b...
    www.cs.toronto.edu/~guerzhoy/...
    Thanks for watching!
    ---
    #uidesign #blur #gaussian
    Timestamps:
    00:00 Blur History
    01:57 Level 1
    02:18 Level 2: Backdrop Blur
    02:45 Level 3: Gradient Blur
    03:19 Level 4: Shadows
    03:56 Level 5: Clip-path
    05:24 Level 6: SVGs
    06:39 Level 7: Shaders
    07:31 Level 8: Shader Effects
    07:56 Level 9: Animation
    08:29 Level 10: ?
  • บันเทิง

ความคิดเห็น • 396

  • @juxtopposed
    @juxtopposed  3 หลายเดือนก่อน +854

    hi.

  • @alian9216
    @alian9216 3 หลายเดือนก่อน +1732

    Did I just get Rick Scrolled?

    • @saiv46
      @saiv46 3 หลายเดือนก่อน +85

      Damn, I least expected this channel to rickroll me

    • @atmosph
      @atmosph 3 หลายเดือนก่อน +57

      @@saiv46 rickscroll*

    • @juxtopposed
      @juxtopposed  3 หลายเดือนก่อน +245

      idk what you’re talking about.

    • @yusrpersonal
      @yusrpersonal 3 หลายเดือนก่อน +10

      @@juxtopposed lol

    • @PizzaDudeThe1st
      @PizzaDudeThe1st 3 หลายเดือนก่อน +2

      Yes u did

  • @mikhalpalych
    @mikhalpalych 3 หลายเดือนก่อน +557

    As a front end dev, i can say this is just jawdropping. I didn't even know about some of listed things

    • @rafi-leigh
      @rafi-leigh 3 หลายเดือนก่อน +7

      Same!

  • @TheRyDesigns
    @TheRyDesigns 3 หลายเดือนก่อน +411

    The way you present web design in such a simple format hits my designer brain in all the right spots, these videos rock! keep creating awesome stuff! thank you!

    • @juxtopposed
      @juxtopposed  3 หลายเดือนก่อน +32

      thank youuu!

  • @rahiqueosman
    @rahiqueosman 3 หลายเดือนก่อน +317

    Im amazed how much information this small video has without being boring.
    Basically you did a crash course on modern web design.
    loved it

  • @advaitbhore
    @advaitbhore 3 หลายเดือนก่อน +57

    OH MY GODDD... I've been searching that linear gradient effect for AGES, AGES I tell you !!
    and I found it in this video while randomly scrolling through youtube. I feel so relieved, but so frustrated at my self for not searching the right place at right time...
    LIFESAVER. ❤❤

    • @YosefReborn
      @YosefReborn 2 หลายเดือนก่อน +2

      It is also cool when instead of the blur fading the blur just getting less blurrier

  • @greatape2791
    @greatape2791 3 หลายเดือนก่อน +68

    Only Juxtopposed can make the concept of blurring so clear, another banger in the books

  • @tastetherainbow4600
    @tastetherainbow4600 2 หลายเดือนก่อน +34

    oops i accidentally learned something.

  • @RandomWebDev
    @RandomWebDev 3 หลายเดือนก่อน +50

    The level 5 clip path section is actually so awesome!

  • @SashenMe
    @SashenMe 3 หลายเดือนก่อน +39

    Simply amazing how you explained the math behind blur.

  • @pbjellysand
    @pbjellysand 3 หลายเดือนก่อน +7

    I was kinda expecting this to be blurring like censoring stuff in quirky ways but still I was not dissapointed, great video :)

  • @orest58008
    @orest58008 3 หลายเดือนก่อน +4

    I wish there was an option to turn off blur globally in browsers, it eats so much resources for nothing

  • @atmosph
    @atmosph 3 หลายเดือนก่อน +12

    i love how you can express a lot of information in such a pleasant way! thank you SOOOOOOOOO much for all your efforts!

  • @shivamnagi
    @shivamnagi 3 หลายเดือนก่อน +10

    It's wild to imagine the amount of time she spends animating all of this in After Effects

  • @berni8k
    @berni8k 2 หลายเดือนก่อน +5

    This is one of the reasons Chrome eats so much RAM and other resources.

  • @OfficalRowen
    @OfficalRowen 2 หลายเดือนก่อน +5

    I don't dabble in website building or code but I thoroughly enjoyed this video still. The way you explained things as well as the visuals (especially the cat memes :] ) was just all around super engaging

  • @h7kz
    @h7kz 3 หลายเดือนก่อน +8

    At this point backend doesn't seem that bad

  • @0r94n1z3r
    @0r94n1z3r 3 หลายเดือนก่อน +3

    Wow! Just WOW! Maybe the best simple lecture/guide i've ever seen!

  • @FeeshUnofficial
    @FeeshUnofficial 2 หลายเดือนก่อน +2

    This is an insanely good video

  • @snappycapybara
    @snappycapybara 3 หลายเดือนก่อน +7

    this was such a pleasure to watch! I mainly do backend dev but I've been digging more into frontend and design, and this is by far the channel I like the most :)

  • @Goddeh1
    @Goddeh1 3 หลายเดือนก่อน +23

    Should've gone to Specsavers before becoming a web designer.. Jokes aside, thanks for this clean walkthrough of effects like this, they're highly motivational! 🙌

  • @smansab59
    @smansab59 2 หลายเดือนก่อน +1

    Your content is so simple, yet presented dynamically. I watched a whole a*s video about S-tier blurring effects in the web-designing while being a Mechanical Engineer. And I didn't even skip a second or felt lost at any point. ❤🙌🏼

  • @timothychinye6008
    @timothychinye6008 3 หลายเดือนก่อน +2

    Make more web design videos like this and the dark mode one, it's actually extremely useful.
    Like these are often things I do anyways, but it's nice to like.. get it down on paper, so I'm not just designing my sites of a whim

  • @jaxondabac8808
    @jaxondabac8808 2 หลายเดือนก่อน +3

    watching this video at 240p gives it a whole new meaning

  • @bholmesdev
    @bholmesdev 2 หลายเดือนก่อน +1

    TIL about gradient blurs. EXACTLY what I needed for a not-ugly blurred navbar 🙏

  • @remitiras
    @remitiras 26 วันที่ผ่านมา

    I love how when you look at this video from the mobile app and not on fullscreen, there's a blur effect under the video where the title is, I'm the color of the current frame of the video.

  • @LightTheMars
    @LightTheMars 3 หลายเดือนก่อน +5

    Great resource! Just as a note though, CSS blur is computationally expensive, and you shouldn't use it in situations where the blurred content animates.
    For example, when using backdrop-blur on one element and having the backdrop move, it has to recalculate the blur every frame. Make sure to test on low-end devices when you have to do that!

  • @mrrjb9781
    @mrrjb9781 3 หลายเดือนก่อน +2

    this video is amazing, I don't even know a thing about web design and I found it extemely entertaining

  • @BadWolfNeron
    @BadWolfNeron 3 หลายเดือนก่อน +1

    You're awesome at teaching the history and importance behind these small concepts/techniques and show the magnitude of the impact mastering them can have on your creations.
    Thanks! ♥

    • @juxtopposed
      @juxtopposed  3 หลายเดือนก่อน +1

      omg glad to hear that ✨

  • @110110010
    @110110010 3 หลายเดือนก่อน

    This is amazingly comprehensive for a 9 minute video. You've shown many interesting concepts I can't wait to jump in to and try them all!

  • @Iggy2004
    @Iggy2004 3 หลายเดือนก่อน +1

    this is so helpful, thank you so much, also it's really calming to listen to your voice

  • @gojosensei7081
    @gojosensei7081 3 หลายเดือนก่อน +2

    The flow your videos have, Love it!!!!

  • @cedigasser
    @cedigasser 3 หลายเดือนก่อน +2

    This is amazing! So much good information presented in such an entertaining format.

  • @grahamothy424
    @grahamothy424 หลายเดือนก่อน

    this was the most enjoyable video that i have been craving to understand and visualize the concepts of for a very long time, you did a perfect job explaining every level, every concept, every thing. please keep doing what you are doing! :D

  • @freeeeplay
    @freeeeplay 2 หลายเดือนก่อน +1

    Also for supporting older browsers, you could also always use css @supports to do something else if blur isn't supported

  • @thepaleone2369
    @thepaleone2369 3 หลายเดือนก่อน +3

    Gonna be honest, I thought the video was about "burning things in quirky ways" and I thought I was clicking on someone's villain origin story

    • @Crinlask
      @Crinlask 2 หลายเดือนก่อน +1

      8. Orphanages

  • @jeffreyrosenkrantz
    @jeffreyrosenkrantz 2 หลายเดือนก่อน

    This video is amazing. Never have I giggled as much in a code tutorial. Very well explained

  • @ekeminh5853
    @ekeminh5853 12 วันที่ผ่านมา

    I just gone through the first 3 mins but this already blown my mind 🤯🤯

  • @TressaDanvers
    @TressaDanvers 3 หลายเดือนก่อน

    just found ur channel.
    i'm genuinely floored this is so well made.

  • @tcepsa
    @tcepsa หลายเดือนก่อน

    This was great and has inspired me to resume my journey learning about CSS. I'm currently still struggling with positioning and layout, but I'm really looking forward to spending more time on things like this!!!

  • @mistthemoth7026
    @mistthemoth7026 3 หลายเดือนก่อน

    i love your videos so much, they are so informative while still being very entertaining :)) thank you for uploading !

  • @thisrandomdude_
    @thisrandomdude_ 2 หลายเดือนก่อน +1

    Awesome video, and I absolutely love the way you narrate!! Your voice is a joy to listen to bwahahahahah

  • @Tenelia
    @Tenelia 3 หลายเดือนก่อน +1

    Man, I wrote a whole paper on this back in 2009 for the Apple ecosystem. It was already amazing what could be accomplished on ancient hardware back then, but reviewing this in 2024 is invigorating.

  • @triceratops3
    @triceratops3 14 วันที่ผ่านมา

    hearing about the history of blurring things really makes me grateful we have the technology to be able to blur an image and adjust it to how we want

  • @rach3897
    @rach3897 26 วันที่ผ่านมา

    I'm flabbergasted!! this is such precious gold content!! instant subscribe!

  • @thedctr
    @thedctr 3 หลายเดือนก่อน

    wow, first ever person who made web-design intresting for me, thank you!

  • @lukasandersson
    @lukasandersson 3 หลายเดือนก่อน

    It's amazing how you always manage to blow our minds!!

  • @myferonyoutube
    @myferonyoutube 3 หลายเดือนก่อน

    I've been watching your videos for a while, I'm now subscribed, thanks for such great content.

  • @mr.guydvir
    @mr.guydvir 3 หลายเดือนก่อน +1

    Your content is super top notch. It's awesome to see your audience growing! It makes me feel like things work the way they should on TH-cam 😊

  • @someonequinof
    @someonequinof 3 หลายเดือนก่อน +1

    that surface blur on patrick bateman is nightmare fuel man

  • @SquirrelTheorist
    @SquirrelTheorist 2 หลายเดือนก่อน +1

    3:17 while it looks cool the first time seeing it, I really wish less websites used this method. It's really Apple-y, for the lack of a better description, and it lacks that professional edge that I like about more clean-cut displays.
    Excellent blur tutorial though, I absolutely love this style of teaching.

  • @th3_sull1van
    @th3_sull1van 3 หลายเดือนก่อน +2

    I LOVE the Acerola editing style, great video!

    • @AruminDes
      @AruminDes หลายเดือนก่อน

      IKR!!!

  • @MrYllie
    @MrYllie 3 หลายเดือนก่อน

    No way I learned this much in

  • @wihhdalp3470
    @wihhdalp3470 2 หลายเดือนก่อน

    Amazing vid, really liked ALL of it (especially the memes)

  • @mikey-qo8sh
    @mikey-qo8sh 3 หลายเดือนก่อน

    amazing editing as always, great content

  • @arda5157
    @arda5157 3 หลายเดือนก่อน

    I really like your contents. they are so educational and the best part of it, as others have said, they are never boring

    • @juxtopposed
      @juxtopposed  3 หลายเดือนก่อน

      happy to hear that!

  • @mrschoko565
    @mrschoko565 3 หลายเดือนก่อน

    I love the blur from apple it looks so good I get the illusion that it’s actually not focused and it looks really good

  • @nitroflap
    @nitroflap 3 หลายเดือนก่อน +2

    Yet another useful design video. Good stuff!

  • @NiceHyper01
    @NiceHyper01 3 หลายเดือนก่อน

    This was such a good video. Keep up the great work!

  • @DrRawley
    @DrRawley 2 หลายเดือนก่อน +1

    I like the way you say "for-mew-la"

  • @tanksfornothin
    @tanksfornothin 3 หลายเดือนก่อน

    these videos are disgustingly good

  • @wlockuz4467
    @wlockuz4467 3 หลายเดือนก่อน +2

    As a dev this actually makes me excited about design. Usually the designs I deal with are the manifestation of marketing politics lol

  • @andreic048
    @andreic048 3 หลายเดือนก่อน +1

    You have a nice voice and you explain things very well. Good job!

  • @carlosdanielcosta2987
    @carlosdanielcosta2987 3 หลายเดือนก่อน

    I'm nerding about blur for 4 straight weeks, and know this, I'd like to thank the algorithm and you for this amazing video.

  • @AlexFabrique
    @AlexFabrique 2 หลายเดือนก่อน

    Great redesign, wonderful presentation, both clear and entertaining. Lovely!
    Obviously I wished IMDB would do that, but in the meantime I had a great time watching your video and I might take this format as an inspiration for a future UI/UX redesign!
    Keep up with the good work :)

  • @whmsft
    @whmsft 3 หลายเดือนก่อน +1

    Pretty informative vid... (also, the voice is really, REALLY sweet)

  • @arijitRC7
    @arijitRC7 2 หลายเดือนก่อน +1

    As a backend developer and good UI admirer this is like god level to me.

  • @cloudsarefluffy3359
    @cloudsarefluffy3359 2 หลายเดือนก่อน +1

    i thank you for the disclaimer about optimizing at the end. i don't see it enough. my poor poor HP Laptop 15-bs0xx cant handle some websites, and it's a real shame.

  • @NomedoLeo
    @NomedoLeo 2 หลายเดือนก่อน

    Finally someone with the love of blur!!! I thought I was alone. It’s so satisfying

  • @jaythecoderx4623
    @jaythecoderx4623 3 หลายเดือนก่อน

    Wow the quality of this video is insane. I'm definitely going to use this in some of my projects in the future

  • @DominicF96
    @DominicF96 2 หลายเดือนก่อน

    The clip-path one is amazing, I'll use that for sure 🔥

  • @DeonGaming
    @DeonGaming 3 หลายเดือนก่อน

    Getting rickrolled on Saturday morning is not something I've expected. The video has energy and is generally entertaining even for people who already knew the content. Thank you.

  • @AlFasGD
    @AlFasGD 3 หลายเดือนก่อน +1

    Most of the web has not surpassed the level 3 yet, most front end devs have no idea about a lot of that stuff and it goes to show the unexplored potential the web has

    • @BfBcemat
      @BfBcemat 2 หลายเดือนก่อน

      Wat

  • @jojomondag
    @jojomondag 2 หลายเดือนก่อน

    You are just the best! Thanks!

  • @ahmedsaed26
    @ahmedsaed26 3 หลายเดือนก่อน

    The quality of the video is stunning ❤❤

  • @Aratolotl
    @Aratolotl 3 หลายเดือนก่อน

    The UI tutorial I didn't know I need!

  • @4.0.4
    @4.0.4 3 หลายเดือนก่อน +1

    Really true that you should optimize where you use it. Try your site on some friend's old android phone or an old office PC, if it runs well, it's good. As far as support goes, disable it and see if everything is still readable and usable.

  • @user-gk9ut9qc1o
    @user-gk9ut9qc1o 3 หลายเดือนก่อน

    Thanks , this is a wonderful video, I needed some inspiration :)

  • @wittywolk
    @wittywolk 2 หลายเดือนก่อน +1

    FYI Firefox limits the blur value to 100px.
    I learned it the hard way while testing a website project a little bit too late... and had to redo a lot of SVG with blur applied to be blurred, small PNGs (small because they'll also get blurry due to scaling them up) with extra CSS blur on top.
    Hmmm... Filter within the SVG code you say... I don't remember if I tried it or not, but I remember having problems with using blurred in Figma SVG so if it's the same then it's also limited. I guess at least.

  • @OkAnup
    @OkAnup 3 หลายเดือนก่อน +1

    Your voice is so soothing 😊

  • @igrb
    @igrb 3 หลายเดือนก่อน

    Absolute banger as always

  • @frub
    @frub 2 หลายเดือนก่อน

    just found ur channel, love it.

  • @nemegto
    @nemegto 2 หลายเดือนก่อน

    I thank the TH-cam algorithm for showing me your channel. I'm learning about UX without being bored. You could make a whole course out of these videos 😭

  • @mr_flor
    @mr_flor 11 วันที่ผ่านมา +1

    amazing vid! never new blur is so deep
    (btw, i'll recognise this heart shape anywhere, you can't use something from undertale and not expect someone to say something😈)

  • @brunoggdev6305
    @brunoggdev6305 3 หลายเดือนก่อน

    When it comes to design content, u're the absolute best imo

    • @juxtopposed
      @juxtopposed  3 หลายเดือนก่อน +1

      omg THANKS

  • @jacksonsherbertgaming4437
    @jacksonsherbertgaming4437 3 หลายเดือนก่อน

    now that you show blur i see it everywhere on my web page thats so funky

  • @davidcunha7615
    @davidcunha7615 3 หลายเดือนก่อน +1

    Your content is gold :)

  • @ahmadrufai8891
    @ahmadrufai8891 3 หลายเดือนก่อน

    Didn't know there is so much Blur can do, you really did a great job.

  • @fruitygranulizer540
    @fruitygranulizer540 2 หลายเดือนก่อน +1

    next time, we need denoising things in quirky ways!

  • @ScrollsoftheNebulaicWhispers
    @ScrollsoftheNebulaicWhispers 3 หลายเดือนก่อน

    I love you 🙈
    Thanks for your content, as always. You are the best.

  • @Fielith
    @Fielith 2 หลายเดือนก่อน

    I LOVE WHEN TH-cam RECOMMEND A GOOD CHANNEL

  • @marcusdelictus
    @marcusdelictus 3 หลายเดือนก่อน

    this was so facinating

  • @MatthewWright001
    @MatthewWright001 หลายเดือนก่อน

    Wonderful video! Super organized and entertaining :-)

  • @qdbp1717
    @qdbp1717 3 หลายเดือนก่อน +1

    Like, the videos and all is good and stuff, but I really love this voice, god damn

  • @giraty50
    @giraty50 3 หลายเดือนก่อน

    That chaotic button is really beautiful

  • @AM-zo3mk
    @AM-zo3mk 3 หลายเดือนก่อน

    I've discovered your channel on accident and it's the best accident that's ever happened to me. You've earned a new subscriber! 💖
    Also, I have a video idea...could you maybe do a video redesigning TH-cam or Facebook? 👀

  • @bensoos
    @bensoos หลายเดือนก่อน

    I also love blur over everything!

  • @E_T_31
    @E_T_31 2 หลายเดือนก่อน

    This vid is definitely in some need of mooore cat picks - keep up the good work! :)

  • @3B0.
    @3B0. หลายเดือนก่อน

    DAMN THAT'S SO GOOD AND SMART ✨✨💀

  • @eboatwright_
    @eboatwright_ 3 หลายเดือนก่อน

    Love this channel!