CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Comment créer des ombres portées et des ombres de texte en CSS

Comment créer des ombres portées et des ombres de texte en CSS

Les ombres
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Guide étape par étape pour maîtriser les ombres en CSS

Objectifs

A la fin de cette vidéo, vous serez capable de :

  • Appliquer des ombres portées à des boîtes et à des textes avec CSS
  • Comprendre et manipuler les valeurs de décalage, de diffusion et de couleur
  • Utiliser les ombres intérieures pour des effets visuels sophistiqués
  • Améliorer la lisibilité du texte à l'aide d'ombres

Résumé

Apprenez à créer des ombres portées et des ombres de texte sur vos éléments HTML en utilisant les propriétés BoxShadow et TextShadow. Explorez les différentes options de décalage, de diffusion et de couleur pour améliorer la mise en forme de vos éléments.

Description

Dans cette leçon, nous allons explorer différentes techniques pour créer des ombres portées et des ombres de texte en CSS. Nous commencerons par ajouter une classe à un élément HTML et utiliserons la propriété BoxShadow pour appliquer une ombre sur une boîte. Vous apprendrez à manipuler les valeurs de décalage sur les axes X et Y, ainsi que la diffusion et la couleur de l'ombre. En nous aidant de l'outil inspecteur d'éléments, nous pourrons ajuster ces valeurs en temps réel pour obtenir le rendu souhaité.

Ensuite, nous verrons comment appliquer une ombre à une image en cumulant plusieurs ombres pour obtenir des effets plus complexes. Vous apprendrez également à créer des ombres intérieures en utilisant la valeur Inset.

Enfin, nous aborderons la création d'ombres pour les textes en utilisant TextShadow. Nous verrons comment appliquer et ajuster les ombres pour améliorer la lisibilité des textes par-dessus des images ou des arrière-plans complexes.

Voir plus

Questions fréquentes

Qu'est-ce que la propriété CSS <em>BoxShadow</em> ?
La propriété BoxShadow permet de créer des ombres portées sur les éléments HTML, en définissant leur décalage, leur diffusion, et leur couleur.
Comment peut-on ajouter une ombre intérieure à un élément avec CSS ?
Pour ajouter une ombre intérieure, on utilise la valeur Inset avec la propriété BoxShadow, suivie des paramètres de décalage, de diffusion, et de couleur.
Quelle différence y a-t-il entre <em>BoxShadow</em> et <em>TextShadow</em> en CSS ?
BoxShadow est utilisé pour appliquer des ombres aux boîtes et aux éléments de type bloc, tandis que TextShadow est spécifique aux textes, permettant de créer des ombres portées sur les caractères.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 11 mois
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 2 ans
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !