La propriété CSS box-shadow

CSS – Créer un effet néon à partir de box-shadow

La propriété CSS box-shadow peut se révéler extrêmement surprenante. Celle-ci est régulièrement utilisée par les développeurs web pour ajouter un effet d’ombre en arrière-plan d’un élément. Ce qui est moins connu en revanche, c’est qu’en dehors de son utilisation traditionnelle, il est possible d’utiliser box-shadow pour réaliser des effets lumineux et colorés assez époustouflants !

Les bases

Tout d’abord, voici un petit rappel sur le fonctionnement de la propriété box-shadow :

Voici une réprésentation graphique pour clarifier un peu tout cela :

box shadow diagram 600x349 - CSS - Créer un effet néon à partir de box-shadow

Définir les insets

Nous allons maintenant commencer à bricoler un petit peu avec notre propriété box-shadow, et pour cela nous allons lui ajouter un attribut inset. Voici comment cela se présente :

Il est possible d’empiler plusieurs couches de box-shadow simplement en les renseignant les unes à la suite des autres, séparées par une virgule. L’ordre a bien entendu une importance pour obtenir l’effet glow souhaité, la première box définie arrivera en tête de pile et la dernière sera tout en dessous.
Pour créer un effet de dégradé, on va donc définir plusieurs couleurs à l’intérieur de notre box-shadow(d’où le terme inset). Ici nous créeons un effet avec 2 couleurs intérieures, mais si nous voulions ajouter  des éléments en dehors de notre rectangle, mais il est tout à fait possible de les définir dans la même déclaration de box-shadow que pour nos éléments inset, toujours en séparant simplement par une virgule.

En ajoutant quelques autres propriétés à notre div pour placer notre élément sur la page, voici le résultat obtenu :

insetcalc 300x102 - CSS - Créer un effet néon à partir de box-shadow

 

 

 

 

 

 

 

Application concrète

Maintenant que nous savons comment manipuler un peu mieux la propriété box-shadow, nous avons toutes les clés en main pour coder quelque chose d’un peu plus cool 🙂

En repartant de l’exemple précédent, nous allons réaliser une belle sphère lumineuse avec un effet néon et un dégradé de couleur. Cela vous paraît difficile ? Vous allez voir qu’avec nos nouvelles connaissances en CSS, il n’y a rien de plus simple !

Voici le code à écrire dans notre feuille de style :

Comme promis, rien de compliqué ! Et rien de bien différent de l’exemple précédent au final.

box-shadow prend la forme de l’élément qu’elle recouvre. Si nous modifions la forme de notre élément en un cercle grâce à un petit border-radius: 50%, alors box-shadow va donc être circulaire également.

Nous allons ensuite contruire notre box-shadow avec un peu plus de couleurs, à la fois à l’intérieur avec inset pour créer l’effet dégradé, mais aussi à l’extérieur pour  ajouter l’effet néon.

Et voilà, c’est déjà fini !

boxshadowcircle 300x140 - CSS - Créer un effet néon à partir de box-shadow

Quel est mon score SEO ?

Audit gratuit et instantané de votre site internet

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *