Créer un cœur en HTML/CSS pur

Vous voulez prouver votre amour à l’élu(e) de votre cœur mais vous êtes sur la paille ? Voici une petite astuce faire un cœur en HTML et CSS pur !

Un cœur = un carré + 2 ronds

Non ce n’est pas un cheatcode sur PS4.

Si on met de côté ses sentiments quelques minutes, en regardant la chose d’un point de vue purement géométrique, on se rend compte qu’un cœur est simplement constitué d’un carré et de deux demi-cercles.

Coeur géométrique
Une règle et un compas suffisent pour créer un cœur !

Sachant cela, il devient tout de suite plus facile de recréer un coeur en HTML et CSS en utilisant les pseudo-élément after et before.

Le HTML :

<div id="heart"></div>

Le CSS :

#heart {
 position:relative;
 width:100px;
 height:100px;
 margin:10% auto 0 auto;
 background: red;
 -ms-transform: rotate(45deg); /* IE 9 */
 -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
 transform: rotate(45deg);
}
#heart:before,
#heart:after {
  position:absolute;
  content: "";
  width:100%;
  height:100%;
  border-radius:50%;
  background:red;
  top: -50%;
  left: 0;
}
#heart:after {
  left: -50%;
  top: 0;
}

C’est bon vous l’avez ? Jusque ici tout va bien.

Note: Si vous n’êtes pas trop à l’aise avec les pseudo-éléments, je vous renvois vers la très bonne documentation de Mozilla.

Un cœur ne vaut rien s’il ne bat pas

Bon voilà on a fait notre cœur en HTML CSS pur et on est content ! On est fier on se la pète et tout !

Et bien non ! Si on veut déclarer sa flamme à son âme-sœur il va falloir se sortir un peu les doigts du ***.

Mettons un peu de vie sur ce cœur qui est censé battre pour celle ou celui qu’on aime ?

Créez votre propre séquence d’animation avec keyframes

Si vous ne connaissez pas encore la règle CSS keyframes, sachez qu’il s’agit d’une fonction vous permettant de créer votre propre animation en lui attribuant un nom, ainsi que les propriétés et les valeurs affectées durant cette animation, c’est plutôt pratique si vous êtes amené à ré-utiliser des animations.

Pour plus d’informations -> le site de Mozilla.

Attention cette fonction n’est pas compatible sur tout les navigateurs.

Déclaration de votre animation

@-webkit-keyframes pulse {to {box-shadow: 0 0 150px 5px rgba(169, 68, 66, 1);width:120px;height:120px;}}
@-moz-keyframes pulse {to {box-shadow: 0 0 150px 5px rgba(169, 68, 66, 1);width:120px;height:120px;}}
@-ms-keyframes pulse {to {box-shadow: 0 0 150px 5px rgba(169, 68, 66, 1);width:120px;height:120px;}}
@keyframes pulse {to {box-shadow: 0 0 150px 5px rgba(169, 68, 66, 1);width:120px;height:120px;}}

Là ici on modifie les attributs box-shadow, width et height.

 

On applique l’animation sur notre cœur

#heart {
  width:100px;
  height:100px;
  margin:10% auto 0 auto;
  background: red;
  -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    position:relative;
    box-shadow: 0 0 0 -1px rgba(169, 68, 66, 0);
    -webkit-animation: pulse .75s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse .75s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse .75s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse .75s infinite cubic-bezier(0.66, 0, 0, 1);
}

Le résultats


Qui ne craquerait pas en recevant une page Web animée et personnalisée ne contenant aucune image ou animation flash ?

Après un bref sondage autour de moi pas mal de personnes seraient insensibles à ce type d’exploit technique :/