In this article, you will learn how to create and style CSS cards using some basic HTML and CSS techniques. We will also provide some examples and resources for further learning.
What are CSS Cards?
CSS cards are a popular way to display information on a web page. They are often used to showcase products, services, profiles, articles or other types of content. A card typically consists of a rectangular container with an image, a heading, some text, and a footer. Cards can have different styles, effects and layouts depending on the design and purpose.
Creating a Card with HTML
To create a card with HTML, we need to use a <div> element with a class of card as the main container. Inside the card div we can add an <img> element for the image, another <div> element with a class of container for the content, and optionally a <footer> element for the footer. Here is an example of the HTML structure for a card:
<div class="card">
<img src="img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
<footer>
<a href="#">View Profile</a>
</footer>
</div>
Styling a Card with CSS
To style a card with CSS we need to target the card class and its child elements. We can use various CSS properties to customize the appearance and layout of the card. Here are some common CSS properties that we can use:
- box-shadow: To create a shadow effect around the card.
- border-radius: To make the corners of the card rounded.
- transition: To add a smooth transition effect when the card is hovered over.
- padding: To add some space inside the card container.
- text-align: To align the text inside the card.
- display: To change the display mode of the card elements.
- flex: To use flexbox layout for the card elements.
Code for CSS Cards
Here is an example of the CSS code for styling a card:
.card {
/* Add shadows to create the card effect */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
/* Add rounded corners */
border-radius: 5px;
/* Add a transition effect */
transition: 0.3s;
}
/* Add mouse-hover effect */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* Add padding in the card container */
.container {
padding: 16px;
}
/* Add some margin and padding to the footer */
footer {
margin: 16px;
padding: 8px;
}
/* Text align in the footer */
footer a {
text-align: center;
}
/* Use flexbox layout for the card elements */
.card {
display: flex;
flex-direction: column;
}
/* Make the image fill the width of the card */
img {
width: 100%;
}
/* Make the footer stick to the bottom of the card */
footer {
margin-top: auto;
}
Benefits of CSS Cards
- CSS Cards are a way of displaying information in a compact and attractive way, using HTML and CSS.
- CSS Cards can have different styles, effects and layouts, such as shadows, borders, rounded corners, hover effects, 3D effects and grids.
- CSS Cards can be responsive and adapt to different screen sizes and devices.
- CSS Cards can contain various types of content, such as images, text, icons, buttons and links.
- CSS Cards can improve the user experience and engagement by making the content more appealing and interactive.
Examples and Resources
Here are some examples and resources that you can use to learn more about CSS cards and how to create them:
- How To Create a Card with CSS – W3Schools: A tutorial that shows how to create a basic card with CSS.
- 127 CSS Cards – Free Frontend: A collection of free HTML and CSS card code examples from Codepen, GitHub and other resources.
- Card – CSS: Cascading Style Sheets | MDN: A guide that explains how to create and style cards using different CSS layout techniques.
We hope this article helped you to understand how to create and style CSS cards. CSS cards are a versatile and attractive way to display information on your web pages. You can experiment with different styles, effects and layouts to create your own unique cards. Happy coding!