Les effets "Glowing"

Ayfoth vous propose de réaliser la création suivante : Tutoriel : Les effets "Glowing"

Bonjour,
dans ce tutoriel nous allons voir comment faire des effets de type "glowing" en CSS.
Les effets de glowing sont des effets pour rendre plus brillant ou éclatant un élément, par exemple pour mettre un contenu dans un halo de couleur pour le faire ressortir des autres éléments.

Les bases

Ce tutoriel s'adresse aux gens ayant tout de même une bonne base sur l'HTML et le CSS en particulier sur le box-shadow et le text-shadow


Les basiques

Pour faire un effet glowing le plus simple est donc d'utiliser box-shadow pour un conteneur ou text-shadow pour un texte. La technique est la même pour les deux cas de figure on va appliquer à notre ombre des valeurs pour que ça englobe notre contenu et une couleur qui la fera ressortir par rapport au reste du code.
Je rappelle que box-shadow et text-shadow s'écrive de cette manière : box-shadow: 120px 80px 40px 20px #0ff;
Dans l'ordre ça nous donne : x offset, y offset, grosseur du "flou", taille de l'etendue, couleur (la grosseur du flou et la taille de l'étendue sont optionnelsn par défaut ils sont à 0)


Définir des halos

De la même façon en superposant plusieurs fois ce même type de css nous pouvons créer des halos, par exemple :
div {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
box-shadow:
0 0 60px 30px #fff, /* inner white */
0 0 100px 60px #f0f, /* middle magenta */
0 0 140px 90px #0ff; /* outer cyan */
}



Créer un dégradé

Ainsi de la même facon nous pouvons créer un dégradé dans un contenu, grâce aux inset et aux offset.
div {
width: 400px;
height: 200px;
background-color: #fff;
border: solid 2px #fff;
box-shadow:
inset 60px 0 120px #f0f, /* left magenta */
inset -60px 0 120px #0ff; /* right cyan */
}


Pour aller plus loin

En combinant toutes ses infos, on peut même créer une sphère colorée et brillante en pure CSS.
div {
width: 300px;
height: 300px;
border-radius: 50%;
box-shadow:
inset 0 0 50px #fff, /* inner white */
inset 20px 0 80px #f0f, /* inner left magenta short */
inset -20px 0 80px #0ff, /* inner right cyan short */
inset 20px 0 300px #f0f, /* inner left magenta broad */
inset -20px 0 300px #0ff, /* inner right cyan broad */
0 0 50px #fff, /* outer white */
-10px 0 80px #f0f, /* outer left magenta */
10px 0 80px #0ff; /* outer right cyan */
}

Rendus

Personne n'a encore essayé ce tutoriel. Soyez le premier !

Commentaires

Ce tutoriel n'a pas reçu de réponses pour le moment. Soyez le premier à le commenter !

Répondre

Vous devez être inscrit et connecté pour pouvoir poster un commentaire.