Ombres Tailwind CSS

Dans le design web moderne, les effets d'ombre sont un outil important pour créer une hiérarchie visuelle et une sensation de profondeur.

Tailwind CSS fournit un ensemble puissant et flexible de classes utilitaires d'ombre qui facilitent la mise en œuvre de divers effets d'ombre.

Cet article présentera de manière exhaustive le système d'ombres dans Tailwind CSS, y compris box-shadow (ombre de boîte), text-shadow (ombre de texte), le contrôle de la couleur et de l'opacité des ombres, ainsi que l'application des effets d'ombre inset.

Que sont les ombres CSS ?

Avant de plonger dans l'implémentation spécifique de Tailwind, commençons par comprendre les concepts de base des ombres CSS.

Les ombres CSS se divisent principalement en deux types :

  1. Ombre de boîte (box-shadow): Appliquée à l'ensemble du modèle de boîte d'un élément
  2. Ombre de texte (text-shadow): Appliquée uniquement au contenu textuel d'un élément

Les effets d'ombre peuvent :

  • Améliorer la hiérarchie visuelle des éléments
  • Créer un effet de "flottement"
  • Simuler l'éclairage et la profondeur
  • Mettre en évidence le contenu important

box-shadow dans Tailwind

Tailwind fournit une série de classes utilitaires d'ombre (box-shadow) prédéfinies, réparties en 6 niveaux, du plus subtil au plus prononcé :

Exemple

<div class="shadow-sm">Petite ombre</div>
<div class="shadow">Ombre par défaut</div>
<div class="shadow-md">Ombre moyenne</div>
<div class="shadow-lg">Grande ombre</div>
<div class="shadow-xl">Ombre très grande</div>
<div class="shadow-2xl">Ombre très très grande</div>

Essayez-le »

Tableau comparatif des niveaux d'ombre

Nom de classe Description Cas d'utilisation
shadow-sm Ombre très subtile Survol de bouton, léger soulèvement
shadow Ombre par défaut (taille moyenne) Cartes, éléments standards
shadow-md Ombre moyenne Fenêtres modales, notifications importantes
shadow-lg Grande ombre Panneaux flottants, éléments proéminents
shadow-xl Ombre très grande Éléments spécialement mis en évidence
shadow-2xl Ombre très très grande Éléments qui doivent ressortir très nettement

Exemples de code et exercices pratiques

Exemple

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md">
  <div class="text-xl font-medium text-black">Exemple d'ombre Tailwind</div>
  <p class="text-gray-500">Ceci est un exemple de carte utilisant shadow-md</p>
</div>

Essayez-le »

Description de l'effet：

  • Création d'une carte avec un fond blanc
  • Utiliséshadow-mdclass pour ajouter une ombre moyenne
  • Combiné avec des coins arrondis (rounded-xlpour rendre l'effet d'ombre plus naturel

text-shadow dans Tailwind

Tailwind n'inclut pas de classes utilitaires text-shadow par défaut, mais elles peuvent être ajoutées de la façon suivante :

Méthode 1 : Utiliser un plugin

Installertailwindcss-textshadowplugin :

Exemple

npm install tailwindcss-textshadow

Puis danstailwind.config.jsconfigurez :

Exemple

module.exports = {
  plugins: [
    require('tailwindcss-textshadow')
  ],
  theme: {
    textShadow: {
      'sm': '1px 1px 2px rgba(0, 0, 0, 0.5)',
      'DEFAULT': '2px 2px 4px rgba(0, 0, 0, 0.5)',
      'lg': '4px 4px 8px rgba(0, 0, 0, 0.5)',
    }
  }
}

Exemple d'utilisation :

Exemple

<h1 class="text-shadow-lg">Titre avec ombre</h1>

Méthode 2 : Classes utilitaires personnalisées

Ajouter dans CSS :

Exemple

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  .text-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }
}

Contrôle de la couleur et de l'opacité des ombres

Tailwind vous permet de contrôler la couleur et l'opacité des ombres grâce à des combinaisons de classes utilitaires.

1. Utilisation des classes utilitaires de couleur d'ombre

Exemple

<div class="shadow-lg shadow-blue-500/50">Ombre bleue semi-transparente</div>

Décomposition de la syntaxe :

  • shadow-{color}: Définir la couleur de l'ombre (par exemple, blue-500)
  • /{opacity}: Définir l'opacité de l'ombre (par exemple, 50 signifie 50%)

2. Couleurs et opacités disponibles

Tailwind prend en charge toutes les couleurs intégrées et les valeurs d'opacité arbitraires :

Exemple

<div class="shadow-lg shadow-red-400/30">Ombre bleue semi-transparente</div>
<div class="shadow-lg shadow-emerald-300/80">Ombre vert émeraude intense</div>
<div class="shadow-lg shadow-purple-600/20">Ombre violette pâle</div>

3. Couleurs d'ombre personnalisées

Danstailwind.config.jsÉtendre dans :

Exemple

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom': '0 4px 6px -1px rgba(156, 39, 176, 0.3)',
      }
    }
  }
}

Effet d'ombre intérieure (inset)

Les ombres intérieures peuvent créer un effet creux ou enfoncé et sont couramment utilisées dans les éléments interactifs tels que les boutons et les champs de saisie.

1. Utilisation des classes d'ombre intérieure prédéfinies

Exemple

<div class="shadow-inner">Effet d'ombre intérieure</div>

2. Ombres intérieures personnalisées

Ajouter dans le fichier de configuration :

Exemple

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'inner-lg': 'inset 0 4px 6px 0 rgba(0, 0, 0, 0.1)',
      }
    }
  }
}

3. Exemples d’application pratiques

Exemple

<button class="px-4 py-2 bg-gray-100 rounded-lg shadow-inner hover:shadow-inner-lg">
Cliquer sur le bouton
</button>

Description de l'effet：

  • L’état par défaut a une légère ombre intérieure
  • L’ombre intérieure s’intensifie au survol (hover:shadow-inner-lg)
  • créant l’effet visuel d’un bouton enfoncé

Techniques avancées et bonnes pratiques

1. Combiner les ombres externes et internes

Exemple

<div class="shadow-lg shadow-inner">Combinaison d’ombre externe + ombre interne</div>

2. Ombres responsives

Exemple

<div class="shadow-sm md:shadow-lg">Petite ombre sur les petits écrans, grande ombre sur les grands écrans</div>

3. États de survol et de focus

Exemple

<button class="shadow hover:shadow-lg focus:shadow-outline">
Bouton interactif
</button>

4. Animations d'ombres

Exemple

<button class="shadow-md hover:shadow-xl transition-shadow duration-300">
Bouton avec effet de transition
</button>

Défis pratiques

  1. Créez un composant de carte avec une ombre moyenne par défaut ; au survol, l'ombre devient plus grande et change de couleur
  2. Concevez un champ de saisie avec une ombre intérieure ; l'ombre intérieure disparaît lorsqu'il reçoit le focus
  3. Implémentez un titre qui utilise text-shadow pour créer un effet de lumière néon
  4. Combinez des ombres extérieures et intérieures pour créer un bouton avec un effet tridimensionnel

Résumé des points clés

Référence rapide des classes utilitaires principales

Fonction Nom de classe / Exemple Description
Ombre de boîte shadow, shadow-lg Ombres extérieures de différentes tailles
Ombre intérieure shadow-inner Ombre à l'intérieur d'un élément
Couleur de l'ombre shadow-blue-500 Définir la couleur de l'ombre
Opacité de l'ombre shadow-blue-500/50 Définir l'opacité de l'ombre
Ombre du texte text-shadow (nécessite une personnalisation) Ajouter une ombre au texte

Recommandations de bonnes pratiques

  1. Utiliser avec modération: Les ombres doivent améliorer le design, sans distraire l'attention
  2. Restez cohérent: Maintenez des niveaux d'ombre similaires tout au long du projet
  3. Tenez compte des performances: Trop d'ombres complexes peuvent affecter les performances de rendu
  4. Combinez avec d'autres propriétés: Les ombres fonctionnent mieux lorsqu'elles sont combinées à des coins arrondis et des effets de transition
Autres extensions