Faire des bordures et des flous arc-en-ciel animés

Détrompez-vous : il ne s'agit d'une ombre, mais bel est bien d'une supercherie qui fera croire à vos visiteurs que vous avez ajouté des bordures et des ombres arc-en-ciel animées ! Il n'en est rien : pas de bordures et aucune ombre ne sont utilisées dans ce tutoriel. Découvrons ensemble le secret derrière ce tour de passe-passe.

1ère étape

Débutons par le code HTML.

<div class="box"></div>

Nous pouvons difficilement faire plus simple.

2ème étape

Occupons-nous de la boîte (.box).

.box {
  width: 400px;
  height: 300px;
  background-color: rgb(31, 31, 31);
  position: relative;
}

Nous créons juste une boîte de 400px sur 300px.

3ème étape

Stylisons les pseudos-éléments before et after.

.box::before,
.box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, #ff0000, #00f0f0, #00ff00, #0000ff, #ff0000, #00f0f0, #00ff00, #0000ff, #f00f0f);
  width: 100%;
  height: 100%;
  transform: scale(1.02);
  z-index: -1;
  background-size: 500%;
  animation: animate 20s infinite;
}

Dans cette étape, nous créons deux éléments grâce aux pseudos-éléments before et after.

Ces deux éléments ont un background multicolore que nous agrandissons de 500% afin de garder la plus belle partie.

Nous augmentons la taille de nos éléments grâce à la propriété transform de 2%, ce qui nous permet de donner cette impression d’avoir déjà des bordures arc-en-ciel sur notre élément.

Enfin, nous utilisons la propriété z-index pour passer ces éléments derrière notre boîte, afin de ne pas la recouvrir.

4ème étape

Ajoutons du flou à after.

.box::after {
  filter: blur(20px);
}

Nous ajoutons du flou sur notre élément after uniquement ce qui donne l’impression d’avoir une ombre multicolore.

5ème étape

Elaborons notre animation.

@keyframes animate {
  0% { background-position: 0 0; }
  50% { background-position: 300% 0; }
  100% { background-position: 0 0; }
}

Cette animation nous permet de bouger notre background sur nos éléments, ce qui donne cet effet de mouvement.