Learn how to create a pure CSS card design using HTML and CSS. Our guide provides step-by-step instructions for planning, implementing, and fine-tuning your card design for a professional look and feel.
Table of Contents
Web design is essential in making a great first impression on your visitors. One of the best ways to achieve this is by creating a visually appealing card design that is both functional and aesthetically pleasing. In this guide, we will teach you how to create a pure CSS card design using HTML and CSS.
Planning the Card Design
Before getting started with the implementation of the card design, it is crucial to plan the design first. This will help you save time and achieve the desired outcome. The following are the key steps to planning a card design:
- Determine the purpose of the card design - Is the card design meant to display products, services, or general information?
- Select colors and fonts to be used - Use colors that complement each other and represent your brand well.
- Plan the layout of the card - Will the card design have an image, a heading, and a description? What will be the positioning of each element?
Let's start making an amazing card design using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our card.
Here's a breakdown of the code:
The <body> element defines the content that appears within the web page's body.
The <div> element creates a container for other elements within the web page. In this case, the <div> has a class attribute called "card general", which likely applies some styling to the container.
Within the <div> container, there are three more <div> elements. Each of these elements also has a class attribute called "card" and an additional class attribute that specifies a move animation, either "one move", "two move", or "three move".
The text "Dev" is nested within the first <div> element, and "Hello" is nested within the second <div> element.
The third <div> element contains an emoji of fire (🔥).
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our card using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the card is in place, the next step is to add styling to the card using CSS. CSS allows us to control the visual appearance of the card, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our card.
The first line imports fonts from Google Fonts. It imports three different font families: Concert One, Emilys Candy, and Oswald. The "display: swap" property ensures that text will be displayed in the default system font until the desired font is loaded.
The next few lines apply some basic styles to the HTML and body elements. The width and height are set to 100%, which means that the document will take up the full width and height of the browser window. The overflow property is set to "hidden," which means that any content that exceeds the dimensions of the HTML or body element will be hidden. The font-family property sets the default font for the document to Oswald. Finally, the background-color property sets the background color of the page to a light yellow-green color.
The ".general" class is defined as a positioned element that is centered vertically on the page using the "top" and "transform" properties. The "cursor" property sets the cursor to a pointer, which indicates that the element is clickable.
The ".general:active .two" and ".general:active .three" selectors apply styles to the ".two" and ".three" elements when the ".general" element is in an active state (i.e. when it is being clicked). The styles applied include a rotation, translation, and scaling of the elements, which creates an animated effect.
The ".card" class is defined as a flex container with centered content. The background color is set to white, and the font size is set to 1.5em. The width and height are set to 100px, and the element is centered on the page using the "margin" property. The "border-radius" property adds rounded corners to the element.
The ".one," ".two," and ".three" classes define elements that are positioned absolutely on the page. Each element has a different background color and is positioned in a different corner of the page. The "z-index" property determines the order in which the elements are stacked on top of each other.
The ".move" class defines a transition that will be applied to any property that changes over a duration of 0.5 seconds using the "cubic-bezier" easing function. This class is not applied to any elements in the code, but could be used to add smooth transitions to other elements.
This will give our card an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Emilys+Candy&family=Oswald&display=swap');
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'Oswald', sans-serif;
background-color: rgb(243, 243, 182);
}
.general {
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.general:active .two {
transform: rotate(-5deg) translateX(90px) scale(0.9);
}
.general:active .three {
transform: rotate(5deg) translateX(-90px) scale(0.9);
}
.card {
display: flex;
align-items: center;
justify-content: center;
color: white;
width: 100px;
height: 100px;
font-size: 1.5em;
margin: auto;
border-radius: 10px;
}
.one {
background: #540D6E;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.two {
background: #EE4266;
position: absolute;
right: 0;
z-index: 2;
transform: rotate(-10deg) translate(8px, 8px);
}
.three {
background: #FFD23F;
position: absolute;
left: 0;
z-index: 1;
transform: rotate(10deg) translate(-5px, 7px);
}
.move {
transition: all .5s cubic-bezier(.5, .40, .10, 1);
} Final Output:
Conclusion:
In conclusion, creating a visually appealing card design can go a long way in improving your website's user experience. By following the steps we have outlined in this guide, you can create a pure CSS card design using HTML and CSS that is functional, aesthetically pleasing, and professional-looking. Remember to plan your design first, select the right colors and fonts, and use responsive design elements to ensure that your card design looks great on any device. Fine-tune your design with hover effects and animations to make it even more engaging and interactive. With these tips and techniques, you can create a card design that not only looks great but also enhances your website's user experience.
We hope you found this guide helpful in creating a pure CSS card design using HTML and CSS. Remember that good web design is essential for a great user experience, so don't hesitate to put these tips into practice on your website.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
