CSS Card Tricks

i happened 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 semi-circle 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 the write up on fireship io we're going to build this feature step by step from scratch so pull up your editor and create a file called card.css and index.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.css file and 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 and 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 want to point out is that instead of a section article and header i could have just called all these elements 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 can open up our html by right-clicking on the file and clicking copy path then 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 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 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 first 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'll want to set its overflow x property to scroll and then we have three 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 sudo 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 the siblings before it stay put we'll start by grabbing the card that's actually 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 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 class 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 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 i want to show you next is how we can add an avatar along with this semi-circle 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 want to 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 first column and then one 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 want to 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 100 percent 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 want to 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 webkit 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 going to 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 pro member at fireship io thanks for watching and i will see you in the next one

Channel: Fireship

Views: 139,968

Keywords: webdev, app development, lesson, tutorial, css, css tutorial, css tricks, css demo, css card, css animation, css basics

Id: 29deL9MFfWc

Length: 8min 47sec (527 seconds)

Published: Fri Sep 11 2020