Glass Effect in Elementor | Glassmorphism 🔥

Поделиться
HTML-код
  • Опубликовано: 24 авг 2024

Комментарии • 107

  • @jimfahaddigital
    @jimfahaddigital  Год назад +2

    🔥Download Exclusive Elementor Templates: kitpapa.com 🔥

  • @mankilany
    @mankilany Месяц назад

    Amazing. Thank you! Greetings from Hungary!

  • @DigitoPreneurs
    @DigitoPreneurs Год назад +1

    🤩🤩🤩 You're a true master of your craft. I watch all your videos

  • @FirstTheyIgnoreYou
    @FirstTheyIgnoreYou 22 дня назад

    Awesome Video! Thank you very much! 🥰

  • @times_preserved
    @times_preserved Год назад +1

    I really like this particular tutorial and how you made it so simple to understand and learn. Great job.😊

  • @AlbuquerqueVitor
    @AlbuquerqueVitor Год назад +1

    Amazing, thanks for sharing! Hugs from Brazil

  • @PixieBobCo
    @PixieBobCo 3 года назад +4

    Wow! Great tutorial. Implemented it on my website and love it.

    • @jimfahaddigital
      @jimfahaddigital  3 года назад +3

      Thank you so much for sharing your experience! I really appreciate it! 😇

  • @frankstone
    @frankstone 3 года назад +1

    Outstanding! I just subscribed & rang the bell. THANK you for the great tutorial.

    • @jimfahaddigital
      @jimfahaddigital  3 года назад

      Thank you so much for your appreciation 😇😇

  • @joaopaulocardosoantunes8472
    @joaopaulocardosoantunes8472 2 года назад +2

    Thank you so much for being so detailed and for the great content!

  • @dominiquempundu621
    @dominiquempundu621 3 месяца назад

    HI Jim F, thank you for your amazing tutorial. Please advise what plug must we use for this Glassmorphism Elementor ?

  • @FotografiaRuiz
    @FotografiaRuiz 2 года назад +2

    No me funciona el código, no desenfoca la imagen. Me dice que no reconoce la propiedad y tengo elementor pro.

  • @claravalente9855
    @claravalente9855 6 месяцев назад

    Amazing, it helped me a lot, thank you so much :)

  • @catiagraciele9484
    @catiagraciele9484 Год назад

    this channel is the best

  • @kellypfleiger4168
    @kellypfleiger4168 3 года назад +1

    This CSS is not supported in Firefox... Or does someone know how to make it work?

  • @tutupkaleng
    @tutupkaleng 11 месяцев назад

    thank you sir for the tutorial 😁

  • @niloy0.1k
    @niloy0.1k 3 месяца назад

    Hello Jim vai, Please create a video tutorial for the Elementor Infinite image shine hover effect

  • @detroixdigital8310
    @detroixdigital8310 Год назад +1

    Great tutorial Jim! I have some friends in Cairo and noticed your accent sounds similar to theirs! You wouldn't happen to be Egyptian, would you?

    • @64mo22
      @64mo22 11 месяцев назад

      😂😂 he doesn't even sound close to Egyptian

  • @webshades
    @webshades 3 года назад +1

    Thank you very much for such a lovely section creating tips.👍

    • @jimfahaddigital
      @jimfahaddigital  3 года назад +1

      My pleasure! Thank you so much for your appreciation! 😇😇

  • @jcarlin596
    @jcarlin596 2 года назад

    I really enjoy your teaching style. Great video

  • @PhilipeNoBrasil
    @PhilipeNoBrasil 2 года назад

    Hello, im Philipp from Germany. Thanks for the great tutorial. I currently have my first client as a web designer and am trying to make the website stand out from the crowd. :)
    Please keep up the good work.

  • @philnance2543
    @philnance2543 2 месяца назад

    When I apply the blur Custom CCS it does not work? I have the flex box enabled and I'm trying to not have to disable it due to having a lot of content in the flex box formats. Any Thoughts?

  • @WordGirlPhotoEdits
    @WordGirlPhotoEdits 3 года назад +1

    Excellent video!!! Very easy to understand and follow along! Thank you!

    • @jimfahaddigital
      @jimfahaddigital  3 года назад

      Thank you so much for your appreciation 😇😇😇

  • @lucaskoberl5899
    @lucaskoberl5899 11 месяцев назад

    Thanks for your inspiring Videos, I am your biggest Fan!!!

  • @ahmadgupta1168
    @ahmadgupta1168 Год назад

    Excellent tutorial

  • @aldy_uhaa
    @aldy_uhaa 3 года назад +1

    Dude this blurry effect doesn't work at safari browser, do you have another way to fix it?

  • @julianbona
    @julianbona 11 месяцев назад

    Excellent Tutorial, Thanks Jim. The glass effect is not working in safari browsers, did you know why?? Maybe webkit ?

  • @hervemottet1358
    @hervemottet1358 2 года назад

    Thank Mister Fahad the best of the best really

  • @GrowingIsKnowing
    @GrowingIsKnowing 2 года назад

    Awesome, thanks from your new subbie! I know this is gonna look so good on the site i'm building for my client

  • @acetechgraphics
    @acetechgraphics 7 месяцев назад

    Nice, but can you provide me .Jason file of this Pricing Table?

  • @Suvro-rp9wb
    @Suvro-rp9wb 2 года назад

    awesome ! I always follow you.

  • @dennish3926
    @dennish3926 3 года назад

    Greate videos greetings from Germany

  • @KlauZ0
    @KlauZ0 2 года назад

    Thanks a lot for your hard work and desire to share with newbies like me ! Many appreciations and always like from me !

    • @jimfahaddigital
      @jimfahaddigital  2 года назад

      So nice of you!! Means a lot!!! Thank you so much for supporting and understanding! 😍

  • @henchnerd9404
    @henchnerd9404 Год назад

    looks great, thanks for the template, how do i get the template onto my locally hosted site though? what are the steps?

  • @hueseyinu2264
    @hueseyinu2264 2 года назад

    Thanks for the great tutorial! Unfortunately it doesn't work with Firefox 😞 Is there a workaround for it?

  • @clementyo4526
    @clementyo4526 3 года назад

    Cool tutorial 🙏👍😁

  • @abirraihan9094
    @abirraihan9094 9 месяцев назад

    love brother from bangladesh

    • @jimfahaddigital
      @jimfahaddigital  9 месяцев назад

      Take love brother ❤️❤️🔥🔥🔥

    • @abirraihan9094
      @abirraihan9094 9 месяцев назад

      @@jimfahaddigital Same brother♥

  • @InsightBoxTV
    @InsightBoxTV 3 года назад

    Great tutorial 👍👌❤

  • @agenciaopenideadigital4174
    @agenciaopenideadigital4174 2 года назад

    thank you so much

  • @mohamedsayed3775
    @mohamedsayed3775 Год назад

    very good

  • @RenderingX
    @RenderingX 6 месяцев назад

    the only thing is that does not display on safari mobile

  • @greentrading
    @greentrading 8 месяцев назад

    Thankyou sir

  • @yuriykabanets7665
    @yuriykabanets7665 2 года назад

    Cool!

  • @thewebmaster-pro
    @thewebmaster-pro 8 месяцев назад

    Hello and thank you! Are you planning an update with the container feature?

    • @OAGMedia
      @OAGMedia 7 месяцев назад

      just copy it according to sections ..works perfectly fine with containers :) i just did it today

  • @Isa-dq4jw
    @Isa-dq4jw 2 года назад

    Thank you very much. It s really nice ! When you put CSS in elementor pro, it s in a child theme ? Or not necessary ? Thank you from France 🙏😊

  • @cidhorta8705
    @cidhorta8705 Год назад

    Great tutorial but I sent my email to download the Template you used in the tutorial without success.
    Please fix it.

  • @shamsuzzamanimon1200
    @shamsuzzamanimon1200 3 года назад

    thanks a lot ❤️❤️

  • @gourroychowdhury7667
    @gourroychowdhury7667 11 месяцев назад

    you are awesome

  • @shortbreakhub3862
    @shortbreakhub3862 3 года назад

    Thank you👍🏻

  • @masaodihasan
    @masaodihasan 3 года назад

    Good work bro

  • @TheTeliane
    @TheTeliane 2 года назад

    Thanks You

  • @DELAISAIT
    @DELAISAIT Год назад

    Спасибо !!!

  • @farhanpexxer1047
    @farhanpexxer1047 Год назад

    Template file not working anymore can you please provide a new link?

  • @MrLegendofnaruto
    @MrLegendofnaruto Год назад

    can u use carousel for this?

  • @Marco-br2cx
    @Marco-br2cx 3 года назад

    Great!

  • @raghuramjc2798
    @raghuramjc2798 Год назад

    I appreciate all your tutorials. Nice of you for sharing such tips. On this tutorial, I am using the free version of Elementor and with the addon plugin, I have the custom CSS. When I use the CSS, it is not recognizing "Backdrop - filter" code and gives a warning "Unknown property". What is the reason?

    • @capputhesiamese9707
      @capputhesiamese9707 Год назад +1

      The backdrop-filter property is not supported by all browser change to this instead
      selector {
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
      }

  • @26Uncle
    @26Uncle 2 года назад

    execellent

  • @RealDanElias
    @RealDanElias Год назад

    Unfortunately it also blurs behind the card being animated

    • @RealDanElias
      @RealDanElias Год назад

      I fixed it by animating the outer column instead of the inner column

  • @NOALNOM
    @NOALNOM 3 года назад

    - Hello Jim thanks for the amazing tutorial! How can the glass effect be apply on a svg ? it's that possible? Best Regards

    • @cameron9695rhysd
      @cameron9695rhysd 2 года назад

      It’s easier to design an svg icon using something like figma or adobe xd and apply a background blur to the fill

  • @nimitagarwal3632
    @nimitagarwal3632 Год назад

    hey Jim your video was awesome and very helpful but I want 6 cards. Just like in your video you have shown the tutorial for 3 cards I want to do it for 6 cards. Can you please help me on this.

  • @shabanabegum5248
    @shabanabegum5248 Год назад +1

    u should say it first that this method is for pro elementor users don't waste time of others

  • @computerexpartc2436
    @computerexpartc2436 2 года назад

    Grandpa you show without coding it will be good for everyone

    • @jimfahaddigital
      @jimfahaddigital  2 года назад

      That's not possible!! If Elementor doesn't provide the built-in option, how could you do that without Custom Code? Can you explain?? Thanks!!
      Even, I'm providing the Code snippets for FREE! I'm not sure what else someone could expect for FREE!! Surprised!!

  • @jamesdavis8731
    @jamesdavis8731 3 года назад

    I gave this a thumbs up, even though this backdrop-filter effect is not supported well in many browsers. It does not work in Firefox and others. It works well in Chrome. Is there a way around this?

    • @jimfahaddigital
      @jimfahaddigital  3 года назад

      I'll create a tutorial soon on this topic - "How to support modern CSSs on most of the browsers"! Thank you!!

  • @rehmankureshi
    @rehmankureshi 2 года назад

    brother can we add support for this tutorial for firefox and safari browsers..becasue on chrome it works fine but and on firefox and safari by default the backdrop effect doesnt show...for firefox i found that we need to enable the backdrop-filter from about:config natively firefox dont support the backdrop-filter command and safari as well.

    • @jimfahaddigital
      @jimfahaddigital  2 года назад +1

      I see. That's the limitation! I've not found any prefix for those browsers as well :(
      Probably soon we'll get support for these new css3/4 properties!

    • @rehmankureshi
      @rehmankureshi 2 года назад

      @@jimfahaddigital i hope they add the support for Firefox and other browsers as well. one thing bro same thing happened with the horizontal scroll bar tutorial Firefox and safari wasnt showing the gradient scroll bar but i was able to add support in these browsers by using this css and i tried the same with backdrop-filter but somehow i was not able to :(
      @supports (scrollbar-color: #32B7B6 #425389){
      *{
      scrollbar-color: #32B7B6 #425389;
      scrollbar-width: auto;
      }
      }

  • @aldy_uhaa
    @aldy_uhaa 3 года назад

    Dude would you want to recheck that that effect currently doesn't work on iphone browser like safari? Or do you have another css codes instead? Just in case this blurry transparent effect can work normal on iphone tho...

    • @kyulol3235
      @kyulol3235 3 года назад

      Thé solution proposed don't work on safari, try this instead of the blur

  • @Sony_Music_India_
    @Sony_Music_India_ 11 месяцев назад

    Custom code for blur effect is not working

  • @yo80090
    @yo80090 Год назад

    Hi, I entered my email on your website to get the but I am not getting the t emplate could you send it to me?

  • @contact.with.Ismail
    @contact.with.Ismail 2 года назад

    Background picture ২ টা কি মেইল করা যা‌বে?

  • @abulhasnatmdtarek4902
    @abulhasnatmdtarek4902 3 года назад

    Bro eita ki elementor or pro use korcen?

  • @bySterling
    @bySterling 2 года назад

    We wish you would sell your amazing custom designs so we could download the full awesomeness after purchase!$

    • @jimfahaddigital
      @jimfahaddigital  2 года назад +1

      Thanks man! Actually I'm preparing everything for sell. Probably all will be available from next month!

    • @bySterling
      @bySterling 2 года назад

      @@jimfahaddigital SO great to hear sir! 🙌🏻🎉💻⚡️👏🏻

  • @CyberImpact7
    @CyberImpact7 2 года назад

    its not working for me

    • @CyberImpact7
      @CyberImpact7 2 года назад

      oh its working but not in mozzila firefox, just use chrome! The best channel on youtube lol

  • @abhiverma8481
    @abhiverma8481 3 года назад

    Bc

  • @mubeenrahman_codname
    @mubeenrahman_codname 3 года назад

    i hope you dont take it the wrong way . i like youre videos but it would be much easier to listen to you if you didnt force that accent on yourself , its sounds bad and also the air from your mouth hits the mic quite hard so maybe a pop filter would be useful

    • @mubeenrahman_codname
      @mubeenrahman_codname 3 года назад

      i hope i did not sound like an asshole i like your tutorials

  • @Sony_Music_India_
    @Sony_Music_India_ 11 месяцев назад

    Guide me please

  • @attilalazar5790
    @attilalazar5790 2 года назад

    Hallo bro, i need to ask you something. can you contact me?

  • @khaowfang7239
    @khaowfang7239 9 месяцев назад

    Hey Jim, just follow you and I thought it was free Elementor 🤣 I just want to test and try if it'ss good. but just still consider to buy elementor pro as I'm trying to design Website. But I just want to try this one. Didn't plan do other yet 🥲

    • @khaowfang7239
      @khaowfang7239 9 месяцев назад

      But it's so good work. even I can just 80% (without glasses effect) I learned a lots from clips!