Introduction aux Propriétés d'Ombre en CSS
Objectifs
Apprendre à utiliser les propriétés TextShadow et BoxShadow.
Comprendre les effets et les paramètres des ombres en CSS.
Acquérir des compétences pour gérer les compatibilités entre navigateurs.
Résumé
Découvrez comment appliquer des ombres aux textes et boîtes avec les propriétés TextShadow et BoxShadow en CSS.
Description
Dans cette leçon, nous explorons les propriétés TextShadow et BoxShadow en CSS, qui permettent de créer des ombres sous les textes et les boîtes. Ces propriétés utilisent des valeurs définissant le décalage horizontal et vertical, la zone de flou, et la couleur de l’ombre.
Nous commençons par ajouter une ombre à notre élément 'conseil' avec BoxShadow, en spécifiant différentes valeurs de décalage et de flou pour ajuster l'apparence de l'ombre. Ensuite, nous répétons le processus pour les différents préfixes de navigateurs tels que -moz-, -webkit-, et -o-.
De plus, nous appliquons des ombres aux titres H1 en utilisant la propriété TextShadow. Cette section démontre comment définir des ombres multiples pour créer des effets visuels intéressants, incluant des ombres colorées en relief. Enfin, des solutions de contournement pour Internet Explorer sont présentées à l'aide de filtres Microsoft spécifiques.