82 Followers
·
Follow

CSS stands as Cascading Style Sheets which is a complex language that packs quite a bit of power and assist HTML. It allows us to add layout and design to our pages, and it allows us to share those styles from element to element and page to page in a more convenient way . It gives us the power of visualization at exact points. (How? New Post coming soon!)

Let’s learn to create a heart using just CSS that might come handy during valentine day. Jokes apart!

Let’s dive in.

To create a heart, we just need two basic geometric shapes:

  • Square
  • Circle

We will use 1 square and 2 circles to create a heart.

Image for post
Image for post

Now,
Open any text editors like Atom,notepad: Say Sublime
and type the following code.


<!DOCTYPE html>
<html>
<head>
<title>Heart</title>
</head>
<body>
<div class=”heart”></div>
</body>
</html>

Here we have created a div section and created a class called heart.

Now, just using a class called heart we will create a heart.

CSS can be added to HTML elements in 3 ways:

  • Inline — by using the style attribute on HTML elements.
  • Internal — by using a <style> element in the <head> section.
  • External — by using an external CSS file.

Here, for simplicity and as we have less css contain we will use internal CSS using `<style> </style>` tag in `<head> </head>` section.

div.heart{
display: block;
margin:100px;
width: 100px;
height: 100px;
background-color: red ;
position: relative;
transform: rotateZ(-45deg);
}

After this, we get output as Square rotated in -45 degrees with red colored.

Image for post
Image for post

Now lets add give the proper shape of a heart.

Let’s add the following code just below the previous css.

div.heart:after,
div.heart:before{
display: block;
content:’’;
width: 100px;
height: 100px;
background-color: red;
border-color: blue;
border-radius: 50px;
position: absolute;
}

And lets add next code block

div.heart:after{
top: -50px;
left:0;
}
div.heart:before{
top:0;
left: 50px;
}

Output will be as expected:

Image for post
Image for post

So the final code will look like:

<!DOCTYPE html>
<html>
<head>
<title>Heart</title>
<style type=”text/css”>
div.heart{
display: block;
margin:100px;
width: 100px;
height: 100px;
background-color: red ;
position: relative;
transform: rotateZ(-45deg);
}div.heart:after,
div.heart:before{
display: block;
content:’’;
width: 100px;
height: 100px;
background-color: red;
border-color: blue;
border-radius: 50px;
position: absolute;
}
div.heart:after{
top: -50px;
left:0;
}
div.heart:before{
top:0;
left: 50px;
}
</style>
</head>
<body>
<div class=”heart”></div>
</body>
</html>

See, just using CSS, we are able to create Heart.
Now feel free to share this heart with your beloved one.

Happy coding ^_^

Written by

Data Science | Data Visualization | Community Work Focused | Philekoos | https://www.linkedin.com/in/maladeep/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store