Obtention de plusieurs ombres portées sur un élément à l'aide de CSS

En essayant de recréer la conception d'un bouton Photoshop en CSS, vous pouvez rencontrer une limitation lors de l'application de plusieurs ombres de boîte à un élément unique. Par défaut, CSS n'autorise qu'une seule ombre de boîte active, interne ou externe.

Pour surmonter cette limitation, vous pouvez tirer parti de la fonctionnalité de séparation par virgule fournie par CSS3. Cela vous permet de spécifier plusieurs définitions d'ombre dans la même propriété box-shadow :

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;

En séparant les deux définitions d'ombre avec une virgule, vous pouvez effectivement créer deux ombres distinctes sur votre élément bouton. La première ombre, en médaillon 0 2px 0px #dcffa6, représente l'ombre intérieure de la boîte à lumière, tandis que la deuxième ombre, 0 2px 5px #000, crée l'ombre portée extérieure.

Cette technique vous permet d'obtenir le bouton souhaité. style avec deux ombres appliquées simultanément, offrant un effet plus réaliste et visuellement attrayant.