Dear friends in this articles we learn about Beautiful Cards Design Using CSS Only | Cards Design. If you like our article then visit more.
HTML For Cards
Friends, we are going to talk. That’s how to write code in html to make cards, so let’s know how to write code for cards in html. Most of all, you should know about html, if you do not have enough html, then you cannot make these cards, but you can make them by using our source code given below. And if you have a lot of html then follow our article so that you can easily make cards design.
First of all you have to come in body tag and take a div with class you can name class card1 then inside that you have to take another div again and inside that div you have to put 1. After that you have to take h3 tag and put html title inside it then you have to take p tag. And inside it you have to put lorem text and then apply br br tag 2 times so that your paragraph can get break. After that you have to take the anchor tag and inside it you have to put the text of read more. Then your first cards will be created in html.
Then in the same way you can copy and paste the div of the first card 2 more times for the rest of the cards design to save your time.
Cards Design in HTML
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards design using css.
Cards Possition
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed so if you want to make easily with us then get the bootstrap from official site and get the liberary for create this.
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options. This is a amazing cards design and with hover effects of the mouse enter. Here you will learn and how make it for all requirement as well.
CSS for Design
Now we will know how to design cards. So first of all you need to know about CSS because web designing is done by CSS only. In this article, we are going to use CSS internally so that all our code remains in one file, we do not have to create a separate file of CSS.
So to use CSS internally, you have to go to the head section. Then by going inside it, you have to take the style tag, then you have to take the * tag, after that you have to take the curly braces open and close. Then in that we will give margin 0 and padding 0 after that we will give box sizing closer box something like this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Now we have to take body tag and inside it we have to first give display flex and then justify content center. Then you will center the align items, after that the minimum height has to be kept 100vh. Then you have to keep the blessing of the font family. After that the background color is to be given rgb. Exactly like this.
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: verdana;
background: rgb(247, 247, 247);
}
Then we have to take container class then keep it display flex. After that we will take the first card class and then we have to put the position absolute in that. Then we will do 80px from the top and 77px from the left, then the width is to be taken 330px, then the height will be 400px and then the background color will be white. Then finally give the box shadow inset 2px 2px 6px rgb and save again.
.container{
display: flex;
}
.cards-one{
position: absolute;
top: 80px;
left: 77px;
width: 330px;
height: 400px;
background-color: white;
box-shadow: inset 2px 2px 6px rgb(122, 122, 122);
}
In the same way, CSS has to be written for the rest of the cards as well, so you first copy the style of the cards and paste it three times, after that you change the card class. So that CSS is fully applied on all the cards.
Source Code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glass Crads</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: verdana;
background: rgb(247, 247, 247);
}
.container{
display: flex;
}
.cards-one{
position: absolute;
top: 80px;
left: 77px;
width: 330px;
height: 400px;
background-color: white;
box-shadow: inset 2px 2px 6px rgb(122, 122, 122);
}
.cards-two{
position: absolute;
top: 80px;
left: 487px;
width: 330px;
height: 400px;
background-color: white;
box-shadow: inset 2px 2px 6px rgb(122, 122, 122);
}
.cards-three{
position: absolute;
top: 80px;
left: 898px;
width: 330px;
height: 400px;
background-color: white;
box-shadow: inset 2px 2px 6px rgb(122, 122, 122);
}
.cards{
width: 330px;
height: 400px;
background: rgb(247, 247, 247);
padding: 20px;
overflow: hidden;
box-shadow: 2px 2px 6px rgb(122, 122, 122);
position: relative;
}
.card-1{
margin-right: 80px;
}
.card-3{
margin-left: 80px;
}
.icon{
width: 60px;
height: 60px;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
font-weight: bold;
margin: auto;
transition: 0.4s;
}
.icon-1:hover{
box-shadow: 0px 0px 0px 400px red;
color: black;
border: 2px solid grey;
transform: rotate(360deg);
}
.icon-2:hover{
box-shadow: 0px 0px 0px 400px rgb(3, 209, 3);
color: black;
border: 2px solid grey;
transform: rotate(360deg);
}
.icon-3:hover{
box-shadow: 0px 0px 0px 400px blue;
color: black;
border: 2px solid grey;
transform: rotate(360deg);
}
h3{
text-align: center;
margin-top: 30px;
position: relative;
}
p{
text-align: center;
margin-top: 20px;
position: relative;
}
a{
width: 70px;
height: 20px;
background-color: rgb(2, 126, 109);
text-decoration: none;
margin-left: 95px;
color: rgb(248, 248, 248);
position: relative;
padding: 5px;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div>
<div style="background-color: red">1</div>
<h3>HTML</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ab necessitatibus reiciendis ut dolore, id sed. Quibusdam a
ducimus tempore cumque! Consectetur sunt voluptates eum, eius
explicabo cum aliquam ab veritatis?
</p><br><br>
<a href="#">Read More..</a>
</div>
<div>
<div style="background-color: rgb(3, 209, 3)">2</div>
<h3>CSS</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ab necessitatibus reiciendis ut dolore, id sed. Quibusdam a
ducimus tempore cumque! Consectetur sunt voluptates eum, eius
explicabo cum aliquam ab veritatis?
</p><br><br>
<a href="#">Read More..</a>
</div>
<div>
<div style="background-color: blue">3</div>
<h3>JAVASCRIPT</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Ab necessitatibus reiciendis ut dolore, id sed. Quibusdam a
ducimus tempore cumque! Consectetur sunt voluptates eum, eius
explicabo cum aliquam ab veritatis?
</p><br><br>
<a href="#">Read More..</a>
</div>
</div>
</body>
</html>Watch video related this article…
