Top CSS & Javascript Animation & Hover Effects | August 2020

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ส.ค. 2024
  • 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...
    ------------------
    Tutorial Links
    01) CSS Dark Neumorphism Cards Using Html & CSS with Hover Effects
    • CSS Dark Neumorphism C...
    02) Creative CSS Loading Animations Effects
    • Creative CSS Loading A...
    03) Simple Product Card UI Design using Html & CSS
    • Simple Product Card UI...
    04) CSS Only Particles Background Animation Effects
    • CSS Only Particles Bac...
    05) CSS Magic Line Icon Fill Hover Effects
    • CSS Magic Line Icon Fi...
    06) How To Create a Portfolio Filter Gallery using HTML CSS & jQuery
    • How To Create a Portfo...
    07) Pure CSS Leaves Animation Effects
    • Remake | Pure CSS Leav...
    08) Responsive Ecommerce Product Card Design using Vanilla tilt.js
    • Responsive Ecommerce P...
    09) Creative CSS Custom Checkbox Design Tutorial For Beginners
    • Creative CSS Custom Ch...
    10) How To Create a To Do List Using Html & CSS
    • How To Create a To Do ...
    11) Ring Of Fire | CSS and SVG Animation Effects
    • Ring Of Fire | CSS and...
    12) Frosted Glass Scratch Out Effect
    • Frosted Glass Scratch ...
    13) CSS3 Glowing Apple Logo Animation Effects
    • CSS3 Glowing Apple Log...
    14) Splash Image Mask using Html CSS
    • Splash Image Mask usin...
    15) CSS Creative Cards Animation and Hover Effects
    • CSS Creative Cards Ani...
    16) Wavy Flag Animation Effects using CSS & SVG
    • Wavy Flag Animation Ef...
    17) Animated Login Form Design using Html & CSS
    • Animated Login Form De...
    18) CSS box-shadow vs filter: drop-shadow() | Example For Beginners
    • CSS box-shadow vs filt...
    19) Animated Background For Website Header Using CSS & Vanilla Javascript
    • Animated Background Fo...
    20) CSS Quick Menu Item Hover Effects For Beginners
    • CSS Quick Menu Item Ho...
    ------------------
    give proper credit if you repost this on other social media platform
    ------------------
    image source : www.pexels.com
    ------------------
    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

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

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

    Click For More : th-cam.com/users/OnlineTutorials4Designersvideos?sub_confirmation=1

    • @zedpubg6655
      @zedpubg6655 2 ปีที่แล้ว +1

      vs code theme name pls?

  • @OnlineTutorialsYT
    @OnlineTutorialsYT  3 ปีที่แล้ว +58

    Tutorial Links
    01) CSS Dark Neumorphism Cards Using Html & CSS with Hover Effects
    th-cam.com/video/tBAH2PmzM8M/w-d-xo.html
    02) Creative CSS Loading Animations Effects
    th-cam.com/video/ttWXapXj4cg/w-d-xo.html
    03) Simple Product Card UI Design using Html & CSS
    th-cam.com/video/yNBObeTWvio/w-d-xo.html
    04) CSS Only Particles Background Animation Effects
    th-cam.com/video/ajZjivqBdcY/w-d-xo.html
    05) CSS Magic Line Icon Fill Hover Effects
    th-cam.com/video/zB07dcKX9FA/w-d-xo.html
    06) How To Create a Portfolio Filter Gallery using HTML CSS & jQuery
    th-cam.com/video/ZjrqnxDEkzA/w-d-xo.html
    07) Pure CSS Leaves Animation Effects
    th-cam.com/video/FAF6iy2eUyw/w-d-xo.html
    08) Responsive Ecommerce Product Card Design using Vanilla tilt.js
    th-cam.com/video/W3pQXyjTKps/w-d-xo.html
    09) Creative CSS Custom Checkbox Design Tutorial For Beginners
    th-cam.com/video/p58K05YD98A/w-d-xo.html
    10) How To Create a To Do List Using Html & CSS
    th-cam.com/video/1rP6F-vm2ac/w-d-xo.html
    11) Ring Of Fire | CSS and SVG Animation Effects
    th-cam.com/video/avo71iW9mI4/w-d-xo.html
    12) Frosted Glass Scratch Out Effect
    th-cam.com/video/Zk_q0GqY3Fc/w-d-xo.html
    13) CSS3 Glowing Apple Logo Animation Effects
    th-cam.com/video/ZyNzmOEJ48A/w-d-xo.html
    14) Splash Image Mask using Html CSS
    th-cam.com/video/lBK_kh4iCAQ/w-d-xo.html
    15) CSS Creative Cards Animation and Hover Effects
    th-cam.com/video/-Rv1dbvM1EY/w-d-xo.html
    16) Wavy Flag Animation Effects using CSS & SVG
    th-cam.com/video/M0jQq0YbQDo/w-d-xo.html
    17) Animated Login Form Design using Html & CSS
    th-cam.com/video/vGm81GL_9rk/w-d-xo.html
    18) CSS box-shadow vs filter: drop-shadow() | Example For Beginners
    th-cam.com/video/AMEvGef4YCc/w-d-xo.html
    19) Animated Background For Website Header Using CSS & Vanilla Javascript
    th-cam.com/video/LTMNdqsFh9M/w-d-xo.html
    20) CSS Quick Menu Item Hover Effects For Beginners
    th-cam.com/video/Ot6PCS6rU3c/w-d-xo.html

  • @aalayer2834
    @aalayer2834 3 ปีที่แล้ว +19

    These are some unique effects we can say! Not all the default ones we see everyday on every website. Nice job!

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

    all are my favourites! so many creative animations.

  • @thealmanancy9020
    @thealmanancy9020 3 ปีที่แล้ว +99

    And here I am, still struggling to make my links look like buttons when I hover over them

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

      Join the discord of spck editor. You'll get help there.

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

      @@eggman6830 Discord link please?

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

      @@eggman6830 Link please

    • @itsrandxm
      @itsrandxm 3 ปีที่แล้ว +6

      I know you probably meant it as a joke, and it's been two months, but if you wanted to make a link look like a button you could just make it an actual button and then use onclick inside the to call a function inside javascript looking something like
      function NewTab() {
      window.open(
      "URL", "_blank");
      }
      then when you would click the button it would open another tab but you would also be able to make it look like a button, and if you would like to make your mouse still change into a pointer just use "cursor: pointer;" in your css.
      sorry if you don't really care I just wanted to share the solution that popped in my head.

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

      @@itsrandxm thanks for the insight, i figured out a way since then, but since I'm mostly self taught I'd rather not embarrass myself and share it

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

    Card Animation Best Stunning Effect

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

    why do you give out the secret of making these wonderful design ideas for free?!?!? you’re a god

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

    Man. . This guy is God!

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

    Yooo, I’m a big fan of what you do..... keep going on

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

    Anytime I watch these videos I cannot stop to whistle 😍😍😍

  • @sivasiva-ix9lz
    @sivasiva-ix9lz 3 ปีที่แล้ว

    Super now I'm a beginner of UI developer

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

    I liked the falling leaves :)

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

    I've followed all this tutos, big up big thx to you

  • @nikitamashikov8618
    @nikitamashikov8618 3 ปีที่แล้ว +10

    Great!! Спасибо, это просто нечто)

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

    Most creative person ever

  • @xavier-wz4on
    @xavier-wz4on 2 ปีที่แล้ว

    Thank you so much 🖖🤙🖖

  • @danieloliveira9815
    @danieloliveira9815 3 ปีที่แล้ว +11

    Meanwhile i'm still here trying to to get my sidebar navigation to work :')

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

    You are on some zen level, hats off

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

    greetings from front end Dev Indonesia

  • @RakibulIslam-ck7cj
    @RakibulIslam-ck7cj 3 ปีที่แล้ว +4

    really appreciated brother.

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

    Thanks for all amazing tricks and effects.
    Keep it up

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

    Wow awesome bro 👍

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

    really a lot, congratulations and thanks for sharing

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

    number 8 is my favourite ❤

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

    WOW!! you're the best of the best. These effects are really so so so awesome and exactly what i was looking for.
    I will use number 09 effect to allow to user to switch between dark mode and light mode.

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

    Bro you are extreme 🙌🏻🙌🏻🙌🏻🙌🏻🙌🏻🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

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

    Really awesome stuff, don't know who disliked the video.

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

    Very Unique and beautiful

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

    Wow! man always best, your videos helps me a lot..

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

    Como siempre incrible saludos desde Venezuela

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

    Hey broo .. u're in the last level 😍😍

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

    Vou usar muito esses tutoriais pra construir meu portifílio. Cara obrigada real

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

    High level content bro🤜

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

    Amazing dude!
    Keep it up!

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

    Amazing creative ideas, I wish I can create too , this kind of Ideas is difficult, you are amazing bro.

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

    Amazing content

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

    muchas gracias por estos maravillosos tutoriales.

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

    You nailed it man

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

    You are awesome..... just like these effects!

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

    Awesome vedio ❤️

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

    Awesomeee, I love them!!!! ありがとう
    !!!

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

    bravo

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

    Your videos are amazing

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

    Nice, man!

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

    Nice 👍

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

    Can you make glass effect...

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

    No.8 Is so cool

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

    very talented!

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

    Amazing animations 🔥

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

    Really amazing👍😍

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

    Really awesome

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

    wow que bonitos efectos tienes mi like.

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

    nice

  • @o.5759
    @o.5759 4 ปีที่แล้ว

    Very nice video thank you man❤

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

    2:31 wtf 😯😯😯, i am totally surprised...

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

      Scratch effects

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

      I salute you bro,,,Your are best ever man...i have seen...

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

      @M Hasan Sabbir hi bro cm 🌍😂

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

      @@tiefsoftwarelab you mean comedian,🤣🤣😂 How do you know me because a real f... boy knows another one...

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

    good

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

    Mittlerweile gibts so viele geile Sachen die man mit css machen kann..
    Und es ist echt easy. Vor 15 Jahren war das noch richtig hart xD
    Oh its an english thread xD Sorryyy

  • @3500ian
    @3500ian 2 ปีที่แล้ว

    all you develop is great, that code could be used in worpress ..?

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

    Thank you soo much bro

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

    wow, thanks you for everythink

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

    bro its next level
    😍😍😍😍😍

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

    Awesome👍

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

    Amazing staff

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

    Amazing

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

    U genius....

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

    if combine 8 + 15? will looks awesome

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

    Why you really pro

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

    Super! Подписка однозначно - СПАСИБО!

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

    Apple logo amazing👍😍

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

    Isn’t 14 overall just a splash pattern and z index 1 and background photo is at z index -1?

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

    you are awesome

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

    Thanks probro!

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

    How do you even do these?? Where did you study man???

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

    Has uno con radios buttons

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

    I didn't like the last one, but apart from that there are some very good ones and some just inspired me to do some of mine or at least some elements of them.

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

    how can i learn these?

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

    please compile all of them in one video

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

    You are CssDaVinci

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

    Please share tutorial for the effect on very start of video.. i have seen this background on a website i really want to achieve this

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

    Que tan Efectos interesantes

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

    how to set image background transparent using this image

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

    Nice

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

    Beast Content Bro
    :)

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

    The login page is transparent and changes color (@ _ @) 😯😮😯😮😯😮😯Please keep going ??

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

    :-) great job

  • @KashifAli-yg6yk
    @KashifAli-yg6yk 3 ปีที่แล้ว

    Sir Please make a complete playlist of CSS all kind by voice record bcoz sir when you make a video by Css & then that you upload sir actual we see the coding but we cannot understand so sir if you make such kind of that playlist then sir that will pretty much better for us sir plz

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

    do they work on Internet Explorer?

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

    Nice but I wonder if any of this ever achieved a single extra sale or conversion.

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

    ❤️❤️❤️

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

    i have showed the full video for sound quality

  • @user-lr4gi2iw4b
    @user-lr4gi2iw4b 3 ปีที่แล้ว

    Привет, я не знаю станешь ли ты переводить мой комментарий, но я все таки попробую. Твой канал очень классный, было бы очень здорово если бы у тебя были такие же видосы но на тему html и js, для таких как я)

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

    High level content .....I like it,🙈
    Amazing 🤩 keep it up 👍

  • @msolano00
    @msolano00 3 ปีที่แล้ว +8

    To be honest, I think this music is distracting (and clearly overused in youtube). Maybe your own voice providing a quick explanation of the CSS would be much much better

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

    No se ingles que dice ahi

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

    Can you tell me from where Ican get this effects

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

      There is a comment at top of comments.

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

    ok

  •  3 ปีที่แล้ว

    Omg

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

    Thank god mute button exists ahah

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

    I really loves your work but it could be more better is you just add a voice over describing the code ...most of us would love that

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

    Can you tell me your music you use?