Can I create this interactive Dribbble card design?
HTML-код
- Опубликовано: 26 июл 2024
- The original design by Reslanlatypov: dribbble.com/shots/4446631-ls...
Ruslanlatypov's Dribbble: dribbble.com/ruslanlatypov
🔗 Links
✅ Getting started with Sass: • Sass with auto-refresh...
✅ Andy Bell's CSS reset: piccalil.li/blog/a-modern-css...
✅ min-content, max-content, and fit-content: • min-content, max-conte...
✅ The inset property: • Set the position on al...
✅ More on inset: • Simpler positioning wi...
✅ More videos in this series: • Cloning cool designs w...
⌚ Timestamps
00:00 - Introduction
00:55 - Writing the HTML
07:12 - Setting up my Sass files
13:58 - Setting up the grid and basic card styling
31:47 - Styling the hover state
56:54 - Creating the shaking animation
01:02:25 - Animating the images
01:23:15 - Fixing the z-index issue
01:28:02 - Adding a shadow to the cards
01:32:18 - Fixing the issue in Firefox
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Kevin's wife: What should I write for their card?
Kevin: First give it a padding of 1 rem, and then we're gonna say it's display grid, a border of 1px solid --clr-neutral-400...
var(--clr-neutral-400)...
And apply the class fancy-card
Also amination 😁
so apt 😃
hahahaha style="margin:auto;" give padding 😂😂😂😂😂😂😂😂😂😂
Only person who made me fell in love with css.
1:18:50 the pure joy on KPs face is so endearing
The thing I preferred the most out of this video (I also learned a lot!) is hearing your thought process throughout the project. That's actually really helpful! A lot of videos on RUclips are over-edited and everything seems so simple 'on paper', but listening to you speaking to yourself is so much more valuable to understand how an experienced programmer solves problems. Do you happen to know any other RUclipsr (especially around JavaScript) that does that in their videos?
I know Kyle over on Web Dev Simplified has started to do similar videos. He might only have 1 at the moment, but I know he's planning to keep doing them.
@@KevinPowell and for that reason, i subscribed to both of you :)
having some frontend knowledge is always useful
Dev Ed makes some videos with JavaScript
As a mostly back-end developer these vids really start pulling me into front-end/css work. Keep learning alot and it just looks so much fun
Same. It's like css actually has a structure. Who'd of thunk it
@@PivitParkour26 its mostly young me thinking you had to work with hardcoded pixel values.. or just not understanding why things worked they way they did. After some years of experience and this channel my eyes have been opened
Back end needs logics and front end needs creativity
Yes. I feel exactly. There is some sort of magical quality to the power of css.
It's actually a great time to jump in to frontend.
CSS grid and flexbox really has made things easier.
I remember taking a stab at frontend a few years back.
Good lord the amount of BS you had to do just to center a div and have your site responsive is insane.
Things have drastically changed now and I am actually enjoying learning frontend
Great watching a master at work, even if you can hear the gears turning and smell the smoke from your ears! Another fantastic tutorial, thanks Kevin.
29:04 , "Whaaaaaat?" Had me dying.
I'm a CSS noob, but watching you solve these difficult challenges makes me really happy and motivated 😄
I owe all the work I've done at work to your tutorials, I successfully made my corner of the web a little bit more beautiful, thank you for everything.
These videos are the most valuable to me, I take so much out of them. Thanks for making these and please don’t stop doing so, even though these kind of videos don’t get as many views.
Bro, this has been so entertaining to watch. We often forget that the actual tutorials are prepared and everything happens exactly as you intended. With this video I realized that we all share the same emotions, victories and challenges. It was really nice to see that you too are human! :D
DAYUMMM!!! You make all this so entertaining while keeping it super insightful! Thank you!
Every one of your subscribers is deserved. Always enjoy your videos and learn something new. Thank you.
Another wonderful video from Kevin. Thank you
Awesome content!!! and great explaination as always. More of these dribble series.
I love these kind of videos, awesome stuff!
This was like attending one hour advanced css course. Thank you very much.
im 16 minutes in and im already amazed by your workflow. this really inspires me to learn sass! and i omg i NEVER knew about the windows power toys app! as soon as you mentioned it i hurriedly went and installed it. i complained about windows not having all those fancy features for so long, and the whole time they were all available in power toys 😭
This is super bonkers - THANK YOU!
I've been coding(mostly frontend) for close to 20 years now and your videos are reigniting my passion for css and coding/programming in general.
I don't know where you find that energy to be so positive about css all the time(at least on camera), but I hope this passion never leaves you. Kudos for doing this!
So glad to hear that! And yeah, I really do love this stuff, lol. Maybe I'm a bit strange 😉
Great video Kevin, I truly own my love for css to you.
Thank you for making me love the thing I feared the most!!
That design looks so sick btw
Keep doing these videos!🤜🏼
I'm a senior engineer at the company I work for but still manage to get value out of these. Great work.
I just found your channel and I just want to say that I LOVE your videos!!!! 👏 Amazing
"Switcthing to chrome as it makes me happier" haha 😄
Great, man! Make more videos like this, it's very interesting. Let's create new rubric "repeating things from" dribble, behance, etc
Dear Kevin,
I'm a Designer by trade, but thanks to your channel I'm gearing more towards Web Design now.
Sincerely,
A CSS bro
hi Kevin, another cool video from you, thank you =) it's a lot of fun to watch you puzzle over how to make this or that element, it's like I'm looking in the mirror - I also hang up and then "ah! yeah, I know how to beat you!"
p.s. in scss I usually write transition like this - in :root one variable --transition: .35s linear; and in code I write like this: transition: var(--transition); transition-property: background, color, opacity, etc. This reduces my code by millions of times, I hope it will help everyone who has read =)
Super interesting video! Thanks a lot.
29:46 , maybe set a grid-template-rows: repeat(4, 1fr) and then make all the cards span 2 rows except the large ones span 3
Great video!
Dude youre awesome person. Thank you for everythink youre my mentor
I really like you content. Pls make more video like this. Thank you. :)
I just see 1 hour, the best!
every time you upload I always take the time to watch your videos❤️
Btw I'm from Indonesia greetings🙏❤️
I learned a lot about CSS because of you sir
Hope you start a trend with the use of accessibility properties, thank you.
I loved that he put them in too, teaching via the back door.
After more then 10 years of being a webdeveloper i learned just one thing - a finished design never get touched. There is no need to bringt a big level of complexity in the project. When someone hast to change something, he scrolls to the bottom of the scss/css and overrule the existing code.
The design of the fancy card grid was also able in the 90's - with tables. And in the 00's wie did that with position absolute.
Really awsome. I watched the whole video and learnt a lot/ Thanks
U are awsome! 😆 No graphic designer can make it difficult for you 😆
woow awesome!!
Thanks Kevin 👊
It looks weird cause the images that are coming out aren't shaking in the design. Because we've put the images inside the card they're shaking with it.
If we had put them outside they wouldn't have been shaking with the card. Also would've been a lot simpler to work with the stacking context as well.
Came here to say this! +1
Ah, good point! Easiest solution then would be a parent, one for the card, one for the images, so you could isolate the shake then
You are a style-magician
Good job
1:25:52 f*** 🤷♂️😂
Love this videos, always learn something 👍
I was looking for this comment, if someone didnt catch that i would have lmao
Tbh i was alternating totally blacking out and oh ik whts he doin thw whole time... And there were moments when blacking out was sync hahaha... So what i learned? A lot... Whats the most imp? Kevin's flow of work. Simply Thank you... U r the indian math youtuber for css and I am an indian... So yeah... Well done
You're good at getting confused and enjoy it 😊
Thanks bro
for the &:hover style of elements you could use the $this variable to call the parent:
.fancy-card {
...
$this: &;
&__title {
...
}
...
&:hover {
#{$this}__title {
...
}
}
}
so you can preserve the propagation of the component name from the parent.
i hava an exam but i thought that ur video is more important 😂😂
and i was right this video is wonderful u r very intelligent
and i wanna thank you about this massive amount of information
thank u sir ❤❤❤
Notes to self:
{
width: min-content;
transition: z-index 0 350ms ease;
}
lol he start to lose his mind in the end,but its really impressive I learned a lot
This is awesome. One big difference, though, is only the card itself shakes in the original concept. However, the shadow and all images are shaking as well in the live code. I'm curious what changes would need to be made to address that?
Overall this is great for just a few hours work! One thing that bugged me was the large shadow itself also rotating around the central axis of the main box instead of around it’s own axis, as well as the popped images rotating instead of remaining static (since they’re visually “thrown” out). I think to accomplish all that you would probably have had to nest things differently, with the images and large drop shadow all adjacent to the main box (instead of everything in that main box). That would also have resolved that extra complexity induced by using the pseudo-elements as background/mask, too. 🤔
Today at time 25:00 i got clear the use of span...hussh! Long time later i make my mind to thing how to do this.😅😅as a student i love kevin ❤...love from 🇮🇳 India
Learned a lot. Codepen would be super useful though
You mispelled the name of the original author in the description, but other than this I really enjoyed that video, thanks :D
awesome content as always!! i do have a question, how come you are not using namespacing here?
So, with the hover effects for the card, how did you make the transition apply to the card/shadow getting bigger and smaller? It seems like when I transition things they only animate with the first action and then snap back roughly to the initial state. How did you change it, Kevin?
1:17:59 - I am not too familiar with SCSS but I thought of it like just programming in other languages and came up with a list of maps :)
So like this:
$images: ("id": 1, "translates": (140%, -30%), "rotates": 15deg),
("id": 2, "translates": (120%, 80%), "rotates": -10deg),
("id": 3, "translates": (20%, 100%), "rotates": 5deg),
("id": 4, "translates": (-80%, 60%), "rotates": -15deg),
("id": 5, "translates": (-90%, -50%), "rotates": 10deg);
@each $image in $images {
.fancy-card__image:nth-of-type(#{map-get($image, 'id')}) {
transform: translate(#{map-get($image, 'translates')}) rotate(#{map-get($image, 'rotates')});
transition-delay: 750ms + (map-get($image, 'id') - 1) * 100;
}
}
44:44 if you'd make the transition faster, the card would be small enough quick enough to not occupy same x and y indexes as other cards as it goes down and and up in opacity
Hi Kevin, Thanks for the terrific video :)
Do you fill bug reports when you encounter browser bugs like the one you had on Firefox?
One thing what comes in my mind is, "without trying just thinking", can we use two animation? Like one for the scale and other one for the shake effect.
Wauv! Totally Zune software like.
30:03 I may use a grid-template-rows wuth 3 rows equals, i think the smaller box should be ratio 1/0.5 et you set the middle one in rows 1/ span 2 et the second in 2/ span 3 and the smaller in rows 2 ?
flex with margins and talking them away on the top / bottom for the middle ones would have been easier imho :D
i didn't see a grid there just a row of items with different margins 🤷♂
Thank you for this nice tutorial, Kevin!
It is far above my CSS-level, but I followed along and learned a lot. :-)
I have it working but, I have some questions.
1. The images of the big boxes scale bigger then the smaller ones.
I could set the scale width and height of 70% to a hardcoded value, but thats not what I want.
How would I set this so that they are all the same size with the correct ratio of the image?
2. When a fancy-card is clicked, the card animation stops and stays open.
3. How can I make this fully responsive?
A follow up tutorial would be nice!!!
Or if anyone can help me with this, it would be appreciated a lot!
Best regards from The Netherlands,
Cor
Hi Kevin nice video👍, may I ask for a tutorial how to make navigation like dribble has
Could you use align-self: start, end and center for the vertical alignment of the cards in the grid?
Only if I set a height on the parent that was the right height to get everything aligned
Hi, I'm learning the grid and I wanted to do as you do as to the positioning of the "grid" but the console in vsc crashes me such a mistake:
"Compilation Error
Error: Incompatible units: 'em' and '%'.
on line 12 of sass / c: \ Users \ krysi \ Desktop \ project web \ cc \ css \ main.scss
>> max-width: min (100% - 3em, 50em);
----------------- ^
-------------------- "
Hey really helpful tutorial!
Could you make any tutorial using GSAP, ScrollTrigger & DRAWSVG? I think it will be really interesting!
Thanks!
Wouldn't it make more sense and keep it easier to maintain if you'd use grid of 4*4 and set the boxes to take rows: 2:3,1:3,2:4,2:3 ??
When I see those designs I curse the designer that made it(bc I don't wanna get asked to implement it) and move on but you say hum lest see how I can make it, it's gonna be fun,👀
7:31 the guy called darts
Hey Kevin,
The only difference that I can see is that your SCSS loop pops up the images in an order, which in the original design, it is somehow random (if you look closely to the bottom-left corner image in original design).
And a question: did you forget the mouse pointer design or you left it intentionally?
Thank you for the awesome content.
Wow....
did you consider using tailwindcss ?
The most non mobile friendly design ever 😂
The cards that come out of the back dont shake in the original animation. i think
29:30 how about flex row and self align items ?
Hey wizard, which trick are you going to teach us today
in 53:50, does transitioning only certain properties (as opposed to all) has any impact on performance?
Not sure, but I think yes, as your pc tries to apply the effect on all items at the same time.
19:00 my set up gets error when I try to make the .fancy-card-grid a width of: width: min(100% - 2rem, 70rem);
anyone else get an error?
solution:
width: calc(100% - 2rem);
max-width: 70rem;
Where can buy your T-shirt ？
Just curious. What will you do for mobile screen?
I didn't want to worry about it for this one, lol. I'd let the designer figure that out for me 😂
1:18:55 we all been there in our life
@kevinpowell you're the best i learned html and css with you
why are you using var(--something) in scss unstead $something? is there a problem with $something?
Nothing wrong with Sass variables, but custom properties can do a little more, like modifications through media queries, which makes font-sizing and theming easier, and also accessible to JS which can be useful for other things. If you don't mind pre-rendered values (which for some things makes a lot of sense), then $var is fine! I've sort of got in the habit of using custom props for most stuff now though.
Hi please create video about E-mail Signature This is challenge for this month 😅 please
29:30 couldn't u use grid-template-areas and then have 4 rows with pattern ". b . ." "a b c d" "a b c d" ". . c ."? (and also grid-template-rows: repeat(4, 1fr)) think that could solve your problemof hardcoding the values and it keeps the top of the grid etc intact as it is, u can ofc finetune it with changing the row height for the first and last row to make the offset bigger or smaller but it should do the trick
Yes! Would have the same thing though, in that it's "hard coded" and can't be part of a bigger grid... which is why subgrid would be great, as that approach would also work, and make life easier for making it responsive as well.
@@KevinPowell yeahhh too bad its only supported on firefox so far, would make things easier indeed
@@tailstm3325 Chrome are now working on it, which is great news.
@@Killyspudful ooh yeah that's great to hear ^^
Got me falling for CSS, hard. Curious though, why do you say “Hello my friend and friends?” Is it like wordplay on the JS/TS ‘&’?
It's "Hello my front-end friends."
Wow I am deaf. Thanks!
I thought it was friend and friends too!
@@zacmonroe1211 Nah, you're not deaf. For the longest time, that's what I thought he was saying, too. Here's his video where he (quite recently) explains this: ruclips.net/video/8mv1HJgh6-o/видео.html
Please make video for 3d three js use
It's not something I've done work with, so if I do any content on it, it would be a long way away.
@@KevinPowell so...any idea with which i can use 3d models with css
52:10 a nicer way to write your components nested in css-states is to assign & to a sass-variable
.fancy-card{
$self : &;
&:hover{
#{$self}__arrow{ }
}
}
Oh, I like that idea, thanks
link/source code?
All this work, and 99% of people won't hover long enough to see it, or will be on a touch device. Nice work though.
Kevin ✔ Thank you , this cool 🎓
who else is just watching because it's interesting and barely understands what's going on?
please please please get a better sound set up, your voice quality is horrible