Home > Article > Web Front-end > Modern CSS Cards
Modern CSS Cards
- 王林forward
- 2023-08-23 13:25:07965browse
Nowadays, it is very important to create cards on the website to display various data on the website. For example, on the homepage of the TutorialsPoint website, you will find different courses presented in a card format, and when you click on the card, it will redirect you to the specific page for that course.
Also, if you visit any e-commerce store like Amazon or Flipkart, they display the products in card format. The main benefit of creating cards is that we can display short information about the product on the image and provide full information on the product page.
In this tutorial, we will learn to create different cards using only HTML and CSS.
Example 1 (Basic CSS Cards)
In the example below, we created the ‘card’ div element containing the single image and the ‘card-content’ div element. The ‘card-content’ div element contains the text information.
In CSS, we set the fixed dimensions for the card element. Also, we have given styles such as background color, border radius, and border, etc. Also, we apply the box-shadow effect on the card when users hover over the card.
Furthermore, we fixed the dimensions for the image and set the border radius for the top corners. Also, we set the font size of the text content. In the output, users can observe the resultant card.
<html>
<head>
<style>
.card {
display: flex;
flex-direction: column;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease-in-out;
width: 18rem;
background-color: #fff;
}
.card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);}
.card>img {
border-radius: 5px 5px 0 0;
height: 150px;
width: 100%;
object-fit: contain;
}
.card-content { padding: 20px;}
.card h3 { font-size: 1.4rem; margin-top: 0;}
.card p { font-size: 1rem; margin-bottom: 10px;
}
.card a {
padding: 10px 20px;
background-color: #222;
border-radius: 10px;
color: white;
text-align: center;
display: inline-block;
text-decoration: none;
transition: background-color 0.4s ease-in-out;
}
.card a:hover { background-color: #4b4a4a;}
</style>
</head>
<body>
<h2> Creating the <i> basic cards </i> using the CSS </h2>
<div class = "card">
<img src = "https://www.tutorialspoint.com/static/images/logo.png?v2" alt = "Logo">
<div class = "card-content">
<h3> Python </h3>
<p> Python course by Shubham Vora </p>
<a href = "#"> Join now </a>
</div>
</div>
</body>
</html>
The Chinese translation of Example 2
is:Example 2
We create a card similar to the first example in the example below. Here, we set a background image for the "card-image" div element. At the same time, we set the picture by getting random pictures from the "Picsum" website. In this card, we haven’t added a “Join Now” anchor tag like we did in the first example.
<html>
<head>
<style>
.card {
display: flex;
flex-direction: column;
width: 20rem;
background-color: white;
border-radius: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.card-image {
height: 200px;
background-image: url("https://picsum.photos/300/200");
background-size: cover;
border-radius: 10px 10px 0 0;
}
.card-content { padding: 20px;}
.card-title {
font-size: 1.5rem;
font-weight: bold;
margin: 0 0 10px 0;
}
.card-text { font-size: 1rem; margin: 0; }
</style>
</head>
<body>
<h2> Creating the <i> basic cards </i> using the CSS. </h2>
<div class = "card">
<div class = "card-image"> </div>
<div class = "card-content">
<h2 class = "card-title"> Random Image</h2>
<p class = "card-text"> This is an random image description. </p>
</div>
</div>
</body>
</html>
Example 3
In the example below, we have added a hover effect to the card to display additional information.
Here, we created the card container first to create a normal card and styled it using the CSS with 'position: relative.' We added the 'card-first' and 'card-second' div elements inside the card container. The 'card-first' div element contains the information on the card, and the 'card-second' div element contains the information to show whenever users hover over the card.
Furthermore, we set the dimensions for CSS's 'card-first' div element. Also, we set dimensions for the 'card-second' div element in the CSS and used the 'transform: translate(100%)' CSS property to hide the second part. When users hover over the card element, we use the 'transform: translateX(-100%)' CSS property to show the second part of the card.
<html>
<head>
<style>
.card {
position: relative;
width: 300px;
height: 200px;
background-color: rgb(64, 64, 247);
color: white;
border-radius: 10px;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.card-first {
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
font-size: 1.7rem;
transition: transform 0.5s ease-in-out;
}
.card-second {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
transform: translateX(100%);
transition: transform 0.5s ease-in-out;
}
.card:hover .card-first { transform: translateX(-100%);}
.card:hover .card-second { transform: translateX(0%); }
</style>
</head>
<body>
<h2> Creating the <i> hover effect on the card </i> to show additional information. </h2>
<div class = "card">
<div class = "card-first">
<h3> Samsung s22 </h3>
<p> 1,01,000 INR </p>
</div>
<div class = "card-second">
<p> 6.4 inch display </p>
<p> 8 GB RAM </p>
<p> 128 GB Storage </p>
<p> 64 MP Camera </p>
</div>
</div>
</body>
</html>
Example 4
In the example below, we create a div element named 'parent'. After that, we added multiple card elements containing images and card descriptions.
In CSS, we use the clamp() function to set the width of the card. The clamp() function accepts three parameters. The first is the minimum value, the second is the percentage value, and the third is the maximum value. In our example, if 20% of the screen size is between 300 and 500 pixels, the card width will be 20%. Otherwise, it will be 300 pixels or 500 pixels.
Additionally, we set the "parent" container to flexbox to display all cards correctly.
<html>
<head>
<style>
.parent {
padding: 30px 5%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
position: relative;
margin: 20px;
width: clamp(230px, 20%, 500px);
height: 250px;
background-color: green;
color: white;
border-radius: 10px;
transition: all 0.3s ease;
}
.card img {
width: 100%;
height: 150px;
border-radius: 10px 10px 0 0;
object-fit: cover;
}
.card-text {
padding: 20px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
transition: all 0.3s ease;
}
.card-text h3 { font-size: 24px; margin-bottom: 10px;}
.card-text p { font-size: 16px; margin-bottom: 0;}
</style>
</head>
<body>
<h3> Creating the <i> card with clamp() function </i> to manage card dimensions according to the screen dimensions </h3>
<div class = "parent">
<div class = "card">
<img src = "https://picsum.photos/300/200" alt = "Random image">
<div class = "card-text">
<h2> Card 1 </h2>
<p> This is a card description. </p>
</div>
</div>
<div class = "card">
<img src = "https://picsum.photos/300/200" alt = "Random image">
<div class = "card-text">
<h2> Card 2 </h2>
<p> This is a card description. </p>
</div>
</div>
</div>
</body>
</html>
Users learned to create modern cards using HTML and CSS. In the first two examples, we created the basic cards; in the third example, we created the cards with the hover effect. Also, we learned to use the clamp() function to handle the card size according to the device's screen dimensions.
The above is the detailed content of Modern CSS Cards. For more information, please follow other related articles on the PHP Chinese website!