Help Wordpress

Help Wordpress

Wordpress can be fast. Very fast. Really :)

Heart via CSS Art for all lovers :)

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:

CSS art, heart demo and introduction
CSS art, heart demo and introduction

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.

If the article proved helpful to you, please click on one of the buttons to share it with your friends. Thanks!

Related posts:

Good, fast, cheap. Pick two.

Good, fast, cheap. Pick two.

You’ve probably know the phrase: “Good fast cheap. Pick two”. This concept has a few different names: it’s known as the Triple Constraint, Iron Triangle but most popular [...]
Simple css rating bar via stars

Simple css rating bar via stars

I like simple solutions, because simple solution means reliability solution. For one of the projects I needed the simple css rating bar consisting of stars. Basic requirements – [...]
RSS Icon via CSS

RSS Icon via CSS

CSS3 allows us to draw very beautiful objects, and in some cases to dispense with the use of the usual graphics. Let’s try to make the icon for [...]
Ukrainian Trident made by CSS

Ukrainian Trident made by CSS

Today Ukraine is celebrating Independence Day. This year, because of the Russian invasion, the Independence Day will be different from past holidays: The traditional firework on Independence Day [...]

Leave a Reply

Your email address will not be published. Required fields are marked *