Easy Flipcard Tutorial | HTML & CSS
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- In this video I show how to create flip cards using HTML & CSS. This uses some transitions to animate the card as it flips over displaying additional information on the back.
Code and assets on github: github.com/rus...
Very clear explanation. I watched few videos but didn't understand properly. But now, it's crystal clear to me. Take love from Bangladesh.
Glad it helped!
I would subscribe to anyone who make tutorial with a voiced guideline instead of some music for the entire video, really appreciated!!
Thanks, glad it was helpful
Needed this for a project, thanks a lot dude. very well explained and easy to understand!!
Glad it helped!
Finally someone who explain what css style do and why, where had you been before 2018 ? I just gave up on programming but now I need a project for myself.
Thanks! Glad it was useful.
I know I'm late but this video saved my life. Really awesome and clear tutorial. 10/10
Thanks, glad it was helpful!
YOU ARE AN AMAZING TEACHER, LOVE YOU!!!
My god… this was absolutely perfect 🎉 thanks for taking the time!!
Glad it helped :)
Man, this video should have more views and likes. Amazing work, cheers bro !
Thank you! Glad you like it
in 2023 this is exactly what i want to flip the card thankyou sir :))
Quite easy to follow the wonderful explanation you just did.
Thanks
You get a like, subscribe and comment for a great video but the selling point was explaining how to hover the parent to animate the child. Too many TH-camrs skip over this very important piece. Keep it up bruv.
Cheers! Glad it was helpful
Thankyou very much for this video . Awesome my issue got fixed . Thankyou very much once again.
Glad it helped
Very clean solution.
Thank you.
Glad it helped
Thanks for Sharing this useful video. Really informative and you explained so well.
Glad it was helpful!
wonderschon Video, danke schön für alle bemühungen, auch Ich liebe es, dein erklarungen sind die besten zu sagen. Ich wünsche Ihnen einen schönen Tag!
Thank you i appreciate your amazing explanation, i wish that you will continue with css tutorials ❤
WOW! Thank you!
No problem! :)
nice, I started with python but now I am interested in learning html, js and css, my goal is to have a web page where I can upload 3d renders so people can download them
I went along the same path starting with python and on to html etc. Your project sounds really cool, hope to see it!
Excellent explanation, thanks a lot.
Thanks!
Great video thanks for showing this cool effect
Awesome! thank you
Thank you for not making this an over complicated bs like some other vidoes
woa nice tutorial - great explanation thanks:)
THANKYOU so much bro really appreciate it
Glad it helped!
Thank you for share, this tutorial is very educative. You explaned every detail so we can undertand all steps.
Glad it was helpful!
Thanks. Nice tutorial.
Thanks, glad you liked it
really helpful! thank you!
Life saver!!
Good job
Thanks
Hey, I have a question so I really enjoyed how it works, but then my question is. You made it that the image is in CSS, which would mean that I would have to copy my whole card for it to be duplaced in the CSS and HTML and for it to have a different background like showcasing multiple works of myself with the text at the back. Now I'm thinking instead of placing it in the CSS, place the image in the HTML, but I'm just a amateur in HTML so how would I make ti link with my CSS to have the same effect and place it as a img src?
nice tutorial bro
Cheers
thank youu man, you save me
Thanks a lot brader it was really helpful
Hi, Thanks for the clear tutorial. I was wondering what the best method would be to have a ‘deck’ of cards with different fronts? Would it be best to have multiple classes for the front of the card in order to have a different background image in CSS, or would it be better to add the images in html and keep the css clean(sorry noob to coding)?
I’ve just come across nth-child so will try with that
Thanks :D
Welcome! :)
fantastic, can you do this with python?
Yea I think so! It's easier with CSS though :)
thanks
thank you
Welcome
how can I put them all in the same row?
Thanks for a clear explanation. Is there a way to switch the flip by having the text on the front and the image on the back?
just reverse the content in divs
tnx a lot sir
This seems very helpful at first, but as it uses a set pixel width and height it is not responsive. Also as the content position is set to absolute it collapses to nothing without that fixed height. This code does not work in a gallery-style setting. A very good tutorial though, and just leaving this comment here to save my past self from using this (once I learn to time-travel)
I had the same issue but you don't really have to do much to achieve the result that it's lacking. Assuming you have multiple cards, just use display: grid; and grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); on the section container (NOT THE CARD-CONTAINER) and it will allow for a responsive design, but for a single card design, adjust the values of the card-container and you should be able to achieve the desired effect. Remember no code fits all, a dev always has to manipulate code as the situation requires :)
if I have mutliple cards, is it possible to do sliding animation? Can you give me a hint?
i have given bg-image but it was not found showing on image ??
Make sure the file name is exactly the same and is in the correct folder, it should work OK if it can find the image.
Which application i need to download to run this code ?? Plzzz tell me
What can i do that it works on Safari? i tried with a bit of js, but im not that good in coding. And i think on Mac safari it works, but on Mobile, the cards doesnt flip
Is it possible to have, for example, 5 cards with 5 different images in 1 css class styling, and have the page load them up in each card in the order you have them in the css file? Think 5 cards with the same class called "cards-front", with 5 links in the ".cards-front" css style, and then have the page load those links in a way that card #1 takes link #1 and card #2 takes link #2 etc. Or if you have a different, simple way of doing this, I'd love to hear that too.
I tried Googling some stuff, but I couldn't find something that worked for me without having to give them separate classes. Currently a student working on improving my html/css skills, so any help would be appreciated.
There are simple ways of doing what you're trying to achieve I believe, but based on what I understand from what you're asking. #The cards will(for the most part) use the same styling, when it comes to the level of functionality that you're trying to get, I recommend using some JavaScript if you're looking for a direct and simple way to get the job done, plus it sounds like you're describing a onLoad function so that would be the route to take... In my opinion at least.
why z index dont work on the card ?
I have a question. How do I put two ( or more ) of those flip cards next to each other? I would really appreciate it if you could help me out !
I had to change it up a bit to use in a project but just resize the cards for however large u need them then to allow for multiple cards side by side you can either use display flex(which gave a bit of problems if you're sticking to his html layout of elements) or use display: grid; and to allow for responsiveness use grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); and that should work, of course tailor it to your project and adjust the values accordingly
Upon adding relative and absolute, my img would not be visible anymore, why? thanks,a amzing video!
figured out! thankss
Bro, how did you render video in 4k
Cuz i need to make an desktop application
thank you dude
Glad I could help!
Hey man amazing video,
I am having trouble with the card flip thing i need your help i have 5 cards and non of the code is working can you help me please
thank you