Up next in 10
How To Create Animated CSS Cards
2K views
Feb 7, 2024
"How To Create Animated CSS Cards" is an instructional video that guides viewers through the process of designing and implementing animated CSS cards for web design projects. Throughout the tutorial, viewers are introduced to CSS techniques such as transitions, transformations, and keyframes, which are used to create dynamic and visually appealing card animations. The video covers essential concepts such as card structure, hover effects, and animations, providing step-by-step instructions and code examples to help viewers understand and implement each aspect effectively. By following clear demonstrations and explanations, viewers can learn how to customize and enhance CSS cards with animations to create engaging user interfaces for websites or applications. Whether you're a beginner exploring front-end development or an experienced designer seeking to add flair to your projects, this tutorial offers valuable insights into creating animated CSS cards.
View Video Transcript
0:00
Today I'm going to show you how to create these CSS card designs, but most importantly
0:05
I'm actually going to talk through how to create any style of CSS card you want, so you can
0:09
create any card and not just the ones I show you. Welcome back to WebDev Simplified
0:17
My name is Kyle, and my job is to simplify the web for you, so you can start building your Dream Project Center, and today we're going to start with CSS cards
0:23
As you can see, this is the final version of what we're going to be creating. We have a few different card styles with borders and shadows and so on, but to get started
0:29
We just need to create a simple index.html page at exclamation point and enter
0:34
and that's going to populate all of this for you if you're using VS code and Emmett. And if you're unfamiliar with how this works, I have a tutorial on Emmett linked in the cards and description down below
0:43
Now the next thing I want to do before we get any further is I want to use a custom font
0:46
because the default font looks kind of ugly. So all we've done is gone to Google fonts and search for OpenSands
0:51
I'll include a link for this down in the description below. We just want to scroll down to where we have a regular 400
0:55
select this style, and then at the top we can click this button. and here we can copy over a bunch of link tags
0:59
which are going to allow us to use that font inside of our page. So now we have the font linking
1:05
and then what we need to do is just create a simple CSS file, so we're going to say styles.cess
1:09
We want to make a selector here, and this selector is just going to be for everything
1:13
We're going to do a before, and we're going to do an after selector
1:17
We just want to set our font. So if we scroll down here, you can see we have this font family
1:21
We can just copy over and paste, and now it's going to set out the font for everything in our application
1:25
to this OpenSands font, and we're going to fall back to sans serif. Now if we just go over to our index HTML
1:30
we make sure we include a link tag for CSS, that's for that style sheet we just created
1:34
and include some font on our page. And now we open this up with Live Server. You'll see over here, we now have that custom open Sands font
1:41
If I go over to my style CSS and I comment this out, you can see that now that font is gone
1:45
So this is just a way to make our website look a little bit better. Now the very first thing that I want to do
1:49
is I actually want to just create a basic card. So inside of our body, instead of just having this text here
1:54
we're going to create a div that has the class of card. And inside of here, we're just going to put some text
1:58
This is going to be the most basic style of card, so we'll just type Lorham 20, and that just gives us 20 words of random text
2:04
And now you can see we have that random text on our screen. I'll just zoom it in a little bit so we can see that
2:08
So now, in order to create a card inside of our CSS, we can just come in here and select
2:11
that card class. And really, a card in CSS is essentially a box, generally with a white background, that has
2:17
some kind of border around it, some rounded edges, and some padding
2:20
So the first thing we want to do is we want to specify a background. In our case, we'll use white
2:25
Now this isn't going to look like it does much because our background of our body is white. But if we change the background of our body to a color such as black, and make sure we set that
2:33
as the background, and we save, you can now see that this has a white background
2:37
While if we remove this white background, you can see there's now no background at all
2:40
which is why this is really important to include on your card. Let's put this back to how we had it before
2:44
Now the next thing that we need to do is actually put in some padding. So we'll just say our padding is going to be one REM and save
2:50
And now you can see there's some space around where it used to be. If we remove that, you can see it's pushed against the edges
2:54
Now with the padding, it just gives us some space around all the edges, and that's where we can add in a simple border
2:59
Let's just say a simple one pixel solid border, and we're just going to use this 777 color
3:04
This is kind of like a grayish color. And as you can see, we now have a border around our thing, so it's starting to look a bit more like a card
3:10
But we want to round these edges to really give it that card appearance. So we'll just say border radius, and we'll just say 0.25 rm, for example
3:17
Now when we save, you can see it now has rounded edges. And this already looks a lot like a card
3:21
If we come over here, we scroll down, you can see it looks very similar to this card. right here that we have. So already this is looking very similar, but you'll notice it's just
3:28
some plain text in the middle. And generally when you have a card, you're going to have like a header section at the top, you're going to have some body, and you're going to have a footer
3:35
which has maybe some buttons. So inside of our index HTML, let's do that. We're going to create
3:39
a card header. This is going to be for our title. For example, say 1, 2, 3 main street for our
3:44
basic thing. Then we're going to have a card body. And this card body is just going to be all the
3:49
text. So let's put our text inside of there. So now we have our text inside of our card body
3:53
And then finally, we're going to have a card footer, and this is where we're going to put our buttons
3:57
So we're going to have a simple button here, and this is just going to say details. And we're going to copy that down and just going to say contact seller
4:04
Because we can imagine that this is like some kind of site like Zillow where we're selling a bunch of houses
4:08
As you can see here, we have our houses, we have a details, and a contact seller button. And this details is going to be a darker shade
4:14
So we're just going to give this here a class of button. So we can dial this. And then here we're going to give this a class of button
4:20
But this is going to be an outline button. So we'll say button, and we're going to make this an outline button, just so it doesn't quite stand out as much
4:26
As you can see, we have our two different styles of buttons here. So now with that done, we can actually go and make this look a little bit better
4:31
The first thing I want to do is come in here. I'm going to select our card header. And inside of the card header, I just want to change our font size
4:37
I want to make it 1.5 REM. So this is going to be a larger font for our header
4:41
And then I want to put some spacing. So we'll say margin on the bottom is going to be 0.5 REM
4:46
That's just going to space out our header from our body of our text right here
4:50
And I want to do the same thing with our footer. So for our card footer, all I want to do is I want to say margin on the top, and I want to set it to one REM
4:57
Just give us a little bit of extra space between our text and our buttons down here. And the reason I'm putting these margins on the footer and on the header is because let's say that we don't have a footer
5:06
We just don't have a footer on this card. Well what going to happen is all that extra margin is part of the footer so it not going to add on to the actual size of the card While if instead we did our card body and we for example said that our margin on the bottom
5:19
here was going to be one REM, and we removed that margin from our footer, you'll see now we
5:23
have this extra space at the bottom of our card which shouldn't be there. And when we have a footer, it's going to look fine
5:28
As you can see here, it looks fine. But the problem is when we don't have a footer, it has that extra space, which is why
5:33
I don't put the margin on the body itself. Instead, all I want to do inside the body is we're just going to take our font size and
5:39
we're going to make it a little bit smaller, maybe 0.8 REM. And that looks a little bit small, so let's actually change it to 0.9 REM
5:45
Put this margin back here for the footer, and as you can see, that looks pretty good. Now the next thing I want to do is actually style out our buttons
5:51
So we can just say here, we have our button, and our button is going to have some type of background
5:55
And this background is going to be a specific color, which we're going to say HSL 200, 50%, and 50%
6:00
which is going to give us this interesting blue color, as you can see. And we're going to get rid of the border
6:05
We'll say border none, that's going to look pretty good. And let's change our color to a white color
6:10
So we'll say color is white, so our text stands out a little bit better. And the next thing I want to do is add in some padding
6:15
So we'll say our padding here is going to be 0.5 EM and 0.75 EM
6:20
And the reason here that I'm using EM instead of REM is because I want the actual padding to scale with my font size
6:26
So when I change my font size here to one REM, you can see that the padding scales with it
6:31
While if I used REMs here, the padding is not going to scale with it as well
6:35
which is why EMs are almost always better when dealing with buttons and things like that, where you want it to scale with your font size
6:40
And again, I have a full video on the differences between REM and EM. You can check in the cards and description
6:44
Now just to rand out the rest of these buttons, we want to add in a border radius. So we'll say our border radius is going to be 0.25 EM, again, using EMs
6:52
And we're going to make sure here that our cursor is set to pointer. So when we hover it, you can see that it gives us that nice little pointer cursor
6:58
And the next thing that I want to do is I want to set a hover state for our button. So we can say a button, and when we hover our button, or when we focus
7:05
on our button so when we have our focus date we just want to change the background so we'll say
7:09
that our background here is going to be that same HSL 200 with 50%. And instead of here we're
7:15
going to have our lightness be set to 60%. So it's just going to be a slightly lighter blue color
7:19
but it's going to be the same otherwise. So when we hover you can see nothing changes. The reason for that is I forgot to put a comma here after 200. So now when I hover you can see it
7:27
gets that lighter color and I love using HSL and I have an entire video on HSL. I'll link in the
7:32
cards and description for you. But continuing onwards, now we want to to do our outline button. So we can say button and this is going to be for that outline class
7:39
So here all we want to do is take our background and remove it. So we're going to say background
7:43
none and that's going to get rid of the background which is great. But now what we need to do is you need to take our border and we need to add in a border. So we'll say border is one pixel
7:51
solid and we're going to use here that same color but instead of copying this color from here
7:57
and pasting it down here instead what I'm going to do is I'm going to create a variable called the color and it's going to contain this color. So we'll just say our color variable is this color
8:05
and then to access that variable we'll just say var and we'll say color now we can access that color
8:09
anywhere same thing down here i can say var color and that's going to work exactly the same and now if
8:16
i need to change this for example to a green color i can do it in one spot and it's going to work
8:20
everywhere this is a really great thing to do now the last thing i need to do is add our color here
8:24
which again is going to use that color variable and save and now you can see we have the outline
8:28
version and the solid version of our button and if you're unfamiliar with these CSS variables i have a
8:32
full video on it, I'll link in the cards and description for you. And the last thing I need to do for our buttons is just add a little effect for our hover
8:39
and for our focus. So we'll say button, button outline, focus. And here, all I want to do is I just want to change our background
8:47
I don't want to make our background very similar to this cover, but I want to make it a really
8:51
light version. We'll just say, for example, 90%. So now when I hover, you can see that it looks like it's being hovered because it has
8:56
that background showing up behind it, which is a similar color to our blue, just a very light version of it. Now lastly I just want to put a little extra space between our buttons
9:04
So this is a really neat trick you can do is if you have two elements you always want to space out from one another if you have more than one you can say button plus and then again put
9:11
our button class and here we'll just say margin on the left is going to be 0.25 rm
9:16
and as you can see that's going to add some space. If we change just to 0.5 rm you can see the space
9:20
gets larger 5 rm even larger and the reason that this works is that saying if you have a button
9:24
directly followed by another button put some space on the left of the second button. This is a really
9:29
handy CSS select that you can use. And if you're kind of unfamiliar with these fancy, you know
9:33
plus signs CSS selectors, I have a full CSS selector cheat sheet. I'll link down in the description
9:37
for you that you can download. It's going to cover all those complex selectors. So at this point
9:42
we've covered the most basic style of card that you can design. It's a card that has a header, it has some body, it has some things, some buttons that you can press, and it has a solid
9:49
border around it. But this is generally not the best style of card you can sign. If we go over
9:53
here, you can see we have that border version of the card right here. But also below it, it might
9:57
be a little hard to see, you can see we have a shadow version. Up here, you can see the same thing. We have this card that has a shadow going around it instead of the border. And personally, I think
10:04
the shadow almost always looks better. So I want to show you how to create that as well. So let's
10:08
go into our index.html. And all I'm going to do is I'm just going to take this card that we have. I'm just going to copy it down below. And we're going to say card shadow right here
10:18
This is going to be for the shadow version of our card And instead of our CSS all we need to do is come all the way up here and we can select our card that has the card shadow class And here I want to remove our border So we say border none that gets rid of the border force
10:31
And instead, I want to replace this with a box shadow. Now, box shadow is a bit confusing on how it works
10:35
The first number you put in is going to be the X offset, so how far right or left your X offset of your shadow is
10:41
In our case, we want it to be dead center, so we're going to put zero. Now, the next number is the Y offset
10:45
And generally, when you create a shadow, you want it to be darker on the bottom and lighter on the top
10:49
So we're going to offset downwards by two pixels in the Y direction. Next comes the blur, so kind of how far out your shadow expands
10:56
In our case, we'll just do five pixels, pretty good number. And spread is kind of like how far your shadow stays the same dark color
11:02
In our case, we don't want any spread because spread kind of adds like a border. So we're going to set our spread to zero
11:07
And then we want to have essentially a very dark color, so we're going to choose black. We want to make it mostly transparent
11:12
So we're going to use 0.2 right here. And if I save, you can now see we have a shadow where it's kind of dark on the bottom here
11:17
but on the top it's lighter. And this will be easy to see if I just comment out this card up here
11:21
You can see we now just have our shadow card where there's not very much shadow at all on the top, but it's much darker on the bottom
11:26
And that's again because it's offset here. If I change this to zero, you can see now my shadow is the same on the top and the bottom
11:32
and generally it just doesn't look quite as good to having more shadow on the bottom and less on the top
11:37
Now let's go back to where we had two different cards inside of our thing. So let's just uncomment that
11:41
So now we have two cards. And what I want to do is I want to be able to style these cards so that they actually are laid out well
11:45
because right now what happens, Let's just zoom this out a little bit. You can see these cards are very wide
11:49
You know, as I keep zooming out, they're incredibly wide. And I really don't want them to be that wide. So what I could do is, you know, I could come into my card and I could say max width, here's, you know, 300 pixels
11:58
And now when I zoom in, you can see that they're always 300 pixels wide or they fill the full screen if my screen is less than 300 pixels
12:04
That works, but sometimes you need your cards to be a little bigger, a little smaller. So instead what I like to do is I like to put them inside of a container
12:10
So what I'm going to do is I'm going to wrap this entire thing inside of a container called a card grid
12:14
and we're going to use CSS Grid to lay out these cards. Now if you're unfamiliar with CSS Grid, I have an entire tutorial super in-depth that covers it
12:21
I'll link in the cards in description below for you, but we're just going to cover the very basics of how it works
12:25
So inside of here, we're going to select our card grid class, and we're going to set the display to grid
12:30
This is going to lay things out in a grid, and we're going to specify our columns. And essentially, what we want to do is we want to have an automatic number of columns, where the minimum size is going to be 300 pixels
12:39
So what would do is we say repeat. We want to make it automatic, so we're just going to say auto-fill
12:43
We're going to say min-max, so our minimum size is 300 pixels, and our maximum size is 1FR
12:48
which means it'll grow to be as large as it needs to be. So now when I save, you can see that our cards are laid out, and as my screen changes in size
12:56
you can see that they get wider and wider. And I do have an issue here where it's doing auto-fill
13:00
Let's change just to auto-fit instead. So now, if we expand our screen size, you can see we don't have that issue where it got smaller
13:06
But the important thing is, as we get really, really small, you can see once we get below 300 pixels, and now goes on to the next line
13:11
So it's going to essentially put as many as it can on one line, and if they get too small, it's going to move them onto the next line
13:17
That's really great. Now, the last thing I want to do is just add some space. So we're going to say gap is one R-A-M, and that's just going to put some space between them
13:24
And then if our cards are different heights, so for example, we have extra text inside of this one
13:28
Let me just add a bunch extra text. You can see that this card is that got a little bit extra space at the bottom
13:33
If I copy this and paste it down, it's going to become really obvious. You can see all this extra space here
13:37
It looks kind of bad. So we're going to say align items, flex, start. and it's just going to make it so it's always at the top
13:43
and it doesn't expand to fill the full height. And let me remove all that extra text
13:46
we don't really need that. And as you can see, these cards look pretty good. So at this point, we've covered how to create a dark border
13:51
We've covered how to create a shadowed border, and we've also covered how you can kind of create a grid to put your cards in
13:56
The next thing I want to talk about is how you can actually create cards that have images at the top. As you can see, these cards have an image at the top
14:01
It's a really professional and clean look, and it's something you're going to see all the time, and there's a lot of nuance into how to make this actually work correctly
14:07
So this is pretty complex, but I'm going to cover it exactly how it needs to work. So what we want to do is we're going to come in here and create a brand new card
14:13
I'm just going to copy the card with the shadow because I think the shadows look better in my opinion. And instead of having this header with text inside of it, instead we're going to put an image inside of here
14:21
And this image is just going to have a source. Now in order to get all these images, I'm using unsplash
14:26
As you can see here, we can search for a bunch of different house images. And what you just need to do is you need to take a URL
14:31
I'm going to paste one in here. It's just HTTPS, cossossoss, backslash, backslash. source.unsplash.com slash and you just copy the ID
14:38
So if I click on an image up here, you can see we have the ID. And I can just copy and paste that ID and put it inside it here if I want
14:44
So for example, this is this house right here. For example, I'll just copy this ID, paste it into here
14:48
Now when I come over here, you can see that that house is showing up. It's quite large right now. We're going to fix that
14:53
But as you can see, that's the exact house I got from my unsplashed page right here
14:57
And you can choose any houses you want. It really doesn't matter. Now the last thing I want to do, to be able to say that this is a card image
15:02
I'm going to just put a card image class on my. my header so I know that this is a header that contains an image instead of a header that
15:08
contains text. And now I can come down inside of here and actually start styling this. So I can say
15:12
card header.comed image to select all of those headers that have an image inside of them. Now here
15:17
all I want to do is I want to set my overflow to hidden. And that's just going to make it so that
15:21
the image no longer overflows its container. That's really important. And the next thing that
15:25
I want to do is I want to select our card header. I want to select the card image. And I actually
15:30
want to get the image directly inside of that So we can say IMG here to get that image tag And importantly I want to change the display here to block so I can actually change the width and height And I want to set the width to 100 to 100 width of our container And already that looks a lot better but not quite what we looking for
15:46
The next thing I want to do is want to spend an aspect ratio. So I want to make sure our aspect ratio is 16 by 9
15:51
This is a super cool CSS property where now our image has been changed to a 16 by 9 aspect ratio
15:57
But you notice it looks a little bit scrunched. The house kind of got scrunched downwards as it changed the size of the image
16:01
So what I want to do is change my object fit here, and I want to change this to cover
16:05
What this is going to do is it so that the aspect ratio of the image is always maintained
16:10
So if the image is, for example, 17 by 9, then the aspect ratio is going to be maintained
16:15
and it's just going to overflow the edge of our container. And this is important because there are certain images here, for example, this house, is a very
16:21
tall image, while this one is a very wide image. So using object fit cover, I can always make sure that the actual aspect ratio of the image
16:27
is maintained so it doesn't distort and stretch the image. This one is already mostly rectangular, so there's not a huge amount of distortion that shows up
16:34
but it does make it look a little bit better. Now another thing I want to do is I want to specify a max height on here of 200 pixels
16:41
And the reason for this is that as our screen starts to get a little bit bigger and wider
16:45
so as we get wider and wider and wider, you can see our image is growing essentially. If we didn't have this max height here, you can see it gets very tall
16:51
and as it gets wider and wider, you can see that this image gets taller and taller and shorter and shorter
16:55
We never wanted to get too tall or too wide, which is why we're setting that max height of 200%
17:00
on our image. Now another thing that's important is I want to make sure that we always center
17:04
our image. So we can say our object position here, if we just get object, oops, position
17:09
I want to change that to center. And that means it always going to focus on the center of the image
17:13
So no matter how small or large our image gets, it's always focused on the center, which is generally
17:17
where the house is going to be. And this so far looks pretty good. But the main problem we have
17:21
is all the padding around the edge of our card. Remember, up here in our card, we set a padding
17:25
of one REM. And that works great for basic cards. But when you want stuff to go all the way to the
17:29
edge like our image here, the padding actually cannot be defined on the cart. Instead, we need to remove this padding from our card, and now you can see the image
17:36
touches the edge, but everything else is also touching the edge, which looks really bad
17:40
So instead, I'm going to specify a custom variable called padding, which we set to one REM
17:45
Then inside of the header here, all I want to do is I want to say our padding here is going
17:49
to be equal to that padding variable. And if I save, you're going to notice it looks mostly good, but it's going to give us some
17:55
padding on the bottom as well. So I'm going to say our padding on the bottom, whoops, padding bottom is going to be equal to zero
18:01
and that gets rid of that extra space on the bottom. Now, an important thing to note, though
18:05
is inside of our image version, I want to actually have no padding. So here, our padding is going to be set to zero
18:10
So if it's just a text version, here we have padding just fine, but if it's an image version, we have no padding
18:16
Now immediately you'll notice one issue. Our rounded corners are now no longer here
18:20
Our image does not have those rounded corners. To fix this, on our card, just set our overflow to hidden
18:25
and this is going to make it since our card has rounded borders, and the image overlaps those rounded borders
18:30
You can see that now we have rounded borders on our image. Now all we need to do is add this padding to the rest of our page
18:35
So down here on our body, we're going to set our padding is equal to zero, and then our padding variable
18:40
And that's because we want our vertical padding to be zero, which is this first number, and our horizontal padding to be the padding for our card
18:46
As you can see, it pushes that text in on the sides. And then our footing, same thing. Our padding is going to be our padding variable
18:52
And we just want to remove the padding on the top. and set that to zero just because we don't want extra space on the top
18:58
And now immediately our card looks so much better, but now we have a full-size image here instead of that smaller image
19:02
Now the only thing left to do is to do this nice little zoom in effect. As you can see on these images, we're giving it a little zoom effect when we hover over the card
19:09
It just looks awesome and professional. So we're going to add that in, and it's surprisingly simple
19:13
So select our card header, and we want to get the card image. We want to get the image inside of it
19:18
And the important thing is we want to do this anytime we hover over our card. So we'll just say card, hover, and anytime we have
19:25
hover our card, the card inside of it with the header is the one that we're going to zoom, and all I want to do is I want to take our transform
19:32
Here, I want to take our scale, and I want to just do a very small zoom. We'll do like 1.025
19:37
Now you can see when I hover, it actually doesn't do anything right now. And that's because I put dot image here instead of image
19:42
Now if I go rid of that, you can see that it's zooming in our image, which looks really good
19:46
But of course, we want it to be a smooth transition instead of just this jumpy animation
19:50
So to do that, we can say transition, and we want to set our transition to 200 milliseconds
19:55
it's going to transition our transform property because that's the one that we want to change
19:58
and we're going to make it an ease in out so now when we hover it you can see it has that nice
20:03
really slow zoom in effect and it just looks really good and it always stays centered on the image
20:07
now to prove to you that all of this works really well no matter the size of the image i'm just going to copy this card one more time paste it down and what i'm going to do is i'm going to
20:15
change our image so here we're going to get that very tall vertical image let's copy the
20:19
ID for this we're going to paste that in we're going to go back over to our page and whoops this page
20:25
And you're going to see, even though that was a super tall image, it perfectly fits, it's the exact same size of the other image
20:29
and it still has that really cool zoom effect. It's centered on the actual house, and overall just looks really good
20:35
Since you made it to the end, you get the bonus shot of a sleeping dog, but it also means that you probably really enjoy CSS
20:40
which means you're going to love my CSS selector cheat sheet, which teaches you everything you need to know about every single CSS selector
20:46
It's completely free. I'm linking it down in the description below, and with that said, thank you very much for watching and have a good day
#Online Goodies
#Skins
# Themes & Wallpapers
#Web Design & Development