Une faible lueur extérieure ajoutée à un élément de votre page Web fait en sorte que l'élément se démarque du lecteur. Utilisez 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éez d'abord l'élément à briller
Les effets de luminescence peuvent être appliqués à n’importe quelle couleur de fond, mais ils ont un meilleur rendu sur des arrière-plans sombres car ils semblent alors miroiter davantage. Dans cet exemple de boîte rectangulaire à coins arrondis, un élément DIV est placé dans un autre élément DIV avec un arrière-plan noir. La DIV externe n’est pas nécessaire à la lueur, mais il est difficile de voir la lueur sur un fond blanc.
Donnez à la DIV une classe de lueur:
Définir la taille et la couleur de l'élément
Une fois que vous avez choisi l’élément que vous allez embellir, continuez et ajoutez les styles de votre choix, tels que la couleur, la taille et les polices de l’arrière-plan. Cet exemple est un rectangle bleu; la taille est définie à 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.
Autour des coins
Créer un rectangle aux coins arrondis est facile avec CSS3. Ajoutez la propriété de style border-radius à votre classe de rayonnement. N'oubliez pas d'utiliser les préfixes –webkit– et –moz– pour une compatibilité optimale.
-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; Ajouter la lueur avec une ombre de boîte
La lueur elle-même est créée avec une ombre de boîte. Parce que vous souhaitez que l'élément entier soit mis en halo et ne projette pas la lueur d'un côté comme une ombre, vous définissez les longueurs horizontale et verticale sur 0px. Dans cet exemple, le rayon de flou est défini sur 15 pixels et l'étendue du flou sur 5 pixels, mais vous pouvez modifier ces paramètres pour déterminer la largeur et la diffusion souhaitées. La couleur rgb (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 de lueur qui convient le mieux à votre projet. Comme pour arrondir les angles, n’oubliez pas d’utiliser les préfixes du navigateur (–webkit– et –moz–) pour une compatibilité optimale.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75); Testez la boîte rougeoyante
Testez le cadre incandescent dans un ou plusieurs navigateurs et effectuez les modifications nécessaires pour obtenir l'effet de rayonnement qui convient le mieux à votre page Web.
