Stunning HTML & CSS Card Animation
Vložit
- čas přidán 9. 09. 2024
- In this video we will show you how to create a stunning card animation using HTML & CSS only.
Source code: github.com/web...
Get the images:
wirestock.io/j...
stock.adobe.co...
Do you like our work? Support us 💛
www.buymeacoff...
#css #html #htmltutorial #csstutorial #animation #cssanimationtutorial #cssanimation #csscard #ui #ux #webdesign
background-position: center;
background-size: cover;
background-repeat: no-repeat;
These three property in your div will be cherry on top , and makes the center position will be always seen even if it is closed and transition will also look stunning . ( love your work )
Thank you very much!
Really clever use of the radio elements! nicely done :)
Thank you very much!
@@webuitutorials Friend, I loved your work and repeated it, but one thing that bothered me a bit is that I couldn't save the photo. We clicked on it, it opens, but we can't close it like when we open the website. Is there a way to fix this? What can I do?
smart usage of radio buttons, i thought you're going to use javascript
Same
There should've been "no js" in the thumbnail. I also wasn't expecting this creativity.
actually sick use of those inputs :D love it and saving it for later usage idea
Even though I rarely hand code much anything these days, it's refreshing to watch coding from scratch. Cheers!
Yes, leg coding took over my life too.
@@bogdankpfyi you can't code with you legs , use butt
why so? cuz there is already everything on the internet?
@@stefanr9653 Should read: "there is already everything copied on the internet"
One new idea.. 705354 copies, not even bothering to adjust little things.
The majority of "web-designers" are only able to copy/paste things without knowing how things work.
Ask that self-proclaimed specialists to create a web-site just by using notepad.
It all started when ms-word dared to generate html. It will get worse, AI tools are coming: then we get the same idiotic images everywhere, and people will think its "cool".
Call me old-fashioned, but it's the only way I can ensure things work the way they're supposed to.
This is absolute stunning!! I just started to lern HTML/CSS/JS ...but this blew me away!!!
You have no idea of how much this helped! THANK YOU SO MUCH!
I'm new to html. But It works! big thanks!
I rarely code anything from scratch, only using UI Components from Material, Bootstrap, etc, but this one looks super bro! Congrats.
Thanks!
It was so detailed ! Thanks so much for that !❤
clever use of radio element! Amazing job bro/sis
Sehr hilfreiches Video! ♥
This is beautiful! inspiring for a noob like me
That's a creative way to get these card effect, nice! :) Sadly it's not accessible and also not W3C compliant (div in label), so I would never implement it like this.
Really amazing work brother
Thank you 👌continue like this with different ways👍
Amazing tut thank you so much
Without Javascript great work
Потрясающе 'аплодисменты'
Really amazing work bro ❤❤
Awesome!
topnotch creativity
Thank u so much 👍
This video is gold ngl
hi guys, use details instead the inputs, the details tag conteint open atribut, on this is most easy than inputs
Hello, how do I resize this for mobile?
This is beautiful
Great!!
Nice!!
osm work buddy!!! fantastic 💡
speed running my 1 week on this project :D
looks amazing!!
at 6:18 I did not understand why u removed the "Checked" from c2,c3 and c4
The checked one is the default card that is open on page load. As I was copying the inputs in the beginning, I forgot to remove the checked attributes from the other inputs (it made no sense to check all because only one of them can be checked at any time)
it's really cool ❤
wow very nice logic
Looks great. How's it look on mobile devices with width set at 600px?
Emeğine sağlık ❤
Eğer bu animasyonda solda ok ve sağda ok olan bir slider olsaymış ve kullanıcı oklara tıkladığın ortaya gelen resim otomatik açılıp sola giden veya sağa giden resim otomatik kapansaymış efsane bir animasyon slider olurmuş
Great idea, I will keep that in mind
@@webuitutorials
Teşekkür ederim ❤
thank you :)
I did this project 3 years ago in a udemy course. lol
I needed to see this ❤
Beautiful! Really nice work.
Just want to ask. Is this a good approach from a semantic or SEO point of view, putting all the content between label tags?
Thank you! Honestly, I do not know exactly to what extend it affects SEO. But considering that there is not that much text per slide anyway, this should not be a significant problem
Hey :) I also don't know how it affects SEO, but is is not a good approach from a semantic point of view and it is not accessible.
Looking good but div element is not allowed as a child for label you need to change your structure
wow thanks
i put in container justify-content start for horizontal view but its not working
Try writing flex-start instead of start
@@webuitutorials do you have any discord or something ? I have a photo with the results
Wow, nice great job
Thanks for the example! But how to return the previous state in the form of columns when moving the cursor to the side
Amaining video😍.
Wow muito top...
Cool story bro, what does it look like on mobile?
Cool stuff 👍🏻
This works great Thnx
nice ❤
awesome animation
I'm a little confused by 2 things: how come you don't need to define a width on the icon so that it's always a circle (as opposed to some other shape). How come when you put the styles for the text, they disappeared? I don't think overflow hidden should make them disappear?
nice work! where did you get the images from though?
Thank you, you can find the images either on stock.adobe.com/de/contributor/211435115/James or wirestock.io/james591
I'm a beginner with html, I tried to do the same as you but for some reason only tags 1 and 2 appear.
amazing
How to work in Responsive?
did you cleared the CHECKED from your HTML code.?
Valeu um vídeo pequeno , mas com muito conhecimento em css e html
Será que aprende algo sem mesmo explicar as tags?? Sei o básico de html e CSS ksks
This is really pretty, however, with more images, it starts to stutter, any idea how to solve this? thx
This is will be much better if it was responsive. btw nice work. ❤
Thanks! I might post an updated version but it should be very easy to do it by yourself there is not much to change
@media (max-width: 766px) {
.wrapper {
margin-top: 400px;
}
.container {
height: 1200px;
flex-direction: column;
}
.slide {
width: 400px;
align-items: flex-start;
}
.slide > .row {
flex-direction: column;
}
.slide > .row > .icon-1,
.icon-2,
.icon-3 {
width: 50px;
}
.slide {
height: 80px;
}
.slide > .row > .description {
height: 500px;
width: 400px;
}
input:checked + label {
height: 600px;
width: 400px;
}
}
Change this, but watch the width's and height's. I've changed some for my project
@@pauldanielvanschevikhoven4551 thanks g 🖤
@@pauldanielvanschevikhoven4551 legend
I think for the purpose of showcasing "the trick", it makes sense to cut down on other complications. Responsive design is an orthogonal topic and a "solved problem" really. Overall I think this was a brilliantly designed video concept.
Nice video, using radio like that was actually really clever.
When clicking on label and it starts expanding (the widths increases), some times the expanding animation is rigid and it stutters, and idea how to fix that ?
Thank you, can you please make it also responsive?
@media (max-width: 766px) {
.wrapper {
margin-top: 400px;
}
.container {
height: 1200px;
flex-direction: column;
}
.slide {
width: 400px;
align-items: flex-start;
}
.slide > .row {
flex-direction: column;
}
.slide > .row > .icon-1,
.icon-2,
.icon-3 {
width: 50px;
}
.slide {
height: 80px;
}
.slide > .row > .description {
height: 500px;
width: 400px;
}
input:checked + label {
height: 600px;
width: 400px;
}
}
Change this, but watch the width's and height's. I've changed some for my project
amazing
clever
Can you please help for making it responsive (mobile devices )
How can i make it responsive for mobile screen ? in what part can I add that css part?
👏
Can you do something similar to this with a tags if I wanted to have an image description but when you click on the tabs it brings you to a new page?
Awsome!! Is this VS Code??
Thank you! No, that's neovim
Is there any library for reactjsfor these type of carousel ?
can they animate like slide on their own
You can add some JavaScript which changes the selected radio button after some time to achieve that effect
Awesome, ❤❤
Btw, which ide are you using in the video ?
Thank you! I am using neovim in the video
What a Chad.
Now, how can I make link inside the description?
Where is the source code of the video. Please upload the GitHub link for the source code
Here you go: github.com/webtutorialsw/css_sliding_cards
great use
great this is that it's not javascript
Can you explain why 'checked' was deleted from 2,3, and 4 but left on 1 in html?
The inputs are radio inputs, that means only one can be checked at any time. That creates the effect: if you check a new one, the old one gets unchecked automatically. So only the slide that should be open on page load should have the vale checked
Honestly I am feeling a bit stupid but it just doesn't seem to work on my end. I have tried several things but VS always tells me that the input tags need closing.
It shouldn't be a problem using html. Did you compare your code with the source code I provided? The code should work in your webbrowser, too
Can you share the custom cursor pack you have? I really like how it looks
The cursor is the default one from the KDE Breeze theme
@@webuitutorials thank you very much :D
which screen recorder do yo use???
OBS (Open Broadcaster Software)
in NVIM omg...
dang
I need your setup for vim
Pc and mobile plz😢
It would be great if you could provide the source of the images
I bought them at wirestock: wirestock.io/james591
bro i cant put image in card
Can this land me a front end job if i know this + make a few beautiful websites with different animations like this etc? Also do i need to know this from scratch or does every developer search everything from the web? I can create a website but i feel like i am taking 99% from different resources, like a puzzle game. Am i doing this correctly??
Hey yeah that's normal that's how I worked some time ago. But with every project you do you learn and memorize additional things. For a job the result is more important but having to search things up might take longer for the projects to finish. Try to learn from scratch and you'll be able to recreate what's on your mind without the need to do excessive research
Too much learning, development is such a broad field i don't feel like learning everything from scratch. I feel like excessive research is more fun but idk. Maybe IT is not for me. I am currently in an internship as a web developer ( super easy project ) at a vocational school, but i am soon graduating and i will apply myself to university of applied sciences, but idk if i want to take IT major this time. Thanks for the reply =) @@webuitutorials
Why does the '.card' have 2 border-radius settings?
you're right, it's a mistake, just take the second one
how and where can I learn this stuff, I want to make these stuff on my own, does it work like exploring css and html only my own by just building stuff and googling at the same time or is there some resources for those,
CZcams is your best friend! Thousands of hours worth of free content that you can use to learn.
Try to replicate small code snippets from other people and try to understand them. After some time you will be able to adjust them to your own needs or build the things you imagine on your own. Watching some beginner tutorials for HTML and CSS on CZcams would make the process much easier
You can't draw even though you know how to use a pencil. Try to convert UI designs to code. Also don't look at the code !
Railwind version please
where are the images?
links have been updated in the description
my text didn't turn into number. HELPPPPPPPPPPPPPPPPP!
Send me a link to your code and tell me your browser I will try to help you
better is width: fill-available;
what the HECK XD.
I tried to copy/paste the code from Github to myCSS and the result is same.
the Text isn't fixing....
FIX*
What browser do you use? If you'd send me a link to your code I could quickly look through it
Is it responsive?
Probably not, wasn't the main goal. Make it if you need, should be very simple
What is a code editor?
I am using neovim in the video
thank you
I'm pretty sure this is copied from some codepen, how does this make it into a 100k+ views video is beyond me
fun, but why would I make my views work so hard to view my work?
So this is where Codepens go to die. Bet.