Les effets "Glowing"
Ayfoth vous propose de réaliser la création suivante :
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)
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 */
}
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 */
}
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 */
}
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.