HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutoriel CSS

CSS ACCUEIL Présentation CSS Syntaxe CSS Sélecteurs CSS CSS Comment faire Commentaires CSS Couleurs CSS
Colors RGB HEX HSL
Arrière-plans CSS
Background Color Background Image Background Repeat Background Attachment Background Shorthand
Bordures CSS
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
Marges CSS
Margins Margin Collapse
Rembourrage CSS CSS Hauteur/Largeur Modèle de boîte CSS Aperçu CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Texte CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Polices CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Icônes CSS Liens CSS Listes CSS CSS Tables
Table Borders Table Size Table Alignment Table Style Table Responsive
Affichage CSS CSS Max-width Poste CSS Index Z CSS Débordement CSS Flottant CSS
Float Clear Float Examples
Bloc en ligne CSS Alignement CSS Combinateurs CSS Pseudo-classe CSS Pseudo-élément CSS Opacité CSS Barre de navigation CSS
Navbar Vertical Navbar Horizontal Navbar
Listes déroulantes CSS Galerie d'images CSS Sprites d'image CSS Sélecteurs d'attributs CSS Formulaires CSS Compteurs CSS Mise en page du site Web CSS Unités CSS Spécificité CSS CSS !important Fonctions mathématiques CSS

CSS avancé

Coins arrondis CSS Images de bordure CSS Arrière-plans CSS Couleurs CSS Mots-clés de couleur CSS Dégradés CSS
Linear Gradients Radial Gradients Conic Gradients
Ombres CSS
Effets d'ombre Boîte ombre
Effets de texte CSS Polices Web CSS Transformations CSS 2D Transformations 3D CSS Transitions CSS Animation CSS Info-bulles CSS CSS Style Images Réflexion d'image CSS Ajustement d'objet CSS Position d'objet CSS Masquage CSS Boutons CSS Pagination CSS CSS plusieurs colonnes Interface utilisateur CSS Variables CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Dimensionnement des boîtes CSS Requêtes média CSS Exemples CSS MQ Boîte flexible CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS réactif

RWD Introduction Fenêtre RWD Affichage de la grille RWD Requêtes multimédia RWD Images RWD Vidéos RWD Cadres RWD Modèles RWD

Grille CSS

Grille d'introduction Conteneur de grille Élément de grille

CSS SASS

Tutoriel SASS

Exemples CSS

Modèles CSS Exemples CSS CSS Quiz Exercices CSS Certificat CSS

Références CSS

Référence CSS Sélecteurs CSS Fonctions CSS Audit de référence CSS Polices sécurisées pour le Web CSS CSS animable Unités CSS Convertisseur CSS PX-EM Couleurs CSS Valeurs de couleur CSS Valeurs CSS par défaut Prise en charge du navigateur CSS

Ombre de boîte CSS

❮ Précédent Suivant ❯

Propriété CSS box-shadow

La propriété CSS box-shadowpermet d'appliquer une ou plusieurs ombres à un élément.

Spécifiez une ombre horizontale et une ombre verticale

Dans son utilisation la plus simple, vous ne spécifiez qu'une ombre horizontale et une ombre verticale. La couleur par défaut de l'ombre est la couleur de texte actuelle.

Un élément <div> avec un box-shadow

Exemple

Spécifiez une ombre horizontale et une ombre verticale :

div {
  box-shadow: 10px 10px;
}

Spécifiez une couleur pour l'ombre

Le colorparamètre définit la couleur de l'ombre.

Un élément <div> avec une box-shadow grise

Exemple

Spécifiez une couleur pour l'ombre :

div {
  box-shadow: 10px 10px grey;
}

Ajouter un effet de flou à l'ombre

Le blurparamètre définit le rayon de flou. Plus le nombre est élevé, plus l'ombre sera floue.

Un élément <div> avec une ombre de boîte grise floue de 5px

Exemple

Ajoutez un effet de flou à l'ombre :

div {
  box-shadow: 10px 10px 5px grey;
}

Définir le rayon de propagation de l'ombre

Le spreadparamètre définit le rayon d'épandage. Une valeur positive augmente la taille de l'ombre, une valeur négative diminue la taille de l'ombre.

Un élément <div> avec une boîte-ombre grise floue, avec un rayon de propagation de 12px

Exemple

Définissez le rayon de propagation de l'ombre :

div {
  box-shadow: 10px 10px 5px 12px grey;
}

Définissez le paramètre d'encart

Le insetparamètre change l'ombre d'une ombre extérieure (début) à une ombre intérieure.

Un élément <div> avec une ombre de boîte floue, grise et incrustée

Exemple

Ajoutez le paramètre d'encart :

div {
  box-shadow: 10px 10px 5px grey inset;
}

Ajouter plusieurs ombres

Un élément peut également avoir plusieurs ombres :

Exemple

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Cartes

Vous pouvez également utiliser la box-shadowpropriété pour créer des cartes de type papier :

1

1er janvier 2021

Norvège

Hardanger, Norvège

Exemple

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Testez-vous avec des exercices

Exercer:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ Previous Next ❯