Ring Of Fire | CSS and SVG Animation Effects

แชร์
ฝัง
  • เผยแพร่เมื่อ 10 ก.พ. 2025
  • Enroll My Course : Next Level CSS Animation and Hover Effects
    www.udemy.com/...
    Another Course : Build Complete Real World Responsive Websites from Scratch
    www.udemy.com/...
    ------------------
    Join Our Channel Membership And Get Source Code of My New Video's Everyday!
    Join : / @onlinetutorialsyt
    ------------------
    Patreon : / onlinetutorials
    Facebook Page : / onlinetutorialsyt
    Instagram : / onlinetutorials_youtube
    Twitter : / onlinetutoria16
    Website : www.onlinetutor...
    Buy Me A Coffee : www.buymeacoff...
    ------------------
    Music Credit
    Song: Xad - Birds (Vlog No Copyright Music)
    Music provided by Vlog No Copyright Music.
    Video Link: • Xad - Birds (Vlog No C...
    ------------------
    Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

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

  • @sahilyadav2187
    @sahilyadav2187 4 ปีที่แล้ว +7

    Best youtuber I have ever seen in front-end development.

  • @russellabraham9208
    @russellabraham9208 4 ปีที่แล้ว +2

    Madness, great use of the two technologies.

  • @mroshan74
    @mroshan74 4 ปีที่แล้ว +7

    Daily dose of CSS, loving it man.
    Thanks for the awesome tutorials

  • @ケイトポン祐
    @ケイトポン祐 4 ปีที่แล้ว +10

    Thank you for always letting us know about your awesome knowledge.

  • @shriyamtripathi
    @shriyamtripathi 4 ปีที่แล้ว +10

    U could call it as THE RING OF AWESOMENESS

  • @fillipegoncalves4704
    @fillipegoncalves4704 4 ปีที่แล้ว +22

    always surprising us

  • @gojoshonen2024
    @gojoshonen2024 4 ปีที่แล้ว +12

    Best content 👌
    I am learning css from you thanks for teach css at another level

  • @DerAleksey
    @DerAleksey 2 ปีที่แล้ว

    Работа с фильтрами это что то иное, умопомрачительное! Результат крутой!

  • @veloyozh
    @veloyozh 3 ปีที่แล้ว +1

    I repeated everything. It works!!!

    • @veloyozh
      @veloyozh 2 ปีที่แล้ว

      @@ammaralhomyqani9079 put down your email

  • @saikumarnandigama4805
    @saikumarnandigama4805 4 ปีที่แล้ว +2

    Awesome sir. Your videos are superb.

  • @wh4le287
    @wh4le287 4 ปีที่แล้ว +3

    Incredible work as always. Really goes to show how much you can do with plain CSS. Keep it up! 👍

  • @kidskpadonou894
    @kidskpadonou894 4 ปีที่แล้ว +10

    wow, this is first first youtuber ive seen with 0 dislikes and 200 likes.

    • @shhdevon
      @shhdevon 4 ปีที่แล้ว

      he deserves that.

    • @kidskpadonou894
      @kidskpadonou894 4 ปีที่แล้ว

      lol

    • @davidsg1378
      @davidsg1378 4 ปีที่แล้ว

      why did you had to invoke the haters?

  • @DerAleksey
    @DerAleksey 2 ปีที่แล้ว

    И ещё для себя открыл работу с позиционированием, класс!👍

  • @tabgimbarr
    @tabgimbarr 4 ปีที่แล้ว

    Impresive

  • @jubaerbinfoyez9037
    @jubaerbinfoyez9037 4 ปีที่แล้ว +5

    Nice broo.

  • @qvcitizen
    @qvcitizen 3 ปีที่แล้ว

    Mind blowing indeed I love you

  • @velvetoscillator
    @velvetoscillator 4 ปีที่แล้ว +1

    just bought your course. thanks.

  • @chirathrathnayake2616
    @chirathrathnayake2616 4 ปีที่แล้ว +1

    Nice one brother. It is perfect.....
    Well wishing for you 😘 😘

  • @uhmThisCantBeRight
    @uhmThisCantBeRight 4 ปีที่แล้ว

    bro your css skills are crazy

  • @vijayborge4258
    @vijayborge4258 4 ปีที่แล้ว +2

    Thank you bhai for such great videos ❤️

  • @ralphurguefoppa
    @ralphurguefoppa 2 ปีที่แล้ว

    t'es trop fort dans le CSS

  • @amritanshnautiyal1957
    @amritanshnautiyal1957 4 ปีที่แล้ว +2

    Sir,
    Really surprising,
    Please make a video on svg filters or please tell from where can we learn all about it.
    I have never thought of these tags attributes.
    AMAZING

  • @GCASTILL0
    @GCASTILL0 ปีที่แล้ว

    That’s brilliant!

  • @ujwalc9226
    @ujwalc9226 4 ปีที่แล้ว +2

    Good contents 👌👌

  • @snssatyabhagavan
    @snssatyabhagavan 4 ปีที่แล้ว +4

    You are on fire 🔥😜

  • @Medinajxel
    @Medinajxel 4 ปีที่แล้ว +2

    nice video :) 👌

  • @aldykusumaardhana1982
    @aldykusumaardhana1982 4 ปีที่แล้ว

    Colorfull❤😍

  • @devformation
    @devformation 4 ปีที่แล้ว

    u r the best!

  • @anjali.chaudhary2502
    @anjali.chaudhary2502 3 ปีที่แล้ว

    Bro you are insane

  • @Vivek_Vlogs_Bxr
    @Vivek_Vlogs_Bxr 4 ปีที่แล้ว

    waav awesome style

  • @cosmo9x
    @cosmo9x 4 ปีที่แล้ว

    Amazing youtuber! Your always coming up with cool and awesome ideas which make me want to code them! THANK YOU!

  • @cristoferk8314
    @cristoferk8314 4 ปีที่แล้ว +3

    86 likes and 0 unlikes! :0 Great! You are awesome!

  • @phatnguyenxuan5570
    @phatnguyenxuan5570 4 ปีที่แล้ว

    wowwww beautiful

  • @shikhachauhan2824
    @shikhachauhan2824 4 ปีที่แล้ว +3

    Woah 🔥

  • @FACTUAL-w6b
    @FACTUAL-w6b 4 ปีที่แล้ว

    you re a real pro man wow

  • @createtech992
    @createtech992 4 ปีที่แล้ว +1

    Osm bhai

  • @jyotidubey2735
    @jyotidubey2735 4 ปีที่แล้ว

    Plz make more vids on these svg filter effects , there are very few tutorials that cover these and you can get almost same effects as with three.js with these svg filters.
    Love your videos man.

  • @guruji6061
    @guruji6061 4 ปีที่แล้ว

    You genius of css

  • @conghuyphi945
    @conghuyphi945 4 ปีที่แล้ว

    you are a amazing and have videos very great

  • @signatureit4269
    @signatureit4269 3 ปีที่แล้ว

    Very Cool!

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb 4 ปีที่แล้ว

    Job welldone

  • @farhannaseem7941
    @farhannaseem7941 4 ปีที่แล้ว

    And nice tutorials too.

  • @one_way_tech
    @one_way_tech 4 ปีที่แล้ว

    Nice bro you pro animation css html

  • @vladosononame6376
    @vladosononame6376 4 ปีที่แล้ว

    this is so cool! Yeah Boiii

  • @michaelcastillo4402
    @michaelcastillo4402 4 ปีที่แล้ว

    O.O wow... It's great

  • @Archontegreg
    @Archontegreg 4 ปีที่แล้ว

    Nice work !!!

  • @andreybalashov5138
    @andreybalashov5138 4 ปีที่แล้ว

    Amazing

  • @ГеоргійКоваленко-у8ф
    @ГеоргійКоваленко-у8ф 4 ปีที่แล้ว

    Very cool )

  • @user-gf8mo6pg5o
    @user-gf8mo6pg5o 4 ปีที่แล้ว

    Perfect 11/10

  • @zacky7790
    @zacky7790 4 ปีที่แล้ว

    Amazing!! Thank you ...

  • @dogukanilbay1000
    @dogukanilbay1000 4 ปีที่แล้ว +2

    perfect

  • @Kasfas
    @Kasfas 3 ปีที่แล้ว +2

    Could you make a tutorial on how to set a border like this around another element in flexgrid?

  • @sergeijohansen9265
    @sergeijohansen9265 4 ปีที่แล้ว

    css god

  • @farhannaseem7941
    @farhannaseem7941 4 ปีที่แล้ว

    Nice background music sir

  • @collinsnganga5362
    @collinsnganga5362 4 ปีที่แล้ว

    Like the music bro

  • @kongzilla2897
    @kongzilla2897 4 ปีที่แล้ว +1

    🔥

  • @marceloroldrin
    @marceloroldrin 4 ปีที่แล้ว

    Woww 🔥🔥🔥

  • @shubhamsingh1409
    @shubhamsingh1409 4 ปีที่แล้ว +1

    Do you have a tutorial where the navbar fades in when we scroll down and becomes a part top banner with the background?

  • @strugglingElds
    @strugglingElds 4 ปีที่แล้ว +1

    wtf I love it man. thanks fore this!

  • @msksourcecode1443
    @msksourcecode1443 4 ปีที่แล้ว

    Wowwwwwwww

  • @NiceChange
    @NiceChange 2 ปีที่แล้ว

    these tutorials are incredible...but...i dont have circles...i have tares..looks like time rifts.. really cool but i think i am missing an add on package, can you elaborate on that please.

  • @mustakimkureshi3603
    @mustakimkureshi3603 4 ปีที่แล้ว +1

    Any idea for where tp use ?

  • @ranikumar3751
    @ranikumar3751 4 ปีที่แล้ว

    Can you add on sololearn app?? Pls reply

  • @michalvonbargen6523
    @michalvonbargen6523 4 ปีที่แล้ว

    Hey do you have a tutorial for the first animation u are using in your intro?

  • @dianaelena1
    @dianaelena1 4 ปีที่แล้ว +3

    these effects are so awesome...too bad, that when you try to test them with different browsers, the effects don't look the same :(

    • @JinseokSeo-p8q
      @JinseokSeo-p8q 4 ปีที่แล้ว

      Yeah probably is -webkit-box-reflect is not supported in all browsers :(

  • @fahimrahman9036
    @fahimrahman9036 4 ปีที่แล้ว

    Mohammad Irshad ap konse browser se code run karte hay.Mene apka kus @face animation tutorial ka code copy karke run kiya but o nehi kam kiya.Plz kiu kam nehi kiya?

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

    It's too late but you should show the online preview in the same window instead of switching them.

  • @osmanyusupov4593
    @osmanyusupov4593 4 ปีที่แล้ว

    Hello Mohammed, how are you? I will ask you something. I really would. Would you please take a video tutorial about Node js 🙏. We will be glad if you prepare a training series from A to Z. We love you. 🙏👍🙏🤗

  • @abdelhaqfahfouhi1638
    @abdelhaqfahfouhi1638 4 ปีที่แล้ว +1

    👍

  • @syedumarzaeem4444
    @syedumarzaeem4444 4 ปีที่แล้ว

    plz make a adventure game

  • @alexdivito6871
    @alexdivito6871 ปีที่แล้ว

    any links to the code?

  • @vivekkumarsingh9599
    @vivekkumarsingh9599 4 ปีที่แล้ว +2

    How to copy and paste this

    • @hunkyvampire
      @hunkyvampire 4 ปีที่แล้ว

      Haha lazy, this is for learning not copy pasting

    • @vivekkumarsingh9599
      @vivekkumarsingh9599 4 ปีที่แล้ว

      @@hunkyvampire haha 😂 I'm just kidding....

  • @krishnam5876
    @krishnam5876 4 ปีที่แล้ว

    Need mobile view .and need more knowledge about position and z index

  • @GhomezAnonimous
    @GhomezAnonimous 4 ปีที่แล้ว

    filter: ... blur(1px); not compatible in all browsers :(

  • @misaka6219
    @misaka6219 4 ปีที่แล้ว

    im getting an error with ``.circle.nth-child(2):before`` it says it expects {}?

  • @alexkillergamingtg3614
    @alexkillergamingtg3614 3 ปีที่แล้ว

    who helps me the one next to content: what is it? I look for it on my keyboard and it doesn't come out 😭

  • @gbagba81
    @gbagba81 2 ปีที่แล้ว

    this is the comment about svg not working. i mispelled baseFrerquency. so check the code and it'll work, no weird scss crap

  • @DarthVader-wm6tf
    @DarthVader-wm6tf 4 ปีที่แล้ว

    I am having some zooming issues in "filter:hue rotate" plz help me to fix this

    • @akshatsingh4891
      @akshatsingh4891 4 ปีที่แล้ว

      You have to do hue rotate 0 degree or 360 like that specify a degree

    • @DarthVader-wm6tf
      @DarthVader-wm6tf 4 ปีที่แล้ว

      @@akshatsingh4891 after I add a degree This happens ...

    • @akshatsingh4891
      @akshatsingh4891 4 ปีที่แล้ว

      Darth Vader oh can you explain what you mean by zoomih?

    • @DarthVader-wm6tf
      @DarthVader-wm6tf 4 ปีที่แล้ว

      @@akshatsingh4891 when I enter a degree ... The circle's size increases ... I could only seeb1/4th part of the circle ... That's my problem ...

    • @akshatsingh4891
      @akshatsingh4891 4 ปีที่แล้ว

      Darth Vader oh can you please send me the code i will run it and see and then tell you

  • @georgehammond867
    @georgehammond867 4 ปีที่แล้ว

    not working at all, what kind of browser are you using in this video?

    • @cosmo9x
      @cosmo9x 4 ปีที่แล้ว +1

      Hes using a local website, try looking through your code again. His tutorials always work for me.

    • @georgehammond867
      @georgehammond867 4 ปีที่แล้ว

      @@cosmo9x his tutorials never work because he wants you to buy it with the link in the video. he misplaces couple of things like { background or color} switch those back and fourth and then you fix his puzzle tutorials. other wise very good to debug these tutorials. you learn by solving these tricks. :)

    • @cosmo9x
      @cosmo9x 4 ปีที่แล้ว +1

      @@georgehammond867 lmao strange how you think that while I have used tons of his tutorials on my website and it works perfectly 😉 try double checking your code next time

    • @gbagba81
      @gbagba81 2 ปีที่แล้ว

      my friend i wrote "baseFrerquency". i just was like fck off, and then i corrected it. i came to tell you because i was throu the same thing

    • @tariqtariq8385
      @tariqtariq8385 2 ปีที่แล้ว

      Iam using Chrome browser and it's working successful

  • @yaswanththavanti3879
    @yaswanththavanti3879 4 ปีที่แล้ว

    Bro sent me this code link I will try this...

  • @Just_like_that1234
    @Just_like_that1234 4 ปีที่แล้ว +4

    And then website animation fire bender..

  • @ianwright5919
    @ianwright5919 4 ปีที่แล้ว

    Why not open source your code rather than copyright it?

  • @sebessebe7367
    @sebessebe7367 3 ปีที่แล้ว

    Ha ouai !

  • @darrkyt
    @darrkyt 4 ปีที่แล้ว +1

    :)