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.
