A beginner's tutorial for building an 🃏 animated stacked card list with CSS & HTML. Inspired by css-tricks homepage. https://fireship.io/lessons/css-cards-animated/

Inspired by https://CSS-tricks.com homepage
Source https://github.com/fireship-io/stacked-card-list

00:00 Intro
00:36 Layout
02:55 Shadows
03:20 Scrollbar
03:55 Animation
05:30 SVG Semicircle
07:48 Gradient Text

#css #tutorial

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:06:50.715Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
572c68f3-583d-47a9-9e10-d8c0ffb67b84
132ce12208a1c61963d1039af291201caebc1fc1f50f5142685fb9a0198c0305
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
I happen to be on CSS Tricks the other day and when I saw this animated card list, I thought, wow.
That's a cool CSS trick.
So in today's beginner friendly tutorial, we're going to reverse engineer this UI element using nothing but HTML and CSS.
Over the next few minutes, you'll learn how to combine both grid and flexbox layout to position the cards.
We'll use transforms and shadows to make it look like the cards are stacked on top of each other.
We'll implement some transition animations, and I'll throw in a few other tricks, like a gradient text background and SVG styles for this little semicircle under the avatar.
If you're new here, like and subscribe, and you can find the full source code for this project on GitHub and follow along with a write up on FireShip bio.
We're going to build this feature step by step from scratch.
So pull up your editor and create a file called card dot CSS and index dot HTML.
In your HTML, type an exclamation point followed by tab to create the initial boilerplate.
Then, in the head of the document, type in link to access the snippet for a CSS link and then point it to your card dot CSS file.
In the body of the document, we'll add a section.
This will be the main container for the card list, then each individual card will be represented by an article element.
We'll add a header to each individual card, then later in the video, we'll come back and add an avatar and some tags.
Now rather than target these elements directly, I'm going to add a class name to each element.
Then I'm going to copy and paste our markup so we have multiple cards to work with.
And just a friendly reminder, it's much easier to copy and paste this markup from GitHub.
Now one quick thing I wanna point out is that instead of a section, article, and header, I could have just called all these elements to divs.
This would work perfectly fine, but when you write HTML, you want to use semantic elements where you can.
Or, in other words, use elements that clearly define what the content is all about.
In any case, we We can open up our HTML by right clicking on the file and clicking copy path.
And we can paste that into the browser and you should get a result that looks like this.
And now we're ready to start implementing some CSS tricks.
At the top of the file, I'm going to import a Google font, then I'll add some global styles to the body tag like a dark background and setting that font family as the default font.
And our UI is already looking much better.
Currently, the cards are flowing vertically, but we want them to flow horizontally.
We can make that happen by setting display flex on our card list, which by default will place the items into a row.
In other words, it'll take all the cards in the list and adjust their width according to the available space in the container.
We call that a flexible row and, of course, you can learn more about it in my 100 seconds of flexbox video.
And and then we'll add a little bit of padding to that container as well.
That takes care of our row.
Now we can think of each individual card as a column within that row.
So we'll also give that a display of flex.
We'll set its position to relative and then the flex direction to column to make any content inside the card flow vertically.
We want each card to have the same height and width, so we can use fixed pixel values there, then we'll set the min width to 250.
If we have a bunch of cards in the container, we don't want them to get squeezed too small.
Instead, we'll let them flow to their minimum width, and and then we'll let the overflow scroll horizontally.
Now our cards are in a scrollable container, but it's hard to tell when one card finishes and the next one starts.
One subtle yet powerful way to address that is to give each card some shadow.
1st, we'll use border radius to round the edges, then we'll give it a background color, and then we can set a box shadow and notice how the first value is negative.
This little trick will put the shadow on the right side of the box which makes the card on the right look like it's hovering above the card on the left.
That's because that first value represents the horizontal offset of the shadow.
But notice how the scroll bar on the card list is really ugly.
Let's go ahead and address that now.
We We'll wanna set its overflow x property to scroll, and then we have 3 pseudo elements that we can style.
We can give the scroll bar itself a width and height of 10 pixels, then the scroll bar thumb is the thing the user actually drags around.
We'll give it a background, radius, and we'll give it a box shadow with an inset value, which puts the shadow on the inside of the element.
And, lastly, we have the scroll bar track, which will give a background with a linear gradient.
And now our scroll bar is much nicer looking, but just keep in mind that the scroll bar pseudo elements aren't supported on every browser.
So don't expect this to look good on every device.
And that brings us to the next trick, the animation when we hover over the cards.
Watch the animation closely.
When we hover over a card, It moves up by a few pixels, then all of the siblings that come after it move to the right, while all of the siblings before it stay put.
We'll start by grabbing the card that's by hovered by using the hover pseudo selector.
We'll then use transform to move or translate that card along the y axis by negative one rem.
That will move it in an upward direction equal to the root font size, which is about 15 pixels in our case.
That's easy enough, but the tricky part here is selecting all of the children that come after the hovered card.
When a card has focus or when it's hovered, we'll use the tilde character to select all of the elements that are siblings that come after it with the card clasp.
It's called the general sibling combinator, and it grabs all the children after the element, but not the element itself or any of the siblings before it.
After selecting those elements, we can then use transform to translate or move those elements across the x axis by a 130 pixels.
And as a final touch, we need to grab every card element that's not the first child in the list and set its margin left to negative 130 to offset the transformation.
Otherwise, there will be a big gap in between the cards.
Not is called the negation pseudo class.
It basically does the opposite of whatever you're telling it to do or in our case, grab every card that is not the first card.
At this point, things are looking pretty good, but there's no timing in the animation, so it looks really jerky.
We can address that by simply adding a transition for 0.2 seconds in this case to the card class.
Now whenever a property value changes on the card, it will take 0.2 seconds to translate between the old value and the new value.
That takes care of the main card stack, but I still have a few more tricks up my sleeve.
What What I want to show you next is how we can add an avatar along with this semicircle underneath it.
To get that started, we'll need to go back into our HTML.
Then inside the card class below the header, we'll add a div for the card author.
Inside of that element, we'll add a link for the author avatar.
And inside that link, we'll add an image tag that points to an image I recently added to the project.
This can be any image that you want.
Now in order to add a half circle border to the image, we need to add an SVG graphic below it.
You'll wanna just copy this value from the main source code, but, basically, it's just a single SVG graphic with a path of a half circle.
And then below that, we'll add another div with the author name as well as an author name prefix to add some additional styling there.
Currently, everything looks very out of whack, so let's head back into our CSS code.
Currently, the card author lives inside of a flex column, but there's no reason we can't make this element a grid to display the elements inside of it.
So that's exactly what we'll do here by setting display to grid.
We have the avatar image on the left side, and we want that container to always be 75 pixels.
So we can set the grid template columns property to 75 for the 1st column and then 1 fractional unit for the next column to make that column responsive.
Then we'll align the grid items to the center and add some margin to it.
From there, we can move on to the image element inside of the author avatar div.
We'll wanna make sure it's display block because images are inline by default.
We'll give it a fixed width and height, and then set the border radius to 50% to make it appear as a circle.
Then if you want to turn it into a black and white image, you can use filter along with the grayscale value set to a 100%.
That puts the image in the right place, but now we need to move our SVG underneath it.
We can target the SVG directly with our half circle class and we'll set its position to absolute.
This allows us to move it anywhere within the grid area.
So let's move it to the bottom left.
We can define the width and height, but it's currently displayed as a black half circle.
What we actually wanna do is remove the fill color from the shape, so we set the fill property to none.
Then we give it a border by defining the stroke property.
The stroke has a color, width, and a line cap value, which when set to round, will give it a rounded edge.
Then as a final touch, we'll style the author name prefix class to a bold light gray color.
That takes care of our avatar section, and now we're ready for the final trick, which answers the question, how do we apply a CSS gradient to text?
Unfortunately, it's not as easy as just targeting the color property.
When we try to apply a linear gradient to color, you can see that nothing happens.
What we actually need to do is set the background of the element, then use the shape of the text to clip the background.
Let's go ahead and change the color property to background, and then we'll set the text shadow to none.
Then we'll use background clip to use the text shape to essentially cut out the background.
We also need to use the web kit vendor prefix for background clip, and text fill color set to transparent.
This will allow the background color to flow through the text shape.
And now, we have this cool gradient effect when we hover over a header in the card.
Just keep in mind that browser support for this particular trick is fairly limited.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe.
And if you want access to more advanced full stack content, consider becoming a number at Fireship IO.
Thanks for watching and I will see you in the next one.

