Тёмный

Stunning HTML & CSS Card Animation 

Web UI Tutorials
Подписаться 9 тыс.
Просмотров 292 тыс.
50% 1

In this video we will show you how to create a stunning card animation using HTML & CSS only.
Source code: github.com/webtutorialsw/css_...
Get the images:
wirestock.io/james591
stock.adobe.com/contributor/2...
Do you like our work? Support us 💛
www.buymeacoffee.com/webuitut...
#css #html #htmltutorial #csstutorial #animation #cssanimationtutorial #cssanimation #csscard #ui #ux #webdesign

Опубликовано:

 

16 июн 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 157   
@zeeshanali4502
@zeeshanali4502 Месяц назад
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 )
@webuitutorials
@webuitutorials Месяц назад
Thank you very much!
@erpetek
@erpetek 8 месяцев назад
smart usage of radio buttons, i thought you're going to use javascript
@user-lr1yf7ro5y
@user-lr1yf7ro5y 3 месяца назад
Same
@Melynt
@Melynt 5 месяцев назад
actually sick use of those inputs :D love it and saving it for later usage idea
@BastiRIP
@BastiRIP 2 месяца назад
This is absolute stunning!! I just started to lern HTML/CSS/JS ...but this blew me away!!!
@HGGdragon
@HGGdragon 7 месяцев назад
Really clever use of the radio elements! nicely done :)
@webuitutorials
@webuitutorials 7 месяцев назад
Thank you very much!
@guilhermealmeida6169
@guilhermealmeida6169 3 месяца назад
@@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?
@FernandoJosedosSantos-fw8xw
@FernandoJosedosSantos-fw8xw 2 месяца назад
You have no idea of how much this helped! THANK YOU SO MUCH!
@denil312
@denil312 2 месяца назад
It was so detailed ! Thanks so much for that !❤
@sumittiwari3731
@sumittiwari3731 5 месяцев назад
Really amazing work bro ❤❤
@joshuadauntless934
@joshuadauntless934 3 месяца назад
I'm new to html. But It works! big thanks!
@prabhjotsingh69
@prabhjotsingh69 2 месяца назад
Really amazing work brother
@raghavendra5230
@raghavendra5230 5 месяцев назад
Thank you 👌continue like this with different ways👍
@Mawuko-SenyoHayibor
@Mawuko-SenyoHayibor Месяц назад
Amazing tut thank you so much
@jameswagner2882
@jameswagner2882 Год назад
looks amazing!!
@FushigiMigi
@FushigiMigi 5 месяцев назад
Awesome!
@nazmulhassan5010
@nazmulhassan5010 7 месяцев назад
awesome animation
@deojefflai6826
@deojefflai6826 10 месяцев назад
This is beautiful
@Grow20
@Grow20 6 месяцев назад
osm work buddy!!! fantastic 💡
@AnkitKumar-vw1dm
@AnkitKumar-vw1dm 5 месяцев назад
Amaining video😍.
@uzairmohammed7
@uzairmohammed7 4 месяца назад
it's really cool ❤
@RetArm
@RetArm 6 месяцев назад
Very nice. Thanks for the lesson.
@MegaMaliak
@MegaMaliak День назад
Nice!!
@smithsmith3503
@smithsmith3503 5 месяцев назад
Wow, nice great job
@MHR664
@MHR664 2 месяца назад
Great!!
@MrValdepenas
@MrValdepenas 7 месяцев назад
Cool stuff 👍🏻
@ConsumerCreditEducationTV
@ConsumerCreditEducationTV 6 месяцев назад
I needed to see this ❤
@judboss1176
@judboss1176 Год назад
amazing
@stivomoses8882
@stivomoses8882 21 день назад
topnotch creativity
@Ditebogomojapelo
@Ditebogomojapelo 4 месяца назад
This is beautiful! inspiring for a noob like me
@nazishkiran
@nazishkiran 3 месяца назад
wow very nice logic
@ndwho
@ndwho 6 месяцев назад
This video is gold ngl
@pauldanielvanschevikhoven4551
@pauldanielvanschevikhoven4551 6 месяцев назад
This works great Thnx
@Weird-Mike
@Weird-Mike 6 месяцев назад
Even though I rarely hand code much anything these days, it's refreshing to watch coding from scratch. Cheers!
@bogdankp
@bogdankp 5 месяцев назад
Yes, leg coding took over my life too.
@eeeee69420
@eeeee69420 5 месяцев назад
​@@bogdankpfyi you can't code with you legs , use butt
@stefanr9653
@stefanr9653 5 месяцев назад
why so? cuz there is already everything on the internet?
@guruware8612
@guruware8612 4 месяца назад
@@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".
@Xgil2Play
@Xgil2Play 4 месяца назад
Call me old-fashioned, but it's the only way I can ensure things work the way they're supposed to.
@row2sky
@row2sky 6 месяцев назад
Потрясающе 'аплодисменты'
@toniojoestar3212
@toniojoestar3212 Месяц назад
thank you :)
@trainerdevesh
@trainerdevesh 5 месяцев назад
Without Javascript great work
@not_amanullah
@not_amanullah 4 месяца назад
nice ❤
@AKATSUKIbd
@AKATSUKIbd 3 месяца назад
wow thanks
@paulojorge59
@paulojorge59 3 месяца назад
Wow muito top...
@xDeadlyWarriorX
@xDeadlyWarriorX 5 месяцев назад
I rarely code anything from scratch, only using UI Components from Material, Bootstrap, etc, but this one looks super bro! Congrats.
@webuitutorials
@webuitutorials 5 месяцев назад
Thanks!
@salvatoreinchiappa3340
@salvatoreinchiappa3340 3 месяца назад
clever use of radio element! Amazing job bro/sis
@ihelpdogs
@ihelpdogs 5 месяцев назад
Looks great. How's it look on mobile devices with width set at 600px?
@user-rs4pl5ge2x
@user-rs4pl5ge2x 5 месяцев назад
Thanks for the example! But how to return the previous state in the form of columns when moving the cursor to the side
@sunny.sophie
@sunny.sophie 3 месяца назад
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.
@modyahmed783
@modyahmed783 7 месяцев назад
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 ?
@kutu258
@kutu258 4 месяца назад
speed running my 1 week on this project :D
@BillyBober
@BillyBober 6 месяцев назад
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?
@AlexLoLar
@AlexLoLar 4 месяца назад
hi guys, use details instead the inputs, the details tag conteint open atribut, on this is most easy than inputs
@Martin-ru3yn
@Martin-ru3yn 10 месяцев назад
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?
@webuitutorials
@webuitutorials 10 месяцев назад
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
@sunny.sophie
@sunny.sophie 3 месяца назад
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.
@zongoboy
@zongoboy 5 месяцев назад
clever
@nikilragav
@nikilragav 4 месяца назад
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?
@gkail6980
@gkail6980 5 месяцев назад
Cool story bro, what does it look like on mobile?
@user-dp4gv9mu3k
@user-dp4gv9mu3k 2 месяца назад
How can i make it responsive for mobile screen ? in what part can I add that css part?
@ahmetsoner9106
@ahmetsoner9106 6 месяцев назад
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ş
@webuitutorials
@webuitutorials 6 месяцев назад
Great idea, I will keep that in mind
@ahmetsoner9106
@ahmetsoner9106 6 месяцев назад
@@webuitutorials Teşekkür ederim ❤
@HenHouse_Pins
@HenHouse_Pins 2 месяца назад
I did this project 3 years ago in a udemy course. lol
@shibalnugamingyt5611
@shibalnugamingyt5611 2 месяца назад
Hello, how do I resize this for mobile?
@Mourad2112
@Mourad2112 2 месяца назад
Can you please help for making it responsive (mobile devices )
@shazamshakeel6577
@shazamshakeel6577 6 месяцев назад
Is there any library for reactjsfor these type of carousel ?
@mhd_Code
@mhd_Code 2 месяца назад
👏
@jheanbrizadao2429
@jheanbrizadao2429 7 месяцев назад
Valeu um vídeo pequeno , mas com muito conhecimento em css e html
@carlosbarross
@carlosbarross 5 месяцев назад
Será que aprende algo sem mesmo explicar as tags?? Sei o básico de html e CSS ksks
@DerTheoGD
@DerTheoGD 6 месяцев назад
nice work! where did you get the images from though?
@webuitutorials
@webuitutorials 6 месяцев назад
Thank you, you can find the images either on stock.adobe.com/de/contributor/211435115/James or wirestock.io/james591
@AesSedai2020
@AesSedai2020 4 месяца назад
This is really pretty, however, with more images, it starts to stutter, any idea how to solve this? thx
@Ducky_8624
@Ducky_8624 3 месяца назад
I'm a beginner with html, I tried to do the same as you but for some reason only tags 1 and 2 appear.
@hirushagunasena9618
@hirushagunasena9618 6 месяцев назад
This is will be much better if it was responsive. btw nice work. ❤
@webuitutorials
@webuitutorials 6 месяцев назад
Thanks! I might post an updated version but it should be very easy to do it by yourself there is not much to change
@pauldanielvanschevikhoven4551
@pauldanielvanschevikhoven4551 6 месяцев назад
@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
@hirushagunasena9618
@hirushagunasena9618 6 месяцев назад
@@pauldanielvanschevikhoven4551 thanks g 🖤
@thomasbaker2155
@thomasbaker2155 5 месяцев назад
@@pauldanielvanschevikhoven4551 legend
@robertzohrabyan3316
@robertzohrabyan3316 7 месяцев назад
Thank you, can you please make it also responsive?
@pauldanielvanschevikhoven4551
@pauldanielvanschevikhoven4551 6 месяцев назад
@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
@marjhuncantago9476
@marjhuncantago9476 5 месяцев назад
Now, how can I make link inside the description?
@shivamray3794
@shivamray3794 2 месяца назад
did you cleared the CHECKED from your HTML code.?
@piedosopedro8117
@piedosopedro8117 4 месяца назад
dang
@ifeanyinnaemego
@ifeanyinnaemego 5 месяцев назад
I need your setup for vim
@Ben94
@Ben94 6 месяцев назад
Can you share the custom cursor pack you have? I really like how it looks
@webuitutorials
@webuitutorials 5 месяцев назад
The cursor is the default one from the KDE Breeze theme
@Ben94
@Ben94 5 месяцев назад
@@webuitutorials thank you very much :D
@usmoxandev795
@usmoxandev795 5 месяцев назад
Awsome!! Is this VS Code??
@webuitutorials
@webuitutorials 5 месяцев назад
Thank you! No, that's neovim
@Yesterday_i_ate_rat
@Yesterday_i_ate_rat Год назад
Awesome, ❤❤ Btw, which ide are you using in the video ?
@webuitutorials
@webuitutorials Год назад
Thank you! I am using neovim in the video
@LionMister
@LionMister 5 месяцев назад
What a Chad.
@AdrianaKo33_ESP
@AdrianaKo33_ESP 4 месяца назад
i put in container justify-content start for horizontal view but its not working
@webuitutorials
@webuitutorials 4 месяца назад
Try writing flex-start instead of start
@AdrianaKo33_ESP
@AdrianaKo33_ESP 4 месяца назад
@@webuitutorials do you have any discord or something ? I have a photo with the results
@Artstd0099
@Artstd0099 2 месяца назад
which screen recorder do yo use???
@webuitutorials
@webuitutorials 2 месяца назад
OBS (Open Broadcaster Software)
@sunnyheheheh9401
@sunnyheheheh9401 6 месяцев назад
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,
@Tomo-gi7di
@Tomo-gi7di 5 месяцев назад
RU-vid is your best friend! Thousands of hours worth of free content that you can use to learn.
@webuitutorials
@webuitutorials 5 месяцев назад
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 RU-vid would make the process much easier
@xtan-yt
@xtan-yt 5 месяцев назад
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 !
@DirtyFan2
@DirtyFan2 4 месяца назад
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??
@webuitutorials
@webuitutorials 4 месяца назад
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
@DirtyFan2
@DirtyFan2 4 месяца назад
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
@andyl9920
@andyl9920 5 месяцев назад
Can you explain why 'checked' was deleted from 2,3, and 4 but left on 1 in html?
@webuitutorials
@webuitutorials 5 месяцев назад
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
@siMeowGamimg
@siMeowGamimg 6 месяцев назад
Railwind version please
@deviques
@deviques 7 месяцев назад
Why does the '.card' have 2 border-radius settings?
@webuitutorials
@webuitutorials 7 месяцев назад
you're right, it's a mistake, just take the second one
@ColdbloodFlower
@ColdbloodFlower 5 месяцев назад
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.
@webuitutorials
@webuitutorials 5 месяцев назад
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
@Aman-kf6wx
@Aman-kf6wx 4 месяца назад
bro i cant put image in card
@estrelladeaurora6065
@estrelladeaurora6065 14 дней назад
in NVIM omg...
@riphatrashid
@riphatrashid Год назад
It would be great if you could provide the source of the images
@webuitutorials
@webuitutorials Год назад
I bought them at wirestock: wirestock.io/james591
@sanjulgupta
@sanjulgupta 2 месяца назад
great use great this is that it's not javascript
@FEELING_ECCHI
@FEELING_ECCHI 6 месяцев назад
Is this used in website ? I have yet to learn website development so I have no idea what this is but I have saved it
@webuitutorials
@webuitutorials 5 месяцев назад
Yes, you can use the code on your own website if you would like to or use it as a resource to learn HTML and CSS
@FEELING_ECCHI
@FEELING_ECCHI 5 месяцев назад
@@webuitutorials thx 🙂
@ivanzq21
@ivanzq21 Месяц назад
at 6:18 I did not understand why u removed the "Checked" from c2,c3 and c4
@webuitutorials
@webuitutorials Месяц назад
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)
@AYYUB1Y
@AYYUB1Y 4 месяца назад
Pc and mobile plz😢
@grischpel
@grischpel 6 месяцев назад
better is width: fill-available;
@pushkalkishore1184
@pushkalkishore1184 Год назад
Where is the source code of the video. Please upload the GitHub link for the source code
@webuitutorials
@webuitutorials 11 месяцев назад
Here you go: github.com/webtutorialsw/css_sliding_cards
@Thisismuhiuddin
@Thisismuhiuddin 6 месяцев назад
Is it responsive?
@webuitutorials
@webuitutorials 5 месяцев назад
Probably not, wasn't the main goal. Make it if you need, should be very simple
@NIW3.
@NIW3. 5 месяцев назад
where are the images?
@webuitutorials
@webuitutorials 5 месяцев назад
links have been updated in the description
@_Sunfall
@_Sunfall 6 месяцев назад
What is a code editor?
@webuitutorials
@webuitutorials 6 месяцев назад
I am using neovim in the video
@_Sunfall
@_Sunfall 6 месяцев назад
thank you
@marjhuncantago9476
@marjhuncantago9476 5 месяцев назад
my text didn't turn into number. HELPPPPPPPPPPPPPPPPP!
@webuitutorials
@webuitutorials 5 месяцев назад
Send me a link to your code and tell me your browser I will try to help you
@marjhuncantago9476
@marjhuncantago9476 5 месяцев назад
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....
@marjhuncantago9476
@marjhuncantago9476 5 месяцев назад
FIX*
@webuitutorials
@webuitutorials 5 месяцев назад
What browser do you use? If you'd send me a link to your code I could quickly look through it
@tolannn
@tolannn Месяц назад
Нацс
@Ked_gaming
@Ked_gaming 5 месяцев назад
I'm pretty sure this is copied from some codepen, how does this make it into a 100k+ views video is beyond me
@seshdbn
@seshdbn 6 месяцев назад
So this is where Codepens go to die. Bet.
@othoapproto9603
@othoapproto9603 5 месяцев назад
fun, but why would I make my views work so hard to view my work?
@olegs4418
@olegs4418 6 месяцев назад
Или минин научил или спиздил
@marklnz
@marklnz 5 месяцев назад
I mean...this *looks* really cool, but that's where it ends, unfortunately. There are accessibility and semantic HTML issues all over the place with this. If a business put this in their customer facing website, they'd be facing ADA complaints left, right and center. II love how this looks, and I especially love the effort to do it all without using any JS at all, but unfortunately it's nothing more than trashy demo-ware.
@webuitutorials
@webuitutorials 5 месяцев назад
Thank you, well since it's made to be just a cool looking visual element, accessibility should not be that important. You can add your own code and change the structure of my template to improve semantics and accessibility if that's important to you, but that wasn't the purpose of the video.
@TheKryuko
@TheKryuko 6 месяцев назад
This is standard not stunning
Далее
Top 2024 Web Design Trends
5:32
Просмотров 465 тыс.
Animated Card Hover Effect | Html & CSS | CodeEra
6:29
MacBook Air Японский Прикол!
00:42
Просмотров 107 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 904 тыс.
ASMR Programming - Animated Login Page - No Talking
18:18
Incredible scroll-based animations with CSS-only
32:23
Просмотров 362 тыс.
Subtle, yet Beautiful Scroll Animations
5:04
Просмотров 1,6 млн
How to create 3D Website Designs With No Code
4:24
Просмотров 465 тыс.
3 Level Glassmorphism Design In CSS | CSS Tutorial
6:16
MacBook Air Японский Прикол!
00:42
Просмотров 107 тыс.