Top 12 Stunning Cards design and effects | Html Css Javascript Effects & Animations

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

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

  • @quarter-lifecrisis5127
    @quarter-lifecrisis5127 4 года назад +51

    0:56 this one is so interesting🔥

    • @chethanprabhu4475
      @chethanprabhu4475 4 года назад +1

      I feel too much animation going on. Nowadays flat design is trending

  • @maheshmahadar4780
    @maheshmahadar4780 4 года назад +1

    no.5 parallax depth card is awesome

  • @maruko8324
    @maruko8324 4 года назад +81

    Whoa cool effect!
    Chrome: I'm about to end this man's whole RAM!

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

    This Man Is such a amazing creator of effects

  • @insan2080
    @insan2080 4 года назад +1

    5 and 10 my fav

  • @ghostkee5031
    @ghostkee5031 4 года назад

    you deserve a Css Oscar

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

    Really great job!

  • @igorngervasio
    @igorngervasio 4 года назад +5

    Some of the cards are unbelievable! Really great job!

  • @ShrawDo8
    @ShrawDo8 4 года назад +1

    just one thing - wow wow wow wow

  • @alwynjohn597
    @alwynjohn597 4 года назад +2

    Keep us updating with best designs thanks bro

  • @gindevgin9298
    @gindevgin9298 4 года назад +1

    The two latest are awesome!

  • @okoye.charles
    @okoye.charles 2 года назад

    The only great barrier of great cards is getting the right images

  • @Asif05288
    @Asif05288 4 месяца назад

    Amazing Sir 😮

  • @edejafolosit1
    @edejafolosit1 4 года назад +9

    Thx 100 million times! Just subscribed to your channel a couple of days ago...nice to see that there are some cool people around that like to share stuff. What’s on code pen it’s just amazing! Thanks again and stay safe!

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

    Awesome!!!!!

  • @Tune4media
    @Tune4media 4 года назад +2

    2:36 is really cool in all aspects!
    for the others? they are all shiny and beautiful but expansion/revealing by hovering is not a good UX (especially for touch screens) also in my opinion when too much info is being revealed by hovering it's just making the whole experience 'uncontrolled'

  • @purecode7237
    @purecode7237 4 года назад +1

    Very nice ideas. I will play with them

  • @Michael-ob7wz
    @Michael-ob7wz 4 года назад +1

    Nice! Thanks for new project ideas ;)

  • @web_ekom1525
    @web_ekom1525 4 года назад

    Awesome. The second was very awesome

  • @quango4307
    @quango4307 4 года назад

    just awesome

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

    cool!!!! awesome, love this!!

  • @l.m.n_27
    @l.m.n_27 4 года назад +1

    awesome, love this!!

  • @jaimishlakhani2466
    @jaimishlakhani2466 4 года назад

    Wow...its too great 💕💕💕

  • @ТимурТокумов-и1к
    @ТимурТокумов-и1к 2 года назад

    Interesting!

  • @sinsim8618
    @sinsim8618 4 года назад

    THAT'S AWESOME

  • @gandalfsnowgrey7037
    @gandalfsnowgrey7037 4 года назад

    Great work! Very inspiring!

  • @mdparvejmondol9910
    @mdparvejmondol9910 4 года назад +1

    you are just awesome bro

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

    Yeah great but no real hover effects on mobile so it’s a bit limited. But good to inspiration

  • @TheRealLeccho
    @TheRealLeccho 4 года назад +1

    Nice effect, but more then half of it can't be use in a website because they prevent user from seing some information.

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

    Wow

  • @jayprajapat2489
    @jayprajapat2489 4 года назад +1

    Bhai it's truly amazing.
    I tried making the parallex card but in that img is not coming.. can you please please help me how to make it

  • @growonline8262
    @growonline8262 4 года назад +1

    Can you explain how to do themm?

  • @web_ekom1525
    @web_ekom1525 4 года назад +1

    Just subscribed. Am happy I did. 👍👍

  • @Drendronix
    @Drendronix 4 года назад +1

    Nice

  • @nikhil5894
    @nikhil5894 4 года назад

    Awesome

  • @Netsectechnology
    @Netsectechnology 4 года назад +4

    it's really cool card effect

  • @akif1564
    @akif1564 4 года назад

    Muhammet helal yorumu gördüysen kalp at :D

  • @kieran2347
    @kieran2347 4 года назад +2

    Loved every one of them, are they open for use to anyone?

  • @EliasAfara
    @EliasAfara 4 года назад +2

    these are great, but i will feel bad if i copy one of them and use it in my project.

  • @devKazuto
    @devKazuto 4 года назад +56

    Almost all of them rely on the hover state to display essential information and therefore would not work on mobile devices because they don't have a hover state. They look good, but the UX is just terrible. Hover states should never be used to show/hide information.

    • @will.walker
      @will.walker 4 года назад +3

      Very true. That is why mobile first design is a big deal. Make it work on mobile then use a media screen width rule or something for all your desktop styles

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

      Then you just redesign them using media queries '__'

    • @nathandeguia9764
      @nathandeguia9764 4 года назад +4

      I think this is where common sense applies. ^^

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

    All Very Cool!! 💯🙌🏻💥💻💪🏻⚡️👏🏻

  • @casperdewith
    @casperdewith 4 года назад +15

    Cool effects … but bad usability. In most cases here, if you only hover over something, it obscures something else. This means that you can't see both at the same time. What if you need to select the text, but it keeps disappearing when you hover over it?
    Good UI is not bad, but it shouldn't be the main point of a design. Make it usable and then you might add some nice effects. That's why the North/Vauxhall ticket effect is the best in my opinion.

  • @Latcci
    @Latcci 4 года назад +4

    i tried hovering cards && parallax depths cards on my vsc and wonder why it doesn't work properly?

  • @andrewsmith5840
    @andrewsmith5840 4 года назад

    wow! cool

  •  4 года назад +2

    New suscriber!

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

    Can u please do coading in visual studio 2019 please 🥺.A humble request

  • @WebDesigns
    @WebDesigns 4 года назад

    Nice one

  • @asterix7799
    @asterix7799 4 года назад

    CoC cards Are awsm

  • @twitchizle
    @twitchizle 4 года назад

    ty

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

    Images were to download bro🧐🧐

  • @yohanamelad6495
    @yohanamelad6495 4 года назад

    Amazing🖤🖤🖤

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

    ı love you, thank you soo much

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

    bro can you tell me music name???

  • @saurabhroy7100
    @saurabhroy7100 4 года назад

    my question is simple and anyone can ans..so please help
    can i use those codes for my client's project directly ???
    is it illegal actvity to use those codes without any lisence??
    please reply..

    • @BookMarkcode
      @BookMarkcode  4 года назад

      Yes you can use them

    • @saurabhroy7100
      @saurabhroy7100 4 года назад +2

      @@BookMarkcode that's wonderful but strange also for me..as someone worked very hard to write those codes and it's available in free then where is the point of web development????
      I mean any company will search and find codes and use them...they will not hire any web developers...Is not it unfair with web developers who really worked hard to learn those languages....even if it's html/CSS but it also ask time and patience from a developer to learn it...Am I saying anything wrong here????

    • @amazingshortvideos9922
      @amazingshortvideos9922 4 года назад

      @@saurabhroy7100 Yes you are right that's why I did not like to copy code from anywhere It's like we are cheating with ourselves what if we have created something and someone shows that thing as their code.

  • @endone3661
    @endone3661 4 года назад

    Wow :O

  • @snehamahale1217
    @snehamahale1217 4 года назад +1

    parallax depth blew my mind :o
    Can anyone plz tell me the font used in profile card at 01:14 ? it looks awesome ♥

  • @strawhat8888
    @strawhat8888 4 года назад +1

    Dude i am confused between web and c++, python.... What should I choose.

    • @BookMarkcode
      @BookMarkcode  4 года назад +1

      Hii THE POTTERHEAD,
      Web development and pure coding (C++, python) are two different paths. It depends majorly on your interest. Web development contains many thi gs starting from wireframing, UI/UX designing, prototyping, frontend and backend development. So by accomplishing this you will become a Full fledge web developer. On the other hand, if you want to go towards AI/ML domain you should focus on python, R, spark, etc technologies. Both this domains have their importance and future scopes.

    • @strawhat8888
      @strawhat8888 4 года назад

      @@BookMarkcode i am interested in web.
      is there a better future for web developers?

    • @light_clover9636
      @light_clover9636 4 года назад +1

      @@strawhat8888 everything these days can be found and done in online. So There is lot of scope in full stack dev but not as AI/ML,IOT . Most importantly web dev got lot of competition as its not complicated and complex as AI/Ml,iot etc. so you need to stand top there to get recognized..... I am not scaring you but its the fact , Last but not least "DO WHAT YOU LOVE"

  • @crickology1901
    @crickology1901 4 года назад

    how download this code???

  • @priyanshmehta5271
    @priyanshmehta5271 4 года назад +1

    Contacts me animation wala link nahi hai

    • @BookMarkcode
      @BookMarkcode  4 года назад +1

      It is added now, you can check it out 😁

  • @chiragojha7311
    @chiragojha7311 4 года назад +1

    You missed to give the link for 2:27 (10. Contact me card). Unlucky me :(

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

    🔔 👍

  • @pz9alpha715
    @pz9alpha715 4 года назад +1

    How to learn css like you reply me in full details.

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

      Google Search CSS for beginners. I really hope this advice helps, I put my time and effort into generating the easiest and best response for you and I've been there, where you don't know how to get started, but hopefully you follow my advice and become a dream coder you were meant to be :)

  • @saurabhbharti5912
    @saurabhbharti5912 4 года назад

    😎😎 cool

  • @aluman7426
    @aluman7426 4 года назад

    can i have a source code please

  • @marshabrightly1307
    @marshabrightly1307 4 года назад +2

    these codes free to use or what

  • @advfox.
    @advfox. 4 года назад

    Is it all responsive

  • @deepaksarvepalli2344
    @deepaksarvepalli2344 4 года назад +1

    Where to find those graphical images?.. 😯😯😯😕😕😕

  • @jhonatanwalterarizaquispe8933
    @jhonatanwalterarizaquispe8933 4 года назад +1

    Nuevo Suscriptor (Y)

  • @xenon-x54
    @xenon-x54 3 года назад +1

    I came for Clash Of Clans

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

    wasome

  • @yugin_yugin4010
    @yugin_yugin4010 4 года назад +1

    Code please

  • @mergenhan5190
    @mergenhan5190 4 года назад

    Where are you frome ??

    • @BookMarkcode
      @BookMarkcode  4 года назад +2

      From India

    • @_.sunnyraj._
      @_.sunnyraj._ 4 года назад

      @@BookMarkcode which state
      Coding experience ?
      Age?

  • @parthtrivedi318
    @parthtrivedi318 4 года назад

    Bro source code

  • @ويجو-خ1ب
    @ويجو-خ1ب 4 года назад

    Waw

  • @yilekalbeyene7822
    @yilekalbeyene7822 4 года назад

    please work this website

  • @elmetkelem7524
    @elmetkelem7524 4 года назад

    This junk was done 20 years ago with flash, why we're turning on circles

  • @XiagraBalls
    @XiagraBalls 4 года назад +5

    Nice effects, but had to mute the terrible soundtrack.

  • @maxwowu6550
    @maxwowu6550 4 года назад

    标记

  • @isaidstream4547
    @isaidstream4547 4 года назад +1

    that's a lot of lag

  • @frmcf
    @frmcf 4 года назад

    Some of these are cool ideas, some of them are just masturbatory coding with no purpose (eg. #5: just because you *can* do it doesn't mean you *should* do it). The music in the video is horrific.

  • @jamesfraley6332
    @jamesfraley6332 4 года назад +1

    Cool effects, bad music.

    • @BookMarkcode
      @BookMarkcode  4 года назад +1

      You can suggest some good one 😁

  • @zeknoss
    @zeknoss 4 года назад

    Here, have this downvote for the cancerous music you put me through just to show some good front-end work. Damn...