Speaker 0: I happen to be on CSS Tricks the other day and when I saw this animated card list, I thought, wow. That's a cool CSS trick. So in today's beginner friendly tutorial, we're going to reverse engineer this UI element using nothing but HTML and CSS. Over the next few minutes, you'll learn how to combine both grid and flexbox layout to position the cards. We'll use transforms and shadows to make it look like the cards are stacked on top of each other.

We'll implement some transition animations, and I'll throw in a few other tricks, like a gradient text background and SVG styles for this little semicircle under the avatar. If you're new here, like and subscribe, and you can find the full source code for this project on GitHub and follow along with a write up on FireShip bio. We're going to build this feature step by step from scratch. So pull up your editor and create a file called card dot CSS and index dot HTML. In your HTML, type an exclamation point followed by tab to create the initial boilerplate.

Then, in the head of the document, type in link to access the snippet for a CSS link and then point it to your card dot CSS file. In the body of the document, we'll add a section. This will be the main container for the card list, then each individual card will be represented by an article element. We'll add a header to each individual card, then later in the video, we'll come back and add an avatar and some tags. Now rather than target these elements directly, I'm going to add a class name to each element.

Then I'm going to copy and paste our markup so we have multiple cards to work with. And just a friendly reminder, it's much easier to copy and paste this markup from GitHub. Now one quick thing I wanna point out is that instead of a section, article, and header, I could have just called all these elements to divs. This would work perfectly fine, but when you write HTML, you want to use semantic elements where you can. Or, in other words, use elements that clearly define what the content is all about.

In any case, we We can open up our HTML by right clicking on the file and clicking copy path. And we can paste that into the browser and you should get a result that looks like this. And now we're ready to start implementing some CSS tricks. At the top of the file, I'm going to import a Google font, then I'll add some global styles to the body tag like a dark background and setting that font family as the default font. And our UI is already looking much better.

Currently, the cards are flowing vertically, but we want them to flow horizontally. We can make that happen by setting display flex on our card list, which by default will place the items into a row. In other words, it'll take all the cards in the list and adjust their width according to the available space in the container. We call that a flexible row and, of course, you can learn more about it in my 100 seconds of flexbox video. And and then we'll add a little bit of padding to that container as well.

That takes care of our row. Now we can think of each individual card as a column within that row. So we'll also give that a display of flex. We'll set its position to relative and then the flex direction to column to make any content inside the card flow vertically. We want each card to have the same height and width, so we can use fixed pixel values there, then we'll set the min width to 250.

If we have a bunch of cards in the container, we don't want them to get squeezed too small. Instead, we'll let them flow to their minimum width, and and then we'll let the overflow scroll horizontally. Now our cards are in a scrollable container, but it's hard to tell when one card finishes and the next one starts. One subtle yet powerful way to address that is to give each card some shadow. 1st, we'll use border radius to round the edges, then we'll give it a background color, and then we can set a box shadow and notice how the first value is negative.

This little trick will put the shadow on the right side of the box which makes the card on the right look like it's hovering above the card on the left. That's because that first value represents the horizontal offset of the shadow. But notice how the scroll bar on the card list is really ugly. Let's go ahead and address that now. We We'll wanna set its overflow x property to scroll, and then we have 3 pseudo elements that we can style.

We can give the scroll bar itself a width and height of 10 pixels, then the scroll bar thumb is the thing the user actually drags around. We'll give it a background, radius, and we'll give it a box shadow with an inset value, which puts the shadow on the inside of the element. And, lastly, we have the scroll bar track, which will give a background with a linear gradient. And now our scroll bar is much nicer looking, but just keep in mind that the scroll bar pseudo elements aren't supported on every browser. So don't expect this to look good on every device.

And that brings us to the next trick, the animation when we hover over the cards. Watch the animation closely. When we hover over a card, It moves up by a few pixels, then all of the siblings that come after it move to the right, while all of the siblings before it stay put. We'll start by grabbing the card that's by hovered by using the hover pseudo selector. We'll then use transform to move or translate that card along the y axis by negative one rem.

That will move it in an upward direction equal to the root font size, which is about 15 pixels in our case. That's easy enough, but the tricky part here is selecting all of the children that come after the hovered card. When a card has focus or when it's hovered, we'll use the tilde character to select all of the elements that are siblings that come after it with the card clasp. It's called the general sibling combinator, and it grabs all the children after the element, but not the element itself or any of the siblings before it. After selecting those elements, we can then use transform to translate or move those elements across the x axis by a 130 pixels.

And as a final touch, we need to grab every card element that's not the first child in the list and set its margin left to negative 130 to offset the transformation. Otherwise, there will be a big gap in between the cards. Not is called the negation pseudo class. It basically does the opposite of whatever you're telling it to do or in our case, grab every card that is not the first card. At this point, things are looking pretty good, but there's no timing in the animation, so it looks really jerky.

We can address that by simply adding a transition for 0.2 seconds in this case to the card class. Now whenever a property value changes on the card, it will take 0.2 seconds to translate between the old value and the new value. That takes care of the main card stack, but I still have a few more tricks up my sleeve. What What I want to show you next is how we can add an avatar along with this semicircle underneath it. To get that started, we'll need to go back into our HTML.

Then inside the card class below the header, we'll add a div for the card author. Inside of that element, we'll add a link for the author avatar. And inside that link, we'll add an image tag that points to an image I recently added to the project. This can be any image that you want. Now in order to add a half circle border to the image, we need to add an SVG graphic below it.

You'll wanna just copy this value from the main source code, but, basically, it's just a single SVG graphic with a path of a half circle. And then below that, we'll add another div with the author name as well as an author name prefix to add some additional styling there. Currently, everything looks very out of whack, so let's head back into our CSS code. Currently, the card author lives inside of a flex column, but there's no reason we can't make this element a grid to display the elements inside of it. So that's exactly what we'll do here by setting display to grid.

We have the avatar image on the left side, and we want that container to always be 75 pixels. So we can set the grid template columns property to 75 for the 1st column and then 1 fractional unit for the next column to make that column responsive. Then we'll align the grid items to the center and add some margin to it. From there, we can move on to the image element inside of the author avatar div. We'll wanna make sure it's display block because images are inline by default.

We'll give it a fixed width and height, and then set the border radius to 50% to make it appear as a circle. Then if you want to turn it into a black and white image, you can use filter along with the grayscale value set to a 100%. That puts the image in the right place, but now we need to move our SVG underneath it. We can target the SVG directly with our half circle class and we'll set its position to absolute. This allows us to move it anywhere within the grid area.

So let's move it to the bottom left. We can define the width and height, but it's currently displayed as a black half circle. What we actually wanna do is remove the fill color from the shape, so we set the fill property to none. Then we give it a border by defining the stroke property. The stroke has a color, width, and a line cap value, which when set to round, will give it a rounded edge.

Then as a final touch, we'll style the author name prefix class to a bold light gray color. That takes care of our avatar section, and now we're ready for the final trick, which answers the question, how do we apply a CSS gradient to text? Unfortunately, it's not as easy as just targeting the color property. When we try to apply a linear gradient to color, you can see that nothing happens. What we actually need to do is set the background of the element, then use the shape of the text to clip the background.

Let's go ahead and change the color property to background, and then we'll set the text shadow to none. Then we'll use background clip to use the text shape to essentially cut out the background. We also need to use the web kit vendor prefix for background clip, and text fill color set to transparent. This will allow the background color to flow through the text shape. And now, we have this cool gradient effect when we hover over a header in the card.

