LAST UPDATED: AUGUST 5, 2021
How to create cards with CSS?
A card is a box-shaped element in the webpage which is used to add information that can be separated from other elements on the website. It will be easily visible to the users. In this tutorial, we will learn to create a card with CSS.
Creating a Card
To create a card structure, simply add a div container and customize it with CSS property. Add box-shadow property for card effect. Set some padding to the card and add some elements like links, images, etc to the card.
Example: Creating a card with CSS
Here is a small example where we have used the above property to create a card.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
width: 30%;
text-align: center;
}
.text {
padding: 2px 3px;
}
</style>
</head>
<body>
<div class="card">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627731351-101156.png" alt="img">
<div class="text">
<h2> We have created a card </h2>
</div>
</div>
</body>
</html>
Output
Here is the output of the above code.
Example: Adding rounded borders to card
Additionally, we can also add rounded borders to the card using border-radius property. Here, is a sample code for it.
Conclusion
We have learned to create a card with CSS. The card box structure is added using the box-shadow property. In Addition, we have added padding and add elements to the card to set position.
