Une douce lueur extérieure ajoutée à un élément de votre page Web fait ressortir l'élément pour le spectateur. Utiliser CSS3 et HTML pour appliquer une lueur autour des bords extérieurs d'un objet important. L'effet est similaire à une lueur extérieure ajoutée à un objet dans Photoshop.
Créer l'élément pour briller
Les effets de lueur fonctionnent sur n'importe quel arrière-plan, mais ils sont meilleurs sur les arrière-plans sombres, car la lueur semble alors plus scintiller. Dans un exemple de boîte rectangulaire à coins arrondis, un élément DIV est placé dans un autre élément DIV avec un fond noir. Le DIV extérieur n'est pas nécessaire pour la lueur, mais il est difficile de voir la lueur sur un fond blanc.
Définir la taille et la couleur de l'élément
Après avoir choisi l'élément que vous allez embellir avec une lueur, ajouter des styles comme la couleur, la taille et les polices d'arrière-plan.
Cet exemple est un rectangle bleu; la taille est définie sur 147px par 90px; et la couleur d'arrière-plan est définie sur #1f5afe, un bleu royal. Il comprend une marge pour placer l'élément au milieu de l'élément conteneur noir.
Arrondissez les coins
Créer un rectangle avec des coins arrondis est facile avec CSS3. Ajoutez la propriété de style border-radius à votre classe d'éclat. N'oubliez pas d'utiliser le –webkit– et –moz– préfixes pour une compatibilité maximale.
-webkit-border-radius: 15px ;
-moz-border-radius: 15px ;
rayon de bordure: 15 px ;
Ajoutez de la lueur avec une ombre de boîte
La lueur elle-même est créée avec une ombre de boîte. Parce qu'il halos tout l'élément sans projeter la lueur d'un côté comme une ombre, définissez les longueurs horizontale et verticale sur 0px.
Dans cet exemple, le rayon de flou est défini sur 15px et la propagation du flou est de 5px, mais vous pouvez modifier ces paramètres pour déterminer la largeur et la diffusion souhaitées de la lueur. La couleur RVB (255 255 190) est une couleur jaune avec une transparence alpha RGBa définie sur 75 %—rgba (255,255,190, 0,75). Choisissez une couleur lumineuse qui convient le mieux à votre projet. Comme pour arrondir les coins, n'oubliez pas d'utiliser les préfixes du navigateur (–webkit– et –moz–) pour la meilleure compatibilité.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75) ;
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, 0,75) ;
box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75) ;