Générateur de box-shadow

Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété box-shadow qui pourra être ajouté à votre feuille de style.

Le générateur d'ombres de boîte vous permet d'ajouter une ou plusieurs ombres à un élément.

À l'ouverture de l'outil, vous trouverez un rectangle dans la section supérieure droite de l'outil. C'est l'élément auquel vous allez appliquer des ombres. Lorsque cet élément est sélectionné (comme c'est le cas lorsque vous chargez la page pour la première fois), vous pouvez appliquer quelques styles de base :

• Définissez la couleur du texte (color) de l'élément à l'aide de l'outil de sélection de couleur.
• Donnez à l'élément une bordure (border) en utilisant la case à cocher « border ».
• Utilisez les curseurs pour définir les propriétés top, left, width et height de l'élément.

Pour ajouter une ombre de boîte, cliquez sur le bouton « + » en haut à gauche. Cela ajoute une ombre et l'affiche dans la colonne de gauche. Vous pouvez maintenant définir les valeurs de la nouvelle ombre :

• Définissez la couleur de l'ombre (color) à l'aide de l'outil de sélection de couleur.
• Définissez l'ombre comme étant interne en utilisant la case à cocher « inset ».
• Utilisez les curseurs pour définir la position, le flou et l'étendue de l'ombre.

Pour ajouter une autre ombre, cliquez à nouveau sur « + ». Maintenant, toutes les valeurs que vous définissez s'appliqueront à cette nouvelle ombre. Changez l'ordre dans lequel ces deux ombres sont appliquées en utilisant les boutons ↑ et ↓ en haut à gauche. Sélectionnez à nouveau la première ombre en cliquant dessus dans la colonne de gauche. Pour mettre à jour les styles de l'élément lui-même, sélectionnez-le en cliquant sur le bouton intitulé « element » en haut.

Vous pouvez ajouter des pseudo-éléments ::before et ::after à l'élément, et leur donner également des ombres de boîte. Pour basculer entre l'élément et ses pseudo-éléments, utilisez les boutons en haut intitulés « element », « ::before » et « ::after ».

La boîte en bas à droite contient le CSS pour l'élément et tous les pseudo-éléments ::before ou ::after.