Beating Heart on CSS3
Good day, dear habrazhitel! Today I will show you the endless possibilities of CSS and teach them how to create a beautiful pulsating heart.
Let's get to work. Let's start by writing the HTML code. To create our heart we need only one empty block element, which we will give the class heart .
')
According to the scheme shown in the figure below, we will draw our heart. Details of the drawing algorithm are described in the following steps.
Let's assign our block a size of 100x100px, red a frame with a thickness of 1 pixel and remove the frame from the top and left. For the .heart: before and .heart: after pseudo-elements, we set the dimensions to 70x100px, the same red frame at 1 pixel, remove the frame to the right, and also round the upper left and lower corners of a 50px radius.
As a result, we got a few obscure lines. In order to make the right heart for us, do the following:
As a result, we get the following code:
To make our heart more beautiful we ryskrasim him with gradients. Since CSS3 is not officially approved and no browser fully supports it, I have prescribed gradients separately for several browsers.
Gradient for the body of the block itself:
Guessing for pseudo-element .heart: before :
Guessing for pseudo-element .heart: before :
Gradients are selected by me personally by the method of scientific spear;)
Browsers that for some reason do not understand CSS3 gradients will see just a red heart.
Now we will try to make our heart beat. This will help us a wonderful property CSS3 - animation. It records the name of the so-called keyframe (it describes how the styles of the element change during the animation), the duration of the animation, the number of repetitions, etc.
To indicate to the browser that it should animate our element in the .heart class, we write:
Now we will write our animation keyframe. In it we will write that the element during the animation should increase by 1.1 times, and then return to the original size. Do not forget that the element we turned 45 o .
The fact is that browsers do not yet support most of the native properties of CSS3, but have their counterparts under their own names. Therefore, for many properties, we have to write prefixes like -webkit- or -moz- at the beginning.
Different browsers have their own prefixes:
Please note that when writing a keyframe for browsers on the Gecko engine, quotation marks in the keyframe name are not needed.
The result is amazing for me: beautiful, elegant, simple. You can see the demo here .
It will work correctly in Mozilla Firefox 4.0+, Safari 4, Google Chrome 3.0+. In Opera, starting from version 12, only gradients will be visible.
PS: It seems to me that this heart will be a great gift to a girl IT-girl on Valentine's Day. How do you think?
STEP 1: Writing an HTML Document
Let's get to work. Let's start by writing the HTML code. To create our heart we need only one empty block element, which we will give the class heart .
<div class="heart"></div>')
STEP 2: How to draw a heart?
According to the scheme shown in the figure below, we will draw our heart. Details of the drawing algorithm are described in the following steps.
STEP 3: Getting started painting
Let's assign our block a size of 100x100px, red a frame with a thickness of 1 pixel and remove the frame from the top and left. For the .heart: before and .heart: after pseudo-elements, we set the dimensions to 70x100px, the same red frame at 1 pixel, remove the frame to the right, and also round the upper left and lower corners of a 50px radius.
.heart {
position: relative;
width: 100px;
height: 100px;
border: solid 1px red;
border-top: none;
border-left: none;
}
.heart: before, .heart: after {
position: absolute;
content: '';
-webkit-border-radius: 50px 0 0 50px; / * for Chrome and Safari * /
-moz-border-radius: 50px 0 0 50px; / * for Firefox * /
border-radius: 50px 0 0 50px;
width: 70px;
height: 100px;
border: solid 1px red;
border-right: none;
} STEP 4: Heart Appearance
As a result, we got a few obscure lines. In order to make the right heart for us, do the following:
- Rotate the pseudo-element .heart: after by 90 o using the property transform: rotate (90deg) ;
- Move the .heart: before and .heart: after pseudo-elements so that our block element takes the shape of a heart;
- Rotate the block element 45 o .
As a result, we get the following code:
.heart {
position: relative;
width: 100px;
height: 100px;
-webkit-transform: rotate (45deg); / * for Chrome and Safari * /
-moz-transform: rotate (45deg); / * for Firefox * /
-o-transform: rotate (45deg); / * for Opera * /
transform: rotate (45deg);
border: solid 1px red;
border-top: none;
border-left: none;
}
.heart: before, .heart: after {
position: absolute;
content: '';
-webkit-border-radius: 50px 0 0 50px;
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
width: 70px;
height: 100px;
border: solid 1px red;
border-right: none;
left: -70px;
}
.heart: after {
position: absolute;
left: 15px;
top: -85px;
-webkit-transform: rotate (90deg);
-moz-transform: rotate (90deg);
-o-transform: rotate (90deg);
} STEP 5: Making the Background
To make our heart more beautiful we ryskrasim him with gradients. Since CSS3 is not officially approved and no browser fully supports it, I have prescribed gradients separately for several browsers.
Gradient for the body of the block itself:
.heart {
background: red;
/ * for browsers that don't support gradient * /
background: -webkit-radial-gradient (115% 50%, 75px 110px, # 8B0000, # 8B0000, red);
/ * for Chrome and Safari * /
background: -moz-radial-gradient (170% 50%, circle, # 8B0000 0%, # 8B0000 52%, red 76%);
/ * for Firefox * /
background: -o-radial-gradient (115% 50%, 75px 110px, # 8B0000, # 8B0000, red);
/ * for Opera * /
background: radial-gradient (115% 50%, 75px 110px, # 8B0000, # 8B0000, red);
/ * according to CSS3 standards * /
} Guessing for pseudo-element .heart: before :
.heart: before {
background: red;
background: -webkit-radial-gradient (15% 50%, 65px 65px, # FFE4E1, red);
background: -moz-radial-gradient (15% 50%, circle, # FFE4E1, red 85%);
background: -o-radial-gradient (15% 50%, 65% 65%, # FFE4E1, red);
background: radial-gradient (15% 50%, 65% 65%, # FFE4E1, red);
} Guessing for pseudo-element .heart: before :
.heart: after {
background: red;
background: -webkit-radial-gradient (50% 80%, 85px 80px, # FFB6C1, red, # 8B0000);
background: -moz-radial-gradient (50% 80%, circle, # FFB6C1, red, # 8B0000 90%);
background: -o-radial-gradient (50% 80%, 85px 80px, # FFB6C1, red, # 8B0000);
background: radial-gradient (50% 80%, 85px 80px, # FFB6C1, red, # 8B0000);
} Gradients are selected by me personally by the method of scientific spear;)
Browsers that for some reason do not understand CSS3 gradients will see just a red heart.
STEP 6: Making our heart beat
Now we will try to make our heart beat. This will help us a wonderful property CSS3 - animation. It records the name of the so-called keyframe (it describes how the styles of the element change during the animation), the duration of the animation, the number of repetitions, etc.
To indicate to the browser that it should animate our element in the .heart class, we write:
.heart {
animation-name: 'anime';
/ * animation keyframe name * /
animation-duration: 300ms;
/ * animation duration * /
animation-iteration-count: infinite;
/ * number of repetitions, in this case - infinite * /
animation-direction: alternate;
/ * play the animation in the forward and reverse order * /
animation-timing-function: ease-in;
/ * calculation of time intervals for animation, in this case animation accelerates * /
} Now we will write our animation keyframe. In it we will write that the element during the animation should increase by 1.1 times, and then return to the original size. Do not forget that the element we turned 45 o .
@keyframes 'anime' {
from {
transform: scale (1) rotate (45deg);
}
to {
transform: scale (1.1) rotate (45deg);
}
}
STEP 7: Cross-browser compatibility issues
The fact is that browsers do not yet support most of the native properties of CSS3, but have their counterparts under their own names. Therefore, for many properties, we have to write prefixes like -webkit- or -moz- at the beginning.
Different browsers have their own prefixes:
- -webkit- for browsers on the Webkit engine (Chrome, Safari);
- -moz- for browsers on the engine Gecko (Firefox, SeaMonkey);
- -o- for browsers on the Presto engine (Opera, Nintendo DS Browser);
.heart {
-webkit-animation-name: 'anime';
-webkit-animation-duration: 300ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in;
} @ -webkit-keyframes 'anime' {
from {
-webkit-transform: scale (1) rotate (45deg);
}
to {
-webkit-transform: scale (1.1) rotate (45deg);
}
}
Please note that when writing a keyframe for browsers on the Gecko engine, quotation marks in the keyframe name are not needed.
Result
The result is amazing for me: beautiful, elegant, simple. You can see the demo here .
It will work correctly in Mozilla Firefox 4.0+, Safari 4, Google Chrome 3.0+. In Opera, starting from version 12, only gradients will be visible.
PS: It seems to me that this heart will be a great gift to a girl IT-girl on Valentine's Day. How do you think?
Source: https://habr.com/ru/post/137197/
All Articles