Just keep in mind that browser support for this particular trick is fairly limited. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you want access to more advanced full stack content, consider becoming a number at Fireship IO. Thanks for watching and I will see you in the next one.
I happen to be on CSS Tricks the other day and when I saw this animated card list, I thought, wow. That's a cool CSS trick. So in today's beginner friendly tutorial, we're going to reverse engineer this UI element using nothing but HTML and CSS. Over the next few minutes, you'll learn how to combine both grid and flexbox layout to position the cards. We'll use transforms and shadows to make it look like the cards are stacked on top of each other. We'll implement some transition animations, and I'll throw in a few other tricks, like a gradient text background and SVG styles for this little semicircle under the avatar. If you're new here, like and subscribe, and you can find the full source code for this project on GitHub and follow along with a write up on FireShip bio. We're going to build this feature step by step from scratch. So pull up your editor and create a file called card dot CSS and index dot HTML.
animation
robotics
software
In your HTML, type an exclamation point followed by tab to create the initial boilerplate. Then, in the head of the document, type in link to access the snippet for a CSS link and then point it to your card dot CSS file. In the body of the document, we'll add a section. This will be the main container for the card list, then each individual card will be represented by an article element. We'll add a header to each individual card, then later in the video, we'll come back and add an avatar and some tags. Now rather than target these elements directly, I'm going to add a class name to each element. Then I'm going to copy and paste our markup so we have multiple cards to work with. And just a friendly reminder, it's much easier to copy and paste this markup from GitHub. Now one quick thing I wanna point out is that instead of a section, article, and header, I could have just called all these elements to divs. This would work perfectly fine, but when you write HTML, you want to use semantic elements where you can. Or, in other words, use elements that clearly define what the content is all about. In any case, we We can open up our HTML by right clicking on the file and clicking copy path. And we can paste that into the browser and you should get a result that looks like this. And now we're ready to start implementing some CSS tricks. At the top of the file, I'm going to import a Google font, then I'll add some global styles to the body tag like a dark background and setting that font family as the default font. And our UI is already looking much better. Currently, the cards are flowing vertically, but we want them to flow horizontally. We can make that happen by setting display flex on our card list, which by default will place the items into a row. In other words, it'll take all the cards in the list and adjust their width according to the available space in the container. We call that a flexible row and, of course, you can learn more about it in my 100 seconds of flexbox video. And and then we'll add a little bit of padding to that container as well. That takes care of our row. Now we can think of each individual card as a column within that row. So we'll also give that a display of flex. We'll set its position to relative and then the flex direction to column to make any content inside the card flow vertically. We want each card to have the same height and width, so we can use fixed pixel values there, then we'll set the min width to 250. If we have a bunch of cards in the container, we don't want them to get squeezed too small. Instead, we'll let them flow to their minimum width, and and then we'll let the overflow scroll horizontally. Now our cards are in a scrollable container, but it's hard to tell when one card finishes and the next one starts. One subtle yet powerful way to address that is to give each card some shadow.
1st, we'll use border radius to round the edges, then we'll give it a background color, and then we can set a box shadow and notice how the first value is negative. This little trick will put the shadow on the right side of the box which makes the card on the right look like it's hovering above the card on the left.
geometry
That's because that first value represents the horizontal offset of the shadow. But notice how the scroll bar on the card list is really ugly. Let's go ahead and address that now. We We'll wanna set its overflow x property to scroll, and then we have 3 pseudo elements that we can style. We can give the scroll bar itself a width and height of 10 pixels, then the scroll bar thumb is the thing the user actually drags around. We'll give it a background, radius, and we'll give it a box shadow with an inset value, which puts the shadow on the inside of the element. And, lastly, we have the scroll bar track, which will give a background with a linear gradient. And now our scroll bar is much nicer looking, but just keep in mind that the scroll bar pseudo elements aren't supported on every browser.
So don't expect this to look good on every device. And that brings us to the next trick, the animation when we hover over the cards. Watch the animation closely. When we hover over a card, It moves up by a few pixels, then all of the siblings that come after it move to the right, while all of the siblings before it stay put. We'll start by grabbing the card that's by hovered by using the hover pseudo selector.
animation
toys
We'll then use transform to move or translate that card along the y axis by negative one rem. That will move it in an upward direction equal to the root font size, which is about 15 pixels in our case. That's easy enough, but the tricky part here is selecting all of the children that come after the hovered card.
When a card has focus or when it's hovered, we'll use the tilde character to select all of the elements that are siblings that come after it with the card clasp. It's called the general sibling combinator, and it grabs all the children after the element, but not the element itself or any of the siblings before it. After selecting those elements, we can then use transform to translate or move those elements across the x axis by a 130 pixels. And as a final touch, we need to grab every card element that's not the first child in the list and set its margin left to negative 130 to offset the transformation. Otherwise, there will be a big gap in between the cards. Not is called the negation pseudo class. It basically does the opposite of whatever you're telling it to do or in our case, grab every card that is not the first card. At this point, things are looking pretty good, but there's no timing in the animation, so it looks really jerky.
children
geometry
gambling
We can address that by simply adding a transition for 0.2 seconds in this case to the card class. Now whenever a property value changes on the card, it will take 0.2 seconds to translate between the old value and the new value. That takes care of the main card stack, but I still have a few more tricks up my sleeve. What What I want to show you next is how we can add an avatar along with this semicircle underneath it. To get that started, we'll need to go back into our HTML. Then inside the card class below the header, we'll add a div for the card author. Inside of that element, we'll add a link for the author avatar. And inside that link, we'll add an image tag that points to an image I recently added to the project. This can be any image that you want. Now in order to add a half circle border to the image, we need to add an SVG graphic below it. You'll wanna just copy this value from the main source code, but, basically, it's just a single SVG graphic with a path of a half circle. And then below that, we'll add another div with the author name as well as an author name prefix to add some additional styling there. Currently, everything looks very out of whack, so let's head back into our CSS code. Currently, the card author lives inside of a flex column, but there's no reason we can't make this element a grid to display the elements inside of it.
So that's exactly what we'll do here by setting display to grid. We have the avatar image on the left side, and we want that container to always be 75 pixels. So we can set the grid template columns property to 75 for the 1st column and then 1 fractional unit for the next column to make that column responsive.
geometry
Then we'll align the grid items to the center and add some margin to it. From there, we can move on to the image element inside of the author avatar div. We'll wanna make sure it's display block because images are inline by default. We'll give it a fixed width and height, and then set the border radius to 50% to make it appear as a circle. Then if you want to turn it into a black and white image, you can use filter along with the grayscale value set to a 100%. That puts the image in the right place, but now we need to move our SVG underneath it. We can target the SVG directly with our half circle class and we'll set its position to absolute.
This allows us to move it anywhere within the grid area. So let's move it to the bottom left. We can define the width and height, but it's currently displayed as a black half circle. What we actually wanna do is remove the fill color from the shape, so we set the fill property to none.
geometry
Then we give it a border by defining the stroke property. The stroke has a color, width, and a line cap value, which when set to round, will give it a rounded edge. Then as a final touch, we'll style the author name prefix class to a bold light gray color. That takes care of our avatar section, and now we're ready for the final trick, which answers the question, how do we apply a CSS gradient to text? Unfortunately, it's not as easy as just targeting the color property. When we try to apply a linear gradient to color, you can see that nothing happens. What we actually need to do is set the background of the element, then use the shape of the text to clip the background. Let's go ahead and change the color property to background, and then we'll set the text shadow to none. Then we'll use background clip to use the text shape to essentially cut out the background. We also need to use the web kit vendor prefix for background clip, and text fill color set to transparent. This will allow the background color to flow through the text shape. And now, we have this cool gradient effect when we hover over a header in the card.
Just keep in mind that browser support for this particular trick is fairly limited. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you want access to more advanced full stack content, consider becoming a number at Fireship IO. Thanks for watching and I will see you in the next one.
streaming
video gaming
internet
networking
youtube
I happen to be on CSS Tricks the other day and when I saw this animated card list, I thought, wow. That's a cool CSS trick. So in today's beginner friendly tutorial, we're going to reverse engineer this UI element using nothing but HTML and CSS. Over the next few minutes, you'll learn how to combine both grid and flexbox layout to position the cards. We'll use transforms and shadows to make it look like the cards are stacked on top of each other. We'll implement some transition animations, and I'll throw in a few other tricks, like a gradient text background and SVG styles for this little semicircle under the avatar. If you're new here, like and subscribe, and you can find the full source code for this project on GitHub and follow along with a write up on FireShip bio. We're going to build this feature step by step from scratch. So pull up your editor and create a file called card dot CSS and index dot HTML. In your HTML, type an exclamation point followed by tab to create the initial boilerplate. Then, in the head of the document, type in link to access the snippet for a CSS link and then point it to your card dot CSS file. In the body of the document, we'll add a section. This will be the main container for the card list, then each individual card will be represented by an article element. We'll add a header to each individual card, then later in the video, we'll come back and add an avatar and some tags. Now rather than target these elements directly, I'm going to add a class name to each element. Then I'm going to copy and paste our markup so we have multiple cards to work with. And just a friendly reminder, it's much easier to copy and paste this markup from GitHub. Now one quick thing I wanna point out is that instead of a section, article, and header, I could have just called all these elements to divs. This would work perfectly fine, but when you write HTML, you want to use semantic elements where you can. Or, in other words, use elements that clearly define what the content is all about. In any case, we We can open up our HTML by right clicking on the file and clicking copy path. And we can paste that into the browser and you should get a result that looks like this. And now we're ready to start implementing some CSS tricks. At the top of the file, I'm going to import a Google font, then I'll add some global styles to the body tag like a dark background and setting that font family as the default font. And our UI is already looking much better. Currently, the cards are flowing vertically, but we want them to flow horizontally. We can make that happen by setting display flex on our card list, which by default will place the items into a row. In other words, it'll take all the cards in the list and adjust their width according to the available space in the container. We call that a flexible row and, of course, you can learn more about it in my 100 seconds of flexbox video. And and then we'll add a little bit of padding to that container as well. That takes care of our row. Now we can think of each individual card as a column within that row. So we'll also give that a display of flex. We'll set its position to relative and then the flex direction to column to make any content inside the card flow vertically. We want each card to have the same height and width, so we can use fixed pixel values there, then we'll set the min width to 250. If we have a bunch of cards in the container, we don't want them to get squeezed too small. Instead, we'll let them flow to their minimum width, and and then we'll let the overflow scroll horizontally. Now our cards are in a scrollable container, but it's hard to tell when one card finishes and the next one starts. One subtle yet powerful way to address that is to give each card some shadow. 1st, we'll use border radius to round the edges, then we'll give it a background color, and then we can set a box shadow and notice how the first value is negative. This little trick will put the shadow on the right side of the box which makes the card on the right look like it's hovering above the card on the left. That's because that first value represents the horizontal offset of the shadow. But notice how the scroll bar on the card list is really ugly. Let's go ahead and address that now. We We'll wanna set its overflow x property to scroll, and then we have 3 pseudo elements that we can style. We can give the scroll bar itself a width and height of 10 pixels, then the scroll bar thumb is the thing the user actually drags around. We'll give it a background, radius, and we'll give it a box shadow with an inset value, which puts the shadow on the inside of the element. And, lastly, we have the scroll bar track, which will give a background with a linear gradient. And now our scroll bar is much nicer looking, but just keep in mind that the scroll bar pseudo elements aren't supported on every browser. So don't expect this to look good on every device. And that brings us to the next trick, the animation when we hover over the cards. Watch the animation closely. When we hover over a card, It moves up by a few pixels, then all of the siblings that come after it move to the right, while all of the siblings before it stay put. We'll start by grabbing the card that's by hovered by using the hover pseudo selector. We'll then use transform to move or translate that card along the y axis by negative one rem. That will move it in an upward direction equal to the root font size, which is about 15 pixels in our case. That's easy enough, but the tricky part here is selecting all of the children that come after the hovered card. When a card has focus or when it's hovered, we'll use the tilde character to select all of the elements that are siblings that come after it with the card clasp. It's called the general sibling combinator, and it grabs all the children after the element, but not the element itself or any of the siblings before it. After selecting those elements, we can then use transform to translate or move those elements across the x axis by a 130 pixels. And as a final touch, we need to grab every card element that's not the first child in the list and set its margin left to negative 130 to offset the transformation. Otherwise, there will be a big gap in between the cards. Not is called the negation pseudo class. It basically does the opposite of whatever you're telling it to do or in our case, grab every card that is not the first card. At this point, things are looking pretty good, but there's no timing in the animation, so it looks really jerky. We can address that by simply adding a transition for 0.2 seconds in this case to the card class. Now whenever a property value changes on the card, it will take 0.2 seconds to translate between the old value and the new value. That takes care of the main card stack, but I still have a few more tricks up my sleeve. What What I want to show you next is how we can add an avatar along with this semicircle underneath it. To get that started, we'll need to go back into our HTML. Then inside the card class below the header, we'll add a div for the card author. Inside of that element, we'll add a link for the author avatar. And inside that link, we'll add an image tag that points to an image I recently added to the project. This can be any image that you want. Now in order to add a half circle border to the image, we need to add an SVG graphic below it. You'll wanna just copy this value from the main source code, but, basically, it's just a single SVG graphic with a path of a half circle. And then below that, we'll add another div with the author name as well as an author name prefix to add some additional styling there. Currently, everything looks very out of whack, so let's head back into our CSS code. Currently, the card author lives inside of a flex column, but there's no reason we can't make this element a grid to display the elements inside of it. So that's exactly what we'll do here by setting display to grid. We have the avatar image on the left side, and we want that container to always be 75 pixels. So we can set the grid template columns property to 75 for the 1st column and then 1 fractional unit for the next column to make that column responsive. Then we'll align the grid items to the center and add some margin to it. From there, we can move on to the image element inside of the author avatar div. We'll wanna make sure it's display block because images are inline by default. We'll give it a fixed width and height, and then set the border radius to 50% to make it appear as a circle. Then if you want to turn it into a black and white image, you can use filter along with the grayscale value set to a 100%. That puts the image in the right place, but now we need to move our SVG underneath it. We can target the SVG directly with our half circle class and we'll set its position to absolute. This allows us to move it anywhere within the grid area. So let's move it to the bottom left. We can define the width and height, but it's currently displayed as a black half circle. What we actually wanna do is remove the fill color from the shape, so we set the fill property to none. Then we give it a border by defining the stroke property. The stroke has a color, width, and a line cap value, which when set to round, will give it a rounded edge. Then as a final touch, we'll style the author name prefix class to a bold light gray color. That takes care of our avatar section, and now we're ready for the final trick, which answers the question, how do we apply a CSS gradient to text? Unfortunately, it's not as easy as just targeting the color property. When we try to apply a linear gradient to color, you can see that nothing happens. What we actually need to do is set the background of the element, then use the shape of the text to clip the background. Let's go ahead and change the color property to background, and then we'll set the text shadow to none. Then we'll use background clip to use the text shape to essentially cut out the background. We also need to use the web kit vendor prefix for background clip, and text fill color set to transparent. This will allow the background color to flow through the text shape. And now, we have this cool gradient effect when we hover over a header in the card. Just keep in mind that browser support for this particular trick is fairly limited. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you want access to more advanced full stack content, consider becoming a number at Fireship IO. Thanks for watching and I will see you in the next one.
I
i
happen
happen
to
to
be
be
on
on
CSS
css
Tricks
tricks
the
the
other
other
day
day
and
and
when
when
I
i
saw
saw
this
this
animated
animated
card
card
list,
list
I
i
thought,
thought
wow.
wow
That's
that's
a
a
cool
cool
CSS
css
trick.
trick
So
so
in
in
today's
today's
beginner
beginner
friendly
friendly
tutorial,
tutorial
we're
we're
going
going
to
to
reverse
reverse
engineer
engineer
this
this
UI
ui
element
element
using
using
nothing
nothing
but
but
HTML
html
and
and
CSS.
css
Over
over
the
the
next
next
few
few
minutes,
minutes
you'll
you'll
learn
learn
how
how
to
to
combine
combine
both
both
grid
grid
and
and
flexbox
flexbox
layout
layout
to
to
position
position
the
the
cards.
cards
We'll
we'll
use
use
transforms
transforms
and
and
shadows
shadows
to
to
make
make
it
it
look
look
like
like
the
the
cards
cards
are
are
stacked
stacked
on
on
top
top
of
of
each
each
other.
other
We'll
we'll
implement
implement
some
some
transition
transition
animations,
animations
and
and
I'll
i'll
throw
throw
in
in
a
a
few
few
other
other
tricks,
tricks
like
like
a
a
gradient
gradient
text
text
background
background
and
and
SVG
svg
styles
styles
for
for
this
this
little
little
semicircle
semicircle
under
under
the
the
avatar.
avatar
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
you
you
can
can
find
find
the
the
full
full
source
source
code
code
for
for
this
this
project
project
on
on
GitHub
github
and
and
follow
follow
along
along
with
with
a
a
write
write
up
up
on
on
FireShip
fireship
bio.
bio
We're
we're
going
going
to
to
build
build
this
this
feature
feature
step
step
by
by
step
step
from
from
scratch.
scratch
So
so
pull
pull
up
up
your
your
editor
editor
and
and
create
create
a
a
file
file
called
called
card
card
dot
dot
CSS
css
and
and
index
index
dot
dot
HTML.
html
In
in
your
your
HTML,
html
type
type
an
an
exclamation
exclamation
point
point
followed
followed
by
by
tab
tab
to
to
create
create
the
the
initial
initial
boilerplate.
boilerplate
Then,
then
in
in
the
the
head
head
of
of
the
the
document,
document
type
type
in
in
link
link
to
to
access
access
the
the
snippet
snippet
for
for
a
a
CSS
css
link
link
and
and
then
then
point
point
it
it
to
to
your
your
card
card
dot
dot
CSS
css
file.
file
In
in
the
the
body
body
of
of
the
the
document,
document
we'll
we'll
add
add
a
a
section.
section
This
this
will
will
be
be
the
the
main
main
container
container
for
for
the
the
card
card
list,
list
then
then
each
each
individual
individual
card
card
will
will
be
be
represented
represented
by
by
an
an
article
article
element.
element
We'll
we'll
add
add
a
a
header
header
to
to
each
each
individual
individual
card,
card
then
then
later
later
in
in
the
the
video,
video
we'll
we'll
come
come
back
back
and
and
add
add
an
an
avatar
avatar
and
and
some
some
tags.
tags
Now
now
rather
rather
than
than
target
target
these
these
elements
elements
directly,
directly
I'm
i'm
going
going
to
to
add
add
a
a
class
class
name
name
to
to
each
each
element.
element
Then
then
I'm
i'm
going
going
to
to
copy
copy
and
and
paste
paste
our
our
markup
markup
so
so
we
we
have
have
multiple
multiple
cards
cards
to
to
work
work
with.
with
And
and
just
just
a
a
friendly
friendly
reminder,
reminder
it's
it's
much
much
easier
easier
to
to
copy
copy
and
and
paste
paste
this
this
markup
markup
from
from
GitHub.
github
Now
now
one
one
quick
quick
thing
thing
I
i
wanna
wanna
point
point
out
out
is
is
that
that
instead
instead
of
of
a
a
section,
section
article,
article
and
and
header,
header
I
i
could
could
have
have
just
just
called
called
all
all
these
these
elements
elements
to
to
divs.
divs
This
this
would
would
work
work
perfectly
perfectly
fine,
fine
but
but
when
when
you
you
write
write
HTML,
html
you
you
want
want
to
to
use
use
semantic
semantic
elements
elements
where
where
you
you
can.
can
Or,
or
in
in
other
other
words,
words
use
use
elements
elements
that
that
clearly
clearly
define
define
what
what
the
the
content
content
is
is
all
all
about.
about
In
in
any
any
case,
case
we
we
We
we
can
can
open
open
up
up
our
our
HTML
html
by
by
right
right
clicking
clicking
on
on
the
the
file
file
and
and
clicking
clicking
copy
copy
path.
path
And
and
we
we
can
can
paste
paste
that
that
into
into
the
the
browser
browser
and
and
you
you
should
should
get
get
a
a
result
result
that
that
looks
looks
like
like
this.
this
And
and
now
now
we're
we're
ready
ready
to
to
start
start
implementing
implementing
some
some
CSS
css
tricks.
tricks
At
at
the
the
top
top
of
of
the
the
file,
file
I'm
i'm
going
going
to
to
import
import
a
a
Google
google
font,
font
then
then
I'll
i'll
add
add
some
some
global
global
styles
styles
to
to
the
the
body
body
tag
tag
like
like
a
a
dark
dark
background
background
and
and
setting
setting
that
that
font
font
family
family
as
as
the
the
default
default
font.
font
And
and
our
our
UI
ui
is
is
already
already
looking
looking
much
much
better.
better
Currently,
currently
the
the
cards
cards
are
are
flowing
flowing
vertically,
vertically
but
but
we
we
want
want
them
them
to
to
flow
flow
horizontally.
horizontally
We
we
can
can
make
make
that
that
happen
happen
by
by
setting
setting
display
display
flex
flex
on
on
our
our
card
card
list,
list
which
which
by
by
default
default
will
will
place
place
the
the
items
items
into
into
a
a
row.
row
In
in
other
other
words,
words
it'll
it'll
take
take
all
all
the
the
cards
cards
in
in
the
the
list
list
and
and
adjust
adjust
their
their
width
width
according
according
to
to
the
the
available
available
space
space
in
in
the
the
container.
container
We
we
call
call
that
that
a
a
flexible
flexible
row
row
and,
and
of
of
course,
course
you
you
can
can
learn
learn
more
more
about
about
it
it
in
in
my
my
100
100
seconds
seconds
of
of
flexbox
flexbox
video.
video
And
and
and
and
then
then
we'll
we'll
add
add
a
a
little
little
bit
bit
of
of
padding
padding
to
to
that
that
container
container
as
as
well.
well
That
that
takes
takes
care
care
of
of
our
our
row.
row
Now
now
we
we
can
can
think
think
of
of
each
each
individual
individual
card
card
as
as
a
a
column
column
within
within
that
that
row.
row
So
so
we'll
we'll
also
also
give
give
that
that
a
a
display
display
of
of
flex.
flex
We'll
we'll
set
set
its
its
position
position
to
to
relative
relative
and
and
then
then
the
the
flex
flex
direction
direction
to
to
column
column
to
to
make
make
any
any
content
content
inside
inside
the
the
card
card
flow
flow
vertically.
vertically
We
we
want
want
each
each
card
card
to
to
have
have
the
the
same
same
height
height
and
and
width,
width
so
so
we
we
can
can
use
use
fixed
fixed
pixel
pixel
values
values
there,
there
then
then
we'll
we'll
set
set
the
the
min
min
width
width
to
to
250.
250
If
if
we
we
have
have
a
a
bunch
bunch
of
of
cards
cards
in
in
the
the
container,
container
we
we
don't
don't
want
want
them
them
to
to
get
get
squeezed
squeezed
too
too
small.
small
Instead,
instead
we'll
we'll
let
let
them
them
flow
flow
to
to
their
their
minimum
minimum
width,
width
and
and
and
and
then
then
we'll
we'll
let
let
the
the
overflow
overflow
scroll
scroll
horizontally.
horizontally
Now
now
our
our
cards
cards
are
are
in
in
a
a
scrollable
scrollable
container,
container
but
but
it's
it's
hard
hard
to
to
tell
tell
when
when
one
one
card
card
finishes
finishes
and
and
the
the
next
next
one
one
starts.
starts
One
one
subtle
subtle
yet
yet
powerful
powerful
way
way
to
to
address
address
that
that
is
is
to
to
give
give
each
each
card
card
some
some
shadow.
shadow
1st,
1st
we'll
we'll
use
use
border
border
radius
radius
to
to
round
round
the
the
edges,
edges
then
then
we'll
we'll
give
give
it
it
a
a
background
background
color,
color
and
and
then
then
we
we
can
can
set
set
a
a
box
box
shadow
shadow
and
and
notice
notice
how
how
the
the
first
first
value
value
is
is
negative.
negative
This
this
little
little
trick
trick
will
will
put
put
the
the
shadow
shadow
on
on
the
the
right
right
side
side
of
of
the
the
box
box
which
which
makes
makes
the
the
card
card
on
on
the
the
right
right
look
look
like
like
it's
it's
hovering
hovering
above
above
the
the
card
card
on
on
the
the
left.
left
That's
that's
because
because
that
that
first
first
value
value
represents
represents
the
the
horizontal
horizontal
offset
offset
of
of
the
the
shadow.
shadow
But
but
notice
notice
how
how
the
the
scroll
scroll
bar
bar
on
on
the
the
card
card
list
list
is
is
really
really
ugly.
ugly
Let's
let's
go
go
ahead
ahead
and
and
address
address
that
that
now.
now
We
we
We'll
we'll
wanna
wanna
set
set
its
its
overflow
overflow
x
x
property
property
to
to
scroll,
scroll
and
and
then
then
we
we
have
have
3
3
pseudo
pseudo
elements
elements
that
that
we
we
can
can
style.
style
We
we
can
can
give
give
the
the
scroll
scroll
bar
bar
itself
itself
a
a
width
width
and
and
height
height
of
of
10
10
pixels,
pixels
then
then
the
the
scroll
scroll
bar
bar
thumb
thumb
is
is
the
the
thing
thing
the
the
user
user
actually
actually
drags
drags
around.
around
We'll
we'll
give
give
it
it
a
a
background,
background
radius,
radius
and
and
we'll
we'll
give
give
it
it
a
a
box
box
shadow
shadow
with
with
an
an
inset
inset
value,
value
which
which
puts
puts
the
the
shadow
shadow
on
on
the
the
inside
inside
of
of
the
the
element.
element
And,
and
lastly,
lastly
we
we
have
have
the
the
scroll
scroll
bar
bar
track,
track
which
which
will
will
give
give
a
a
background
background
with
with
a
a
linear
linear
gradient.
gradient
And
and
now
now
our
our
scroll
scroll
bar
bar
is
is
much
much
nicer
nicer
looking,
looking
but
but
just
just
keep
keep
in
in
mind
mind
that
that
the
the
scroll
scroll
bar
bar
pseudo
pseudo
elements
elements
aren't
aren't
supported
supported
on
on
every
every
browser.
browser
So
so
don't
don't
expect
expect
this
this
to
to
look
look
good
good
on
on
every
every
device.
device
And
and
that
that
brings
brings
us
us
to
to
the
the
next
next
trick,
trick
the
the
animation
animation
when
when
we
we
hover
hover
over
over
the
the
cards.
cards
Watch
watch
the
the
animation
animation
closely.
closely
When
when
we
we
hover
hover
over
over
a
a
card,
card
It
it
moves
moves
up
up
by
by
a
a
few
few
pixels,
pixels
then
then
all
all
of
of
the
the
siblings
siblings
that
that
come
come
after
after
it
it
move
move
to
to
the
the
right,
right
while
while
all
all
of
of
the
the
siblings
siblings
before
before
it
it
stay
stay
put.
put
We'll
we'll
start
start
by
by
grabbing
grabbing
the
the
card
card
that's
that's
by
by
hovered
hovered
by
by
using
using
the
the
hover
hover
pseudo
pseudo
selector.
selector
We'll
we'll
then
then
use
use
transform
transform
to
to
move
move
or
or
translate
translate
that
that
card
card
along
along
the
the
y
y
axis
axis
by
by
negative
negative
one
one
rem.
rem
That
that
will
will
move
move
it
it
in
in
an
an
upward
upward
direction
direction
equal
equal
to
to
the
the
root
root
font
font
size,
size
which
which
is
is
about
about
15
15
pixels
pixels
in
in
our
our
case.
case
That's
that's
easy
easy
enough,
enough
but
but
the
the
tricky
tricky
part
part
here
here
is
is
selecting
selecting
all
all
of
of
the
the
children
children
that
that
come
come
after
after
the
the
hovered
hovered
card.
card
When
when
a
a
card
card
has
has
focus
focus
or
or
when
when
it's
it's
hovered,
hovered
we'll
we'll
use
use
the
the
tilde
tilde
character
character
to
to
select
select
all
all
of
of
the
the
elements
elements
that
that
are
are
siblings
siblings
that
that
come
come
after
after
it
it
with
with
the
the
card
card
clasp.
clasp
It's
it's
called
called
the
the
general
general
sibling
sibling
combinator,
combinator
and
and
it
it
grabs
grabs
all
all
the
the
children
children
after
after
the
the
element,
element
but
but
not
not
the
the
element
element
itself
itself
or
or
any
any
of
of
the
the
siblings
siblings
before
before
it.
it
After
after
selecting
selecting
those
those
elements,
elements
we
we
can
can
then
then
use
use
transform
transform
to
to
translate
translate
or
or
move
move
those
those
elements
elements
across
across
the
the
x
x
axis
axis
by
by
a
a
130
130
pixels.
pixels
And
and
as
as
a
a
final
final
touch,
touch
we
we
need
need
to
to
grab
grab
every
every
card
card
element
element
that's
that's
not
not
the
the
first
first
child
child
in
in
the
the
list
list
and
and
set
set
its
its
margin
margin
left
left
to
to
negative
negative
130
130
to
to
offset
offset
the
the
transformation.
transformation
Otherwise,
otherwise
there
there
will
will
be
be
a
a
big
big
gap
gap
in
in
between
between
the
the
cards.
cards
Not
not
is
is
called
called
the
the
negation
negation
pseudo
pseudo
class.
class
It
it
basically
basically
does
does
the
the
opposite
opposite
of
of
whatever
whatever
you're
you're
telling
telling
it
it
to
to
do
do
or
or
in
in
our
our
case,
case
grab
grab
every
every
card
card
that
that
is
is
not
not
the
the
first
first
card.
card
At
at
this
this
point,
point
things
things
are
are
looking
looking
pretty
pretty
good,
good
but
but
there's
there's
no
no
timing
timing
in
in
the
the
animation,
animation
so
so
it
it
looks
looks
really
really
jerky.
jerky
We
we
can
can
address
address
that
that
by
by
simply
simply
adding
adding
a
a
transition
transition
for
for
0.2
0.2
seconds
seconds
in
in
this
this
case
case
to
to
the
the
card
card
class.
class
Now
now
whenever
whenever
a
a
property
property
value
value
changes
changes
on
on
the
the
card,
card
it
it
will
will
take
take
0.2
0.2
seconds
seconds
to
to
translate
translate
between
between
the
the
old
old
value
value
and
and
the
the
new
new
value.
value
That
that
takes
takes
care
care
of
of
the
the
main
main
card
card
stack,
stack
but
but
I
i
still
still
have
have
a
a
few
few
more
more
tricks
tricks
up
up
my
my
sleeve.
sleeve
What
what
What
what
I
i
want
want
to
to
show
show
you
you
next
next
is
is
how
how
we
we
can
can
add
add
an
an
avatar
avatar
along
along
with
with
this
this
semicircle
semicircle
underneath
underneath
it.
it
To
to
get
get
that
that
started,
started
we'll
we'll
need
need
to
to
go
go
back
back
into
into
our
our
HTML.
html
Then
then
inside
inside
the
the
card
card
class
class
below
below
the
the
header,
header
we'll
we'll
add
add
a
a
div
div
for
for
the
the
card
card
author.
author
Inside
inside
of
of
that
that
element,
element
we'll
we'll
add
add
a
a
link
link
for
for
the
the
author
author
avatar.
avatar
And
and
inside
inside
that
that
link,
link
we'll
we'll
add
add
an
an
image
image
tag
tag
that
that
points
points
to
to
an
an
image
image
I
i
recently
recently
added
added
to
to
the
the
project.
project
This
this
can
can
be
be
any
any
image
image
that
that
you
you
want.
want
Now
now
in
in
order
order
to
to
add
add
a
a
half
half
circle
circle
border
border
to
to
the
the
image,
image
we
we
need
need
to
to
add
add
an
an
SVG
svg
graphic
graphic
below
below
it.
it
You'll
you'll
wanna
wanna
just
just
copy
copy
this
this
value
value
from
from
the
the
main
main
source
source
code,
code
but,
but
basically,
basically
it's
it's
just
just
a
a
single
single
SVG
svg
graphic
graphic
with
with
a
a
path
path
of
of
a
a
half
half
circle.
circle
And
and
then
then
below
below
that,
that
we'll
we'll
add
add
another
another
div
div
with
with
the
the
author
author
name
name
as
as
well
well
as
as
an
an
author
author
name
name
prefix
prefix
to
to
add
add
some
some
additional
additional
styling
styling
there.
there
Currently,
currently
everything
everything
looks
looks
very
very
out
out
of
of
whack,
whack
so
so
let's
let's
head
head
back
back
into
into
our
our
CSS
css
code.
code
Currently,
currently
the
the
card
card
author
author
lives
lives
inside
inside
of
of
a
a
flex
flex
column,
column
but
but
there's
there's
no
no
reason
reason
we
we
can't
can't
make
make
this
this
element
element
a
a
grid
grid
to
to
display
display
the
the
elements
elements
inside
inside
of
of
it.
it
So
so
that's
that's
exactly
exactly
what
what
we'll
we'll
do
do
here
here
by
by
setting
setting
display
display
to
to
grid.
grid
We
we
have
have
the
the
avatar
avatar
image
image
on
on
the
the
left
left
side,
side
and
and
we
we
want
want
that
that
container
container
to
to
always
always
be
be
75
75
pixels.
pixels
So
so
we
we
can
can
set
set
the
the
grid
grid
template
template
columns
columns
property
property
to
to
75
75
for
for
the
the
1st
1st
column
column
and
and
then
then
1
1
fractional
fractional
unit
unit
for
for
the
the
next
next
column
column
to
to
make
make
that
that
column
column
responsive.
responsive
Then
then
we'll
we'll
align
align
the
the
grid
grid
items
items
to
to
the
the
center
center
and
and
add
add
some
some
margin
margin
to
to
it.
it
From
from
there,
there
we
we
can
can
move
move
on
on
to
to
the
the
image
image
element
element
inside
inside
of
of
the
the
author
author
avatar
avatar
div.
div
We'll
we'll
wanna
wanna
make
make
sure
sure
it's
it's
display
display
block
block
because
because
images
images
are
are
inline
inline
by
by
default.
default
We'll
we'll
give
give
it
it
a
a
fixed
fixed
width
width
and
and
height,
height
and
and
then
then
set
set
the
the
border
border
radius
radius
to
to
50%
50%
to
to
make
make
it
it
appear
appear
as
as
a
a
circle.
circle
Then
then
if
if
you
you
want
want
to
to
turn
turn
it
it
into
into
a
a
black
black
and
and
white
white
image,
image
you
you
can
can
use
use
filter
filter
along
along
with
with
the
the
grayscale
grayscale
value
value
set
set
to
to
a
a
100%.
100%
That
that
puts
puts
the
the
image
image
in
in
the
the
right
right
place,
place
but
but
now
now
we
we
need
need
to
to
move
move
our
our
SVG
svg
underneath
underneath
it.
it
We
we
can
can
target
target
the
the
SVG
svg
directly
directly
with
with
our
our
half
half
circle
circle
class
class
and
and
we'll
we'll
set
set
its
its
position
position
to
to
absolute.
absolute
This
this
allows
allows
us
us
to
to
move
move
it
it
anywhere
anywhere
within
within
the
the
grid
grid
area.
area
So
so
let's
let's
move
move
it
it
to
to
the
the
bottom
bottom
left.
left
We
we
can
can
define
define
the
the
width
width
and
and
height,
height
but
but
it's
it's
currently
currently
displayed
displayed
as
as
a
a
black
black
half
half
circle.
circle
What
what
we
we
actually
actually
wanna
wanna
do
do
is
is
remove
remove
the
the
fill
fill
color
color
from
from
the
the
shape,
shape
so
so
we
we
set
set
the
the
fill
fill
property
property
to
to
none.
none
Then
then
we
we
give
give
it
it
a
a
border
border
by
by
defining
defining
the
the
stroke
stroke
property.
property
The
the
stroke
stroke
has
has
a
a
color,
color
width,
width
and
and
a
a
line
line
cap
cap
value,
value
which
which
when
when
set
set
to
to
round,
round
will
will
give
give
it
it
a
a
rounded
rounded
edge.
edge
Then
then
as
as
a
a
final
final
touch,
touch
we'll
we'll
style
style
the
the
author
author
name
name
prefix
prefix
class
class
to
to
a
a
bold
bold
light
light
gray
gray
color.
color
That
that
takes
takes
care
care
of
of
our
our
avatar
avatar
section,
section
and
and
now
now
we're
we're
ready
ready
for
for
the
the
final
final
trick,
trick
which
which
answers
answers
the
the
question,
question
how
how
do
do
we
we
apply
apply
a
a
CSS
css
gradient
gradient
to
to
text?
text
Unfortunately,
unfortunately
it's
it's
not
not
as
as
easy
easy
as
as
just
just
targeting
targeting
the
the
color
color
property.
property
When
when
we
we
try
try
to
to
apply
apply
a
a
linear
linear
gradient
gradient
to
to
color,
color
you
you
can
can
see
see
that
that
nothing
nothing
happens.
happens
What
what
we
we
actually
actually
need
need
to
to
do
do
is
is
set
set
the
the
background
background
of
of
the
the
element,
element
then
then
use
use
the
the
shape
shape
of
of
the
the
text
text
to
to
clip
clip
the
the
background.
background
Let's
let's
go
go
ahead
ahead
and
and
change
change
the
the
color
color
property
property
to
to
background,
background
and
and
then
then
we'll
we'll
set
set
the
the
text
text
shadow
shadow
to
to
none.
none
Then
then
we'll
we'll
use
use
background
background
clip
clip
to
to
use
use
the
the
text
text
shape
shape
to
to
essentially
essentially
cut
cut
out
out
the
the
background.
background
We
we
also
also
need
need
to
to
use
use
the
the
web
web
kit
kit
vendor
vendor
prefix
prefix
for
for
background
background
clip,
clip
and
and
text
text
fill
fill
color
color
set
set
to
to
transparent.
transparent
This
this
will
will
allow
allow
the
the
background
background
color
color
to
to
flow
flow
through
through
the
the
text
text
shape.
shape
And
and
now,
now
we
we
have
have
this
this
cool
cool
gradient
gradient
effect
effect
when
when
we
we
hover
hover
over
over
a
a
header
header
in
in
the
the
card.
card
Just
just
keep
keep
in
in
mind
mind
that
that
browser
browser
support
support
for
for
this
this
particular
particular
trick
trick
is
is
fairly
fairly
limited.
limited
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
want
want
access
access
to
to
more
more
advanced
advanced
full
full
stack
stack
content,
content
consider
consider
becoming
becoming
a
a
number
number
at
at
Fireship
fireship
IO.
io
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains how to reverse engineer the UI element in a tutorial on building a feature step by step. They discuss combining grid and flexbox layout to create a stack of cards, setting responsive display on the card list, using shadow and box shadow to style cards, and setting height and width for each card. They also explain how to use the "outerations to translate" feature on cards to move elements across the x axis and add a circle honor to the image, and how to use a half circle birthday birthday birthday birthday birthday birthday birthday birthday birthday. Finally, they remind viewers to use the "lesson chat" feature and thank them for watching.
CSS Card Tricks
I happen to be on CSS Tricks the other day and when I saw this animated card list, I thought, wow. That's a cool CSS trick. So in today's beginner friendly tutorial, we're going to reverse engineer this UI element using nothing but HTML and CSS. Over the next few minutes, you'll learn how to combine both grid and flexbox layout to position the cards. We'll use transforms and shadows to make it look like the cards are stacked on top of each other. We'll implement some transition animations, and I'll throw in a few other tricks, like a gradient text background and SVG styles for this little semicircle under the avatar. If you're new here, like and subscribe, and you can find the full source code for this project on GitHub and follow along with a write up on FireShip bio. We're going to build this feature step by step from scratch. So pull up your editor and create a file called card dot CSS and index dot HTML. In your HTML, type an exclamation point followed by tab to create the initial boilerplate. Then, in the head of the document, type in link to access the snippet for a CSS link and then point it to your card dot CSS file. In the body of the document, we'll add a section. This will be the main container for the card list, then each individual card will be represented by an article element. We'll add a header to each individual card, then later in the video, we'll come back and add an avatar and some tags. Now rather than target these elements directly, I'm going to add a class name to each element. Then I'm going to copy and paste our markup so we have multiple cards to work with. And just a friendly reminder, it's much easier to copy and paste this markup from GitHub. Now one quick thing I wanna point out is that instead of a section, article, and header, I could have just called all these elements to divs. This would work perfectly fine, but when you write HTML, you want to use semantic elements where you can. Or, in other words, use elements that clearly define what the content is all about. In any case, we We can open up our HTML by right clicking on the file and clicking copy path. And we can paste that into the browser and you should get a result that looks like this. And now we're ready to start implementing some CSS tricks. At the top of the file, I'm going to import a Google font, then I'll add some global styles to the body tag like a dark background and setting that font family as the default font. And our UI is already looking much better. Currently, the cards are flowing vertically, but we want them to flow horizontally. We can make that happen by setting display flex on our card list, which by default will place the items into a row. In other words, it'll take all the cards in the list and adjust their width according to the available space in the container. We call that a flexible row and, of course, you can learn more about it in my 100 seconds of flexbox video. And and then we'll add a little bit of padding to that container as well. That takes care of our row. Now we can think of each individual card as a column within that row. So we'll also give that a display of flex. We'll set its position to relative and then the flex direction to column to make any content inside the card flow vertically. We want each card to have the same height and width, so we can use fixed pixel values there, then we'll set the min width to 250. If we have a bunch of cards in the container, we don't want them to get squeezed too small. Instead, we'll let them flow to their minimum width, and and then we'll let the overflow scroll horizontally. Now our cards are in a scrollable container, but it's hard to tell when one card finishes and the next one starts. One subtle yet powerful way to address that is to give each card some shadow. 1st, we'll use border radius to round the edges, then we'll give it a background color, and then we can set a box shadow and notice how the first value is negative. This little trick will put the shadow on the right side of the box which makes the card on the right look like it's hovering above the card on the left. That's because that first value represents the horizontal offset of the shadow. But notice how the scroll bar on the card list is really ugly. Let's go ahead and address that now. We We'll wanna set its overflow x property to scroll, and then we have 3 pseudo elements that we can style. We can give the scroll bar itself a width and height of 10 pixels, then the scroll bar thumb is the thing the user actually drags around. We'll give it a background, radius, and we'll give it a box shadow with an inset value, which puts the shadow on the inside of the element. And, lastly, we have the scroll bar track, which will give a background with a linear gradient. And now our scroll bar is much nicer looking, but just keep in mind that the scroll bar pseudo elements aren't supported on every browser. So don't expect this to look good on every device. And that brings us to the next trick, the animation when we hover over the cards. Watch the animation closely. When we hover over a card, It moves up by a few pixels, then all of the siblings that come after it move to the right, while all of the siblings before it stay put. We'll start by grabbing the card that's by hovered by using the hover pseudo selector. We'll then use transform to move or translate that card along the y axis by negative one rem. That will move it in an upward direction equal to the root font size, which is about 15 pixels in our case. That's easy enough, but the tricky part here is selecting all of the children that come after the hovered card. When a card has focus or when it's hovered, we'll use the tilde character to select all of the elements that are siblings that come after it with the card clasp. It's called the general sibling combinator, and it grabs all the children after the element, but not the element itself or any of the siblings before it. After selecting those elements, we can then use transform to translate or move those elements across the x axis by a 130 pixels. And as a final touch, we need to grab every card element that's not the first child in the list and set its margin left to negative 130 to offset the transformation. Otherwise, there will be a big gap in between the cards. Not is called the negation pseudo class. It basically does the opposite of whatever you're telling it to do or in our case, grab every card that is not the first card. At this point, things are looking pretty good, but there's no timing in the animation, so it looks really jerky. We can address that by simply adding a transition for 0.2 seconds in this case to the card class. Now whenever a property value changes on the card, it will take 0.2 seconds to translate between the old value and the new value. That takes care of the main card stack, but I still have a few more tricks up my sleeve. What What I want to show you next is how we can add an avatar along with this semicircle underneath it. To get that started, we'll need to go back into our HTML. Then inside the card class below the header, we'll add a div for the card author. Inside of that element, we'll add a link for the author avatar. And inside that link, we'll add an image tag that points to an image I recently added to the project. This can be any image that you want. Now in order to add a half circle border to the image, we need to add an SVG graphic below it. You'll wanna just copy this value from the main source code, but, basically, it's just a single SVG graphic with a path of a half circle. And then below that, we'll add another div with the author name as well as an author name prefix to add some additional styling there. Currently, everything looks very out of whack, so let's head back into our CSS code. Currently, the card author lives inside of a flex column, but there's no reason we can't make this element a grid to display the elements inside of it. So that's exactly what we'll do here by setting display to grid. We have the avatar image on the left side, and we want that container to always be 75 pixels. So we can set the grid template columns property to 75 for the 1st column and then 1 fractional unit for the next column to make that column responsive. Then we'll align the grid items to the center and add some margin to it. From there, we can move on to the image element inside of the author avatar div. We'll wanna make sure it's display block because images are inline by default. We'll give it a fixed width and height, and then set the border radius to 50% to make it appear as a circle. Then if you want to turn it into a black and white image, you can use filter along with the grayscale value set to a 100%. That puts the image in the right place, but now we need to move our SVG underneath it. We can target the SVG directly with our half circle class and we'll set its position to absolute. This allows us to move it anywhere within the grid area. So let's move it to the bottom left. We can define the width and height, but it's currently displayed as a black half circle. What we actually wanna do is remove the fill color from the shape, so we set the fill property to none. Then we give it a border by defining the stroke property. The stroke has a color, width, and a line cap value, which when set to round, will give it a rounded edge. Then as a final touch, we'll style the author name prefix class to a bold light gray color. That takes care of our avatar section, and now we're ready for the final trick, which answers the question, how do we apply a CSS gradient to text? Unfortunately, it's not as easy as just targeting the color property. When we try to apply a linear gradient to color, you can see that nothing happens. What we actually need to do is set the background of the element, then use the shape of the text to clip the background. Let's go ahead and change the color property to background, and then we'll set the text shadow to none. Then we'll use background clip to use the text shape to essentially cut out the background. We also need to use the web kit vendor prefix for background clip, and text fill color set to transparent. This will allow the background color to flow through the text shape. And now, we have this cool gradient effect when we hover over a header in the card. Just keep in mind that browser support for this particular trick is fairly limited. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you want access to more advanced full stack content, consider becoming a number at Fireship IO. Thanks for watching and I will see you in the next one.
The speaker explains how to reverse engineer the UI element in a tutorial on building a feature step by step. They discuss combining grid and flexbox layout to create a stack of cards, setting responsive display on the card list, using shadow and box shadow to style cards, and setting height and width for each card. They also explain how to use the "outerations to translate" feature on cards to move elements across the x axis and add a circle honor to the image, and how to use a half circle birthday birthday birthday birthday birthday birthday birthday birthday birthday. Finally, they remind viewers to use the "lesson chat" feature and thank them for watching.