Remove Image Backgrounds With One Line Of Code From Master CSS

Поділитися
Вставка
  • Опубліковано 30 жов 2024

КОМЕНТАРІ • 87

  • @lundeveloper
    @lundeveloper  3 дні тому +7

    Don't forget to like and subscribe to the channel to watch many interesting videos about programming and web design

    • @gtfxnone
      @gtfxnone 2 дні тому

      Sir Can You Please Make A Video On Webkit

  • @alexanderauermaa7079
    @alexanderauermaa7079 3 дні тому +39

    mix-blend-mode draken has always been my fave

    • @lundeveloper
      @lundeveloper  3 дні тому

      @@alexanderauermaa7079 It's great, everyone who knows about it loves it 😍

  • @lundeveloper
    @lundeveloper  3 дні тому +6

    This video is a technical video. The scenarios in the video are just a way to help you understand how the technique works better. Once you understand the technique, you can apply it to any situation you think is appropriate

  • @y0urh0mew0rk
    @y0urh0mew0rk 3 дні тому +22

    1:55
    darken - 0
    Dr Draken - 1

    • @lundeveloper
      @lundeveloper  3 дні тому +1

      Thanks bro 😍 Luckily this editing error does not affect the knowledge in the video 😍

    • @y0urh0mew0rk
      @y0urh0mew0rk День тому

      @@lundeveloper nono, not at all. funny goofs only text-to-speech can do

  • @lundeveloper
    @lundeveloper  3 дні тому +16

    I can't believe this video is so short, it should have been 2 hours long

    • @PicSta
      @PicSta 3 дні тому +1

      If the content is worth to watch, 2h isn't a problem. Surely, shorter videos are easier to digest and watch between tasks you do daily.

    • @back2Islamyt
      @back2Islamyt 3 дні тому

      Really?How long you recorded for this one?

    • @lundeveloper
      @lundeveloper  3 дні тому

      @@PicStaJust kidding, my favorite style is short and sweet 😍

    • @lundeveloper
      @lundeveloper  3 дні тому +2

      @@back2IslamytThis video is only 4 minutes long but it actually went through many stages: ideation, design, script writing, filming, editing 😭😭😭😭

    • @back2Islamyt
      @back2Islamyt 2 дні тому

      @@lundeveloper I tried to make videos like you on my other channel, but I ended up making a simple one. Thinking and trying all the works made me give up. Maybe one day, Inshallah, as I learn every day. You deliver such quality videos ( with new concepts) regularly in a short time gap is incredible enough, I guess.🙂❤

  • @AtomicPixels
    @AtomicPixels 3 дні тому +4

    Blend mode do the same thing in this case. Just use multiple not darken. Darken literally just darkens what’s below. Multiply is is the only Blend mode that discards lightness above 254 in one of the 3 red green or blue values(254,255,255)

  • @PicSta
    @PicSta 3 дні тому +5

    L doesn't stand for Lun, it stands for legendary. You rock and all your tutorials have a high value for most people. I make websites since 20 years and never thought of using the blend-mode to remove backgrounds. Anyway, keep up the good work, brother. Catch you in the next one.

  • @zorokutend
    @zorokutend 3 дні тому +17

    Well. Since we have no control over what images the end users upload, there is still a huge chance they will upload one with a darker background than our element background. I would rather remove the image background when users upload them in the CMS and force them transparent. For example, in the recent NodeJS project, I used a library named imgly/background-removal-js. It's not perfect but solves most of my cases.

    • @lundeveloper
      @lundeveloper  3 дні тому +9

      Well, this video is a technical video. The scenarios in the video are just a way to help you understand how the technique works better. Once you understand the technique, you can apply it to any situation you think is appropriate ❤️

    • @zorokutend
      @zorokutend 3 дні тому +1

      @@lundeveloper Your technique is so good for some scenarios. For example, the client gives us a bunch of images with light background even though the background of the design is darker. This technique can save us some time (even hours) to change image's background (using PTS). Thanks for sharing your knowledge. Keep up your good work and have a nice day.

    • @benmahdjoubharoun1467
      @benmahdjoubharoun1467 3 дні тому

      Plus sometimes the user uploads products with brighter colors the worst is when it is inside of them it gives that glitchy effect ​@lundeveloper

  • @TheMetalMag
    @TheMetalMag 3 дні тому

    another very useful feature! back in 2016 they said CSS was becoming eaqual to JS and seeing it's evolution it's surely becoming the most usable stuff which makes sense HTML and CSS. thanx

  • @yourlocalhuman3526
    @yourlocalhuman3526 2 дні тому +1

    The sound affects are over the top

  • @abdullahsufyan7823
    @abdullahsufyan7823 2 дні тому +1

    I think it is not useful for the dynamic and public sites. but useful for static content. thank you💖💓

  • @derscheff8999
    @derscheff8999 3 дні тому

    I learn so much from your videos, thank you for the videos, the code, your website and everything else you make

    • @lundeveloper
      @lundeveloper  3 дні тому

      Thanks for watching my content 😍😍

  • @eslammostafa1247
    @eslammostafa1247 3 дні тому +1

    This feature is new to me. Thank you so much
    If you could make a video explaining how to handle image dimensions, I would greatly appreciate it because I'm not sure what dimensions users will use when uploading pictures, so the design may be broken.

  • @JHZehan
    @JHZehan 2 дні тому

    CSS King is back

    • @lundeveloper
      @lundeveloper  2 дні тому

      Thanks for watching my content brother 😁😍

  • @tiffari8259
    @tiffari8259 3 дні тому

    Just in time broooo holyyyy!! You're a life saverrrr!! Thanks mannn

  • @BryceDriesenga
    @BryceDriesenga 2 дні тому

    Definitely handy in some cases, but images with glass or bright highlights may pose issues

    • @lundeveloper
      @lundeveloper  2 дні тому +1

      Yes, that's why I outlined the use cases at the end of the video. A very powerful property but must be used in the right cases 😍

  • @AndreaDoimo
    @AndreaDoimo 3 дні тому

    Cool to know!
    Also what AI are you using for the voice ? Sounds great!

  • @erxulaco23
    @erxulaco23 3 дні тому

    your channel is insane

    • @lundeveloper
      @lundeveloper  3 дні тому

      There will be a lot more craziness to come 😍

  • @Ajeet_Kumar__
    @Ajeet_Kumar__ 3 дні тому +1

    A short video on mix-bland-mode: difference concept
    to change black element into white

  • @MustaPha-s4i
    @MustaPha-s4i 2 дні тому

    I love it tnx you more kip going

  • @MOINKHAN-d7c
    @MOINKHAN-d7c 3 дні тому +3

    Show how to fetch data in 2 or 3 lines (GET and POST).

    • @XTANCE
      @XTANCE 3 дні тому +1

      fetch(`url`) 1 line

  • @keitho6974
    @keitho6974 3 дні тому

    Awesome as always

  • @negazuotas
    @negazuotas 3 дні тому

    Is this ur real voice or an AI? Btw thank you soo much for everything you do, I just began learning HTML&CSS and other students are jealous of my creations already❤

    • @lundeveloper
      @lundeveloper  3 дні тому +1

      Thanks bro, I'm glad the content I create is useful 😋

    • @negazuotas
      @negazuotas 3 дні тому

      ​@@lundeveloperbelieve me, its way more then just usefull, you make everything look simple and powerful at the same time.

  • @YuvrajS_ngh
    @YuvrajS_ngh 3 дні тому

    your content is really usefull

  • @khouchanemahmoud9475
    @khouchanemahmoud9475 3 дні тому

    Cool tricks as always🎉

  • @JulioTorres-gg5ug
    @JulioTorres-gg5ug 3 дні тому

    How do you make the grid background look a little transparent. It looks super cool, I really want to learn how to do it.

  • @AlirezaSharifi-t5y
    @AlirezaSharifi-t5y 3 дні тому

    That was great!

  • @Pulsemastery
    @Pulsemastery 3 дні тому

    Keep up bro 🎉

  • @gandhirajs7055
    @gandhirajs7055 3 дні тому

    super

  • @SheriffKoder9
    @SheriffKoder9 День тому

    What do you mean by "The user uploaded an image that is not a png" ? 0:48 also when making tutorials showing a couple lines of codes can you link a very simple working example on codePen? as I was able to write it but got different results. Thanks

  • @negazuotas
    @negazuotas 3 дні тому

    Heres a thing i just thought of... How can you animate an object to do something, for example spin continiously, but when i scroll i like give it a little speed bump, but after i stop scrolling it slows down back to its original spinning speed, is it possible css only?

  • @lukor-tech
    @lukor-tech 2 дні тому

    1:56 I see what you did there.

  • @onlyshort1302
    @onlyshort1302 День тому

    hello i make the 3d portal with three js in my e-commerce website but it slow down my website so what should i do make it optimize and ignor my english

  • @jabeztadesse
    @jabeztadesse День тому

    Magic

  • @DeveloperJS-w1s
    @DeveloperJS-w1s 3 дні тому

    Bro what theme are you using??

    • @lundeveloper
      @lundeveloper  3 дні тому

      Im using Dracular theme, and using Custom CSS and Js Loader extension to customize

    • @DeveloperJS-w1s
      @DeveloperJS-w1s 3 дні тому

      @@lundeveloper Dracular or Synthwave 84?

  • @xphstos_
    @xphstos_ День тому

    Release the draken!!!

  • @Muhammadzain-x4q
    @Muhammadzain-x4q 2 дні тому

    can u make five starworking rating with only css

  • @rudra.nugraha
    @rudra.nugraha 2 дні тому

    I would rather use a fill image property.

  • @vanshkumar6753
    @vanshkumar6753 3 дні тому +1

    If image background color is darker than background color

  • @inspire_before_expire
    @inspire_before_expire 3 дні тому

    💌

  • @Manish___Choudhary
    @Manish___Choudhary 3 дні тому +1

    How to design vs code like yours

    • @lundeveloper
      @lundeveloper  3 дні тому

      I use Dracular theme, then use Cusom CSS and JS Loader extension to edit the interface. You can find that video on my page

  • @ericklee1887
    @ericklee1887 2 дні тому

    Where can I get the source code?

  • @raihan533-x4s
    @raihan533-x4s День тому

    I can't css media give a video on it

  • @TriumphAidenojie
    @TriumphAidenojie 3 дні тому

    First view and first like again

  • @AdarashaGaihre
    @AdarashaGaihre 3 дні тому

    2nd