Flipping Card UI Design in HTML & CSS | Card Hover Animation | ASMR programming
HTML-код
- Опубликовано: 5 июн 2024
- Flipping Card UI Design in HTML & CSS | Card Hover Animation | Glassmorphism | ASMR programming | No Talking | ASMR Coding
This video tutorial will teach you to create a Card UI Design with Flip Animation using HTML and CSS. Basically, I have made this card UI in Glassmorphism. The source code link has provided below.
---
Hire us on Fiverr
➤ www.fiverr.com/prakashahi
Follow me on Instagram
➤ / coding.np
Visit my website for helpful coding projects with source code
➤ www.codingnepalweb.com/flippi...
---
⌚ Timestamps:
00:00 Flipping Card Demo
00:32 File Structure
01:05 Making Gradient Balls
03:21 Making Card with Glassmorphism UI
10:45 Creating the back face of the card
15:43 Making Card flip on hover
17:16 Final result
#card_design #hover_animation #html_css #notalking
---
🎵 Music Credit:
Something 'bout July (Instrumental) by RYYZN
• Something 'bout July (...
Ikson - We Are Free (Vlog No Copyright Music)
• Ikson - We Are Free (V...
Song: Ehrling - You And Me (Vlog No Copyright Music)
➤ Video Link: • Ehrling - You And Me (...
![Dimension 20: Never Stop Blowing Up Trailer [Dropout Exclusive Series]](http://i.ytimg.com/vi/xYeXpbHnGEM/mqdefault.jpg)
This video helped me align flexbox items better using the transform property. I now feel confident and equipped to tackle any challenges in this regard. Thanks! 🙌
Brilliant!! Thank you for all your time.
enjoyed the tutorial, if possible can make the user enter his/her details on the card live, that would be cool!
Master card by a master💫
Brilliant and very Interesting card design , learn a lot thanku 🙌
thanks for this wonderfull playlist
You are great i learn lot of thing through you
Excellent Video! You didn't speak anything but you made it way easier for everybody to understand. ✨
Glad it was helpful!
thank you i learned a lot 💌🍀
This looks absolutely fantastic….
Thanks a ton.
Another master piece 👍
Thanks again!
Beautiful!!
Thank you! Cheers!
Thanks for the tutorial it really opened my eyes to some css properties I was not aware of. I tried loading the website on firefox and safari and noted it didn't work as intended. Any tips about consistency across browsers?
Nice 👍 one bro. Good sense of UI design
Glad you like it
Good job Beautiful design, go ahead bro🥰🥰
Many many thanks
Thanks Bro!!!
Thnaks CodingLb
Nice👍
This must be really hard to make. Thanks for your effort.(Even though I don't understand anything. I am just a beginner btw)
I'm glad you liked it. You can do it!
Can the card keep rotating till infinity?
Nice job.
Good Job👌
Thank you! Cheers!
wow
Nice tutorial bro!
What program do you use to record the screen?
Filmora screen recorder.
good job bro.
Thanks a lot bro.
Please explain what you did at end!
when i hover over card it shows front face element also along with back face element which looks like front face in rotate 180 degre and back face in front of user normally have anybody face the same problem
You good bro
Thanks a ton.
why do you use span element to combine and and not div element? Is it okay if I use the div element?
span for inline, div for block
A vertical card would be nice
Next time.
From we can download those logo?
When I was writing this project I realized that " .card .back-face " with a space between the two classes is different from " .card.back-face " with no space between them ; Because at first , I wrote the first one , but I the styles in css wouldn't implement on the project . But when I changed the first one to the second one , the project got fixed .
Can anyone tell me why are they different ?
Certainly! The difference between `.card .back-face` and `.card.back-face` in CSS is related to the specificity of the selector and how it targets elements in the HTML structure.
1. **`.card .back-face`**: This selector targets an element with the class `back-face` that is a descendant of an element with the class `card`. It means it looks for an HTML structure like this: `...`.
2. **`.card.back-face`**: This selector targets an element with both classes `card` and `back-face` applied to it. It means it looks for an HTML element like this: `...`.
The key distinction is in how the styles are applied based on the structure of your HTML. If you wrote styles for `.card .back-face` and it wasn't working initially, it might have been due to the HTML structure not matching that pattern. Once you changed it to `.card.back-face`, it matches the specific element with both classes, and the styles were applied correctly.
Understanding these selector differences is crucial for styling elements based on their relationships or specific combinations of classes in your HTML document.
Hello sir, aap konsa keyboard use krte ho
redragon
@@CodingLabYT 2000 budget mechanical keyboard btao plz
5:12 ❤
from where to get the logo and chip image?
Check the description
can someone explain why position auto made the backside overlap
when you set the position as absolute the container show unexpected behaviour . It acts like it is not there and also the dimension it is taking will not be visible and the container below it takes it position thus we are seeing the overlap behaviour . hope it helps
Im confused why and when div/ section get use?
Div/nav/section/main , it's all same thing just use at a your convenience
Div and section are almost the same but section is a semantic element of the html
It represents a meaning
Hope this helps
It's for grouping purpose
right
Which school do you learn web development? Pls tell
Self Taught.
html and css file in description is empty
www.codingnepalweb.com/responsive-registration-form-in-html-css/
Where is full Sources code
Available soon.
Hi
backface-visibility:hidden ;
didnt work
3:07 How ?
Alt+down
First
That's great.
Nice