Heart via CSS Art for all lovers :)

Today I want to congratulate all visitors of my blog with Valentine Day. And I decided to do the heart because this is mean the simbol of love. This heart was created solely by means of CSS, without any graphical elements, and I call it the CSS art.

I saw CSS icons by Nicolas Gallagher and I like it. The HTML-code is very simple and it relies on CSS pseudo-elements rather than extraneous HTML elements. It mean, the heart use one div only.

CSS art, heart demo

You can see demo by disabling the image in browser and reload the page – the heart will be visible. Furthermore if you can see the source code, you see one div only. Not bad, right? Lets try use CSS heart from Nicolas but will try improve it.

Introduction and theory

The heart will be folded via two elements, and the each will be rounded off at the top. And we will rotate second element on 90 degrees. You can see an image for example:

It is easy, lets try. HTML – it one div only:

<div class="my-heart"></div>

Next step – it CSS:

.my-heart {
position: relative;
width: 200px;
height: 200px;
}
.my-heart:before,
.my-heart:after {
position: absolute;
content: "";
left: 100px;
top: 0;
width: 100px;
height: 160px;
background: #f00;
border-radius: 100px 100px 0 0;
}

Now, if just add property transform: rotate(-45deg) for my-heart:before and property transform: rotate(45deg) for my-heart:after, we will have our red heart. It not hard, right? Lets try improve our heart via CSS Art. Firstly, I want to add gradient:

.my-heart:before{
background: linear-gradient(100deg, #f00, #f00, #f00, #f00, #900);
}
.my-heart:after {
left: 0;
background: linear-gradient(20deg, #f00, #f00, #f00, #900);
}

And secondly I want to add simple animation:

@keyframes heart-size {
0% { width: 100px;height: 160px;}
5% {width: 100px;height: 161px;}
10% {width: 100px;height: 160px;}
15% {width: 100px;height: 162px;}
20% {width: 100px;height: 160px;}
}

Must be remember, the animation “heart-size” need add for pseudo-elements my-heart:before and my-heart:after. It`s all, now we have cool red heart via CSS art for all lovers. It work in Firefox, Google Chrome, Opera and Safari. Be happy 🙂 But if something is not clear, you can ask a question in the comments. Also, maybe will helpfull Pure CSS GUI icons by Nicolas Gallagher.