Dear friends in this articles we learn about How to make Heart without any image and icon using CSS only | CSS Creatives. And in this article we are use two types languages HTML and CSS. If you like our article then visit more.
Heart Using CSS
Are you ready for make heart using css and make a beautiful css creatives. First of all, you have to download a code editor in which we can write our code, we are telling you the names of some code editors, Visual Studio Code, this is the most used and most people use it because some of its features are very Works easily in writing our code quickly and it has built-in tags and properties, with the help of which we make our code very easy. And i hope you like vs code editor for fast coding and make quickly css creatives.
VS Code Editor
After this, you have to open the code editor and save it by selecting a new file and remember that while saving the file, you must write dot html because the browser has to explain it from html itself, without html we can not run any language That’s why it is very important for us to come to html and make this css creatives.
HTML CSS
Now you have to do coding, your file has also been created, now time has come to do your coding, so before starting coding, you must know about html css because whatever code we will write, it is in html and css only. That’s why these languages are very important to you, so let’s start coding now.
Friends, we are going to talk about how to make a heart in html and css, what is possible, can we make a heart without using images or icons. So we will say that you can make a sale, just you have to read our article carefully. And after that you can check by copying the below given source code and pasting it in your code editor, if you see any error in this code, then you check the related video from this article so that you can learn to make heart manually.
HTML For Heart
First of all, we will write the code of html so that we do not have to write the code of html again and again, so we will complete it beforehand, after that we will also write the code. So to write code in html you have to go in body tag. And going there you have to take div tag with class and name of class will be Heart. Then after that we have to take another div tag inside it with class and this time we will name the class as Heart1 then we will copy and paste this div tag again this time we will name this class as Heart2 . Then we will take h1 tag and write love text in it. After taking this we will again take another div tag and this time we will name its class top arrow 1. Then we will copy this.
And will paste it once again. But we will change its class name to top arrow 2. After that we will take another div tag and this time we will name its class bottom arrow 1. Similarly, we will take 4 more classes but we will change the class names.
CSS for Heart Design
Now we will know how to write code in CSS so that we can design the heart, so let’s design. First of all you should have knowledge of CSS, after that you can write and understand the code in CSS. But you can paste our CSS code in your file. And if you know about CSS then follow this article of ours. So that we can explain to you how to design a heart through CSS.
To write CSS, you have to go to the head section and after that you have to take the style tag. Then you have to take the * tag and close the open with curly braces. So that we can use the property of CSS inside it. Then inside it you have to give margin 0 and padding 0 then you have to give box sizing border box. After that you will take the body tag and flex the display in it. Then justify will center the content, then center the align items then keep its minimum height 100vh something like this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(24, 24, 24);
}
If you want to copy our CSS code, then copy the code inside the style from the source code given below and paste it in your code editor so that your work becomes easier and you do not need to do much coding.
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>Dark Effect</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(24, 24, 24);
}
.heart{
width: 250px;
height: 250px;
background-color: white;
box-shadow: 4px 13px 200px rgb(2, 221, 192),
-4px -13px 200px rgb(2, 221, 192);
}
.heart-1{
width: 300px;
height: 410px;
background-color: rgb(2, 221, 192);
border-radius: 50% 50% 50% 0%;
transform: rotate(-54deg);
position: absolute;
top: 120px;
left: 455px;
}
.heart-2{
width: 300px;
height: 400px;
background-color: rgb(2, 221, 192);
border-radius: 50% 50% 0 50%;
transform: rotate(50deg);
position: absolute;
top: 123px;
left: 43%;
}
h1{
position: absolute;
letter-spacing: 20px;
font-family: verdana;
font-size: 90px;
color: rgb(2, 211, 192);
animation: 4s animate infinite;
}
@keyframes animate{
0%,10%{
color: black;
}
50%,90%{
color: red;
}
}
.top-teer-1{
width: 100px;
height: 30px;
background-color: rgb(2, 211, 192);
border-left: 4px solid red;
border-radius: 10px 0px 0px 10px;
position: absolute;
top: 30%;
left: 65%;
transform: rotate(-25deg);
}
.top-teer-2{
width: 70px;
height: 70px;
background-color: rgb(2, 211, 192);
border-radius: 50% 0% 50% 0%;
position: absolute;
top: 22%;
left: 71%;
transform: rotate(18deg);
}
.bottom-teer-1{
width: 200px;
height: 30px;
background-color: rgb(2, 211, 192);
border-radius: 50% 0% 0% 50%;
position: absolute;
top: 70%;
left: 22%;
transform: rotate(-25deg);
}
.bottom-teer-2{
width: 80px;
height: 20px;
background-color: rgb(2, 211, 192);
border-radius: 50% 0% 0% 50%;
position: absolute;
top: 65%;
left: 28%;
transform: rotate(10deg);
}
.bottom-teer-3{
width: 80px;
height: 20px;
background-color: rgb(2, 211, 192);
border-radius: 50% 0% 0% 50%;
position: absolute;
top: 73%;
left: 29%;
transform: rotate(-60deg);
}
.bottom-teer-4{
width: 80px;
height: 18px;
background-color: rgb(2, 211, 192);
border-radius: 50% 0% 0% 50%;
position: absolute;
top: 70%;
left: 24%;
transform: rotate(0deg);
}
.bottom-teer-5{
width: 80px;
height: 18px;
background-color: rgb(2, 211, 192);
border-radius: 50% 0% 0% 50%;
position: absolute;
top: 75%;
left: 26%;
transform: rotate(-60deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<h1>LOVE</h1>
</body>
</html>Watch video related this article…
