Introduction à la formation HTLM5 et CSS3
Les bases de la mise en page
La mise en page avancée
Autres sélecteurs et propriétés
Détails de la leçon
Description de la leçon
Dans cette leçon, nous allons explorer la propriété CSS box-shadow qui permet d'ajouter des ombres à des éléments. Tout d'abord, nous examinerons les différents paramètres de cette propriété, notamment le décalage horizontal, le décalage vertical, la distance de flou, et la couleur. Vous apprendrez comment ces valeurs interagissent pour créer une ombre réaliste et esthétique.
Ensuite, nous verrons comment placer une ombre à l'intérieur d'un élément en utilisant le mot-clé inset. Cette technique permet d'ajouter de la profondeur et des effets de relief à vos éléments. Nous aborderons également la possibilité de cumuler plusieurs ombres sur un même élément, en les séparant par des virgules, pour créer des effets plus complexes.
Nous conclurons en soulignant les avantages d'utiliser CSS box-shadow par rapport à des images, ce qui permet de maintenir des pages web légères et performantes tout en enrichissant visuellement vos designs.
Objectifs de cette leçon
Les objectifs de cette vidéo sont d'apprendre à utiliser la propriété CSS box-shadow pour ajouter des ombres aux éléments, comprendre les différentes valeurs et leur influence, et savoir créer des effets de profondeur et de relief en CSS.
Prérequis pour cette leçon
Pour suivre cette vidéo, vous devez avoir des connaissances de base en HTML et CSS.
Métiers concernés
La maîtrise de CSS box-shadow est utile pour les métiers de développeur front-end, web designer et intégrateur web, permettant de créer des effets visuels avancés sans recourir à des images lourdes.
Alternatives et ressources
Comme alternatives, vous pouvez utiliser des logiciels de design tels que Adobe Photoshop ou Illustrator pour ajouter des ombres, mais cela nécessitera de transformer vos éléments en images, augmentant ainsi la charge de votre page.
Questions & Réponses
Je m'abonne