Web-Dev-For-Beginners/translations/fr/3-terrarium/2-intro-to-css/README.md

Projet Terrarium Partie 2 : Introduction au CSS

journey
    title Votre parcours de stylisation CSS
    section Fondations
      Lier le fichier CSS: 3: Student
      Comprendre la cascade: 4: Student
      Apprendre l'héritage: 4: Student
    section Sélecteurs
      Ciblage d'éléments: 4: Student
      Modèles de classes: 5: Student
      Spécificité des ID: 5: Student
    section Mise en page
      Positionner les éléments: 4: Student
      Créer des conteneurs: 5: Student
      Construire un terrarium: 5: Student
    section Fignoler
      Ajouter des effets visuels: 5: Student
      Design réactif: 5: Student
      Reflets de verre: 5: Student

Sketchnote par Tomomi Imura

Vous vous souvenez comment votre terrarium HTML avait l’air assez basique ? Le CSS est ce qui transforme cette structure simple en quelque chose de visuellement attrayant.

Si le HTML est comme construire la charpente d’une maison, alors le CSS est tout ce qui fait qu’on s’y sent chez soi - les couleurs de peinture, l’agencement des meubles, l’éclairage et la façon dont les pièces s’enchaînent. Pensez à la façon dont le Palais de Versailles a commencé comme un simple pavillon de chasse, mais une attention minutieuse à la décoration et à l’agencement l’a transformé en l’un des bâtiments les plus magnifiques du monde.

Aujourd’hui, nous allons transformer votre terrarium de fonctionnel à raffiné. Vous apprendrez à positionner les éléments précisément, à faire en sorte que les mises en page s’adaptent aux différentes tailles d’écran, et à créer l’attrait visuel qui rend les sites web engageants.

À la fin de cette leçon, vous verrez comment une stylisation CSS stratégique peut améliorer considérablement votre projet. Ajoutons un peu de style à votre terrarium.

mindmap
  root((Fondamentaux CSS))
    Cascade
      Règles de spécificité
      Héritage
      Ordre de priorité
      Résolution des conflits
    Selectors
      Balises d'éléments
      Classes (.class)
      IDs (#id)
      Combinateurs
    Box Model
      Marge
      Bordure
      Rembourrage
      Contenu
    Layout
      Positionnement
      Types d'affichage
      Flexbox
      Grille
    Visual Effects
      Couleurs
      Ombres
      Transitions
      Animations
    Responsive Design
      Requêtes médias
      Unités flexibles
      Méta viewport
      Mobile First

Quiz Pré-Cours

Quiz pré-cours

Démarrer avec le CSS

Le CSS est souvent perçu comme juste « rendre les choses jolies », mais il sert à bien plus que cela. Le CSS est comme être le réalisateur d’un film - vous contrôlez non seulement l’apparence de tout, mais aussi comment ça bouge, répond aux interactions, et s’adapte aux différentes situations.

Le CSS moderne est remarquablement puissant. Vous pouvez écrire du code qui ajuste automatiquement les mises en page pour les téléphones, tablettes et ordinateurs de bureau. Vous pouvez créer des animations fluides qui dirigent l’attention des utilisateurs là où c’est nécessaire. Les résultats peuvent être très impressionnants quand tout fonctionne ensemble.

💡 Astuce Pro : Le CSS évolue constamment avec de nouvelles fonctionnalités et capacités. Vérifiez toujours CanIUse.com pour confirmer la prise en charge par les navigateurs des nouvelles fonctionnalités CSS avant de les utiliser dans des projets en production.

Voici ce que nous allons accomplir dans cette leçon :

• Créer un design visuel complet pour votre terrarium en utilisant les techniques CSS modernes
• Explorer les concepts fondamentaux comme la cascade, l’héritage et les sélecteurs CSS
• Mettre en œuvre des stratégies de positionnement et de mise en page responsives
• Construire le conteneur du terrarium avec des formes et du style CSS

Prérequis

Vous devez avoir complété la structure HTML de votre terrarium de la leçon précédente et l’avoir prête à être stylisée.

📺 Ressource Vidéo : Découvrez ce tutoriel vidéo utile

Configurer votre fichier CSS

Avant de pouvoir commencer à styliser, nous devons relier le CSS à notre HTML. Cette connexion indique au navigateur où trouver les instructions de style pour notre terrarium.

Dans votre dossier terrarium, créez un nouveau fichier nommé style.css, puis liez-le dans la section <head> de votre document HTML :

<link rel="stylesheet" href="./style.css" />

Ce que fait ce code :

• Crée une connexion entre vos fichiers HTML et CSS
• Indique au navigateur de charger et appliquer les styles depuis style.css
• Utilise l’attribut rel="stylesheet" pour spécifier qu’il s’agit d’un fichier CSS
• Référence le chemin du fichier avec href="./style.css"

Comprendre la cascade CSS

Vous vous êtes déjà demandé pourquoi on appelle ça des « feuilles de style en cascade » ? Les styles coulent comme une cascade, et parfois ils entrent en conflit.

Considérez comment fonctionnent les structures de commandement militaire - un ordre général pourrait dire « toutes les troupes portent du vert », mais un ordre spécifique à votre unité peut dire « portez la tenue de cérémonie bleue ». L’instruction la plus spécifique prend le pas. Le CSS suit une logique similaire, et comprendre cette hiérarchie rend le débogage beaucoup plus simple.

Expérimenter avec la priorité de cascade

Voyons la cascade en action en créant un conflit de style. D’abord, ajoutez un style en ligne à votre balise <h1> :

<h1 style="color: red">My Terrarium</h1>

Ce que fait ce code :

• Applique une couleur rouge directement à l’élément <h1> via un style en ligne
• Utilise l’attribut style pour insérer du CSS directement dans le HTML
• Crée la règle de style la plus prioritaire pour cet élément spécifique

Ensuite, ajoutez cette règle dans votre fichier style.css :

h1 {
  color: blue;
}

Dans ce qui précède, nous avons :

• Défini une règle CSS ciblant tous les éléments <h1>
• Mis la couleur du texte en bleu à l’aide d’une feuille de style externe
• Créé une règle de priorité inférieure comparée au style en ligne

✅ Vérification de connaissances : Quelle couleur s’affiche dans votre application web ? Pourquoi cette couleur gagne-t-elle ? Pouvez-vous penser à des scénarios où vous voudriez outrepasser des styles ?

flowchart TD
    A["Le navigateur rencontre l'élément h1"] --> B{"Vérifier les styles en ligne"}
    B -->|Trouvé| C["style='color: red'"] 
    B -->|Aucun| D{"Vérifier les règles d'ID"}
    C --> E["Appliquer la couleur rouge (1000 points)"]
    D -->|Trouvé| F["#heading { color: green }"]
    D -->|Aucun| G{"Vérifier les règles de classe"}
    F --> H["Appliquer la couleur verte (100 points)"]
    G -->|Trouvé| I[".title { color: blue }"]
    G -->|Aucun| J{"Vérifier les règles d'élément"}
    I --> K["Appliquer la couleur bleue (10 points)"]
    J -->|Trouvé| L["h1 { color: purple }"]
    J -->|Aucun| M["Utiliser la valeur par défaut du navigateur"]
    L --> N["Appliquer la couleur violette (1 point)"]
    
    style C fill:#ff6b6b
    style F fill:#51cf66
    style I fill:#339af0
    style L fill:#9775fa

💡 Ordre de priorité CSS (du plus élevé au plus bas) :

1. Styles en ligne (attribut style)
2. IDs (#monId)
3. Classes (.maClasse) et attributs
4. Sélecteurs d’éléments (h1, div, p)
5. Valeurs par défaut du navigateur

Héritage CSS en action

L’héritage CSS fonctionne comme la génétique - les éléments héritent certaines propriétés de leurs parents. Si vous définissez la police sur l’élément body, tout le texte à l’intérieur utilise automatiquement cette même police. C’est semblable à la façon dont la mâchoire distinctive de la famille Habsbourg apparaissait à travers les générations sans être spécifiée individuellement.

Cependant, tout n’est pas hérité. Les styles de texte comme les polices et les couleurs s’héritent, mais les propriétés de mise en page comme les marges et bordures ne le sont pas. Comme les enfants peuvent hériter des traits physiques mais pas des choix vestimentaires de leurs parents.

Observer l’héritage de la police

Voyons l’héritage en action en définissant une police sur l’élément <body> :

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Décryptage de ce qui se passe ici :

• Définit la famille de polices pour toute la page en ciblant l’élément <body>
• Utilise une pile de polices avec des options de secours pour une meilleure compatibilité navigateur
• Applique des polices système modernes qui rendent bien sur différents systèmes d’exploitation
• Assure que tous les éléments enfants héritent cette police sauf si spécifiquement substituée

Ouvrez les outils de développement de votre navigateur (F12), allez dans l’onglet Éléments, et inspectez votre élément <h1>. Vous verrez qu’il hérite de la famille de polices du body :

✅ Temps d’expérimentation : Essayez de définir d’autres propriétés héritables sur le <body> comme color, line-height ou text-align. Que se passe-t-il pour votre titre et les autres éléments ?

📝 Propriétés héritables comprennent : color, font-family, font-size, line-height, text-align, visibility

Propriétés non héritables comprennent : margin, padding, border, width, height, position

🔄 Bilan pédagogique

Compréhension des fondations CSS : Avant de passer aux sélecteurs, assurez-vous de pouvoir :

• ✅ Expliquer la différence entre cascade et héritage
• ✅ Prédire quel style l’emportera en cas de conflit de spécificité
• ✅ Identifier quelles propriétés sont héritées des éléments parents
• ✅ Relier correctement les fichiers CSS au HTML

Test rapide : Si vous avez ces styles, de quelle couleur sera un <h1> dans un <div class="special"> ?

div { color: blue; }
.special { color: green; }
h1 { color: red; }

Réponse : Rouge (le sélecteur d’élément cible directement h1)

Maîtriser les sélecteurs CSS

Les sélecteurs CSS sont votre moyen de cibler des éléments spécifiques pour les styler. Ils fonctionnent comme donner des directions précises - au lieu de dire « la maison », vous pourriez dire « la maison bleue avec la porte rouge dans la rue Maple ».

Le CSS offre différentes façons d’être spécifique, et choisir le bon sélecteur, c’est comme choisir le bon outil pour la tâche. Parfois vous devez styliser toutes les portes du quartier, parfois une porte en particulier.

Sélecteurs d’éléments (balises)

Les sélecteurs d’éléments ciblent des éléments HTML par leur nom de balise. Ils sont parfaits pour définir des styles de base qui s’appliquent largement sur votre page :

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #3a241d;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

Comprendre ces styles :

• Définit une typographie cohérente sur toute la page avec le sélecteur body
• Supprime les marges et le padding par défaut du navigateur pour un meilleur contrôle
• Style tous les éléments de titre avec couleur, alignement et espacement
• Utilise les unités rem pour une taille de police évolutive et accessible

Tandis que les sélecteurs d’éléments fonctionnent bien pour les styles généraux, vous aurez besoin de sélecteurs plus spécifiques pour les composants individuels comme les plantes dans votre terrarium.

Sélecteurs ID pour les éléments uniques

Les sélecteurs ID utilisent le symbole # et ciblent les éléments avec un attribut id spécifique. Puisque les IDs doivent être uniques sur une page, ils sont parfaits pour styler des éléments individuels et particuliers comme nos conteneurs latéraux de plantes.

Créons le style pour les conteneurs latéraux de notre terrarium où les plantes seront placées :

#left-container {
  background-color: #f5f5f5;
  width: 15%;
  left: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#right-container {
  background-color: #f5f5f5;
  width: 15%;
  right: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

Ce que fait ce code :

• Positionne les conteneurs aux extrémités gauche et droite en utilisant une position absolute
• Utilise les unités vh (hauteur de la fenêtre) pour une hauteur responsive qui s’adapte à la taille de l’écran
• Applique box-sizing: border-box pour inclure le padding dans la largeur totale
• Supprime les unités px inutiles quand la valeur est zéro pour un code plus propre
• Définit une couleur de fond subtile plus douce que le gris vif

✅ Défi Qualité de Code : Remarquez comment ce CSS viole le principe DRY (Don't Repeat Yourself). Pouvez-vous le refactorer en utilisant à la fois un ID et une classe ?

Approche améliorée :

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.container {
  background-color: #f5f5f5;
  width: 15%;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#left-container {
  left: 0;
}

#right-container {
  right: 0;
}

Sélecteurs de classes pour styles réutilisables

Les sélecteurs de classes utilisent le symbole . et sont parfaits lorsque vous voulez appliquer les mêmes styles à plusieurs éléments. Contrairement aux IDs, les classes peuvent être réutilisées partout dans votre HTML, ce qui les rend idéales pour des styles cohérents et répétitifs.

Dans notre terrarium, chaque plante nécessite un style similaire mais doit aussi être positionnée individuellement. Nous allons utiliser une combinaison de classes pour les styles partagés et d’IDs pour le positionnement unique.

Voici la structure HTML pour chaque plante :

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/fr/plant1.d18b18ffe73da18f.png" />
</div>

Explication des éléments clés :

• Utilise class="plant-holder" pour un style de conteneur uniforme sur toutes les plantes
• Applique class="plant" pour un style d’image partagé et comportement commun
• Inclus un id="plant1" unique pour positionnement individuel et interaction JavaScript
• Fournit un texte alternatif descriptif pour l’accessibilité aux lecteurs d’écran

Ajoutez maintenant ces styles à votre fichier style.css :

.plant-holder {
  position: relative;
  height: 13%;
  left: -0.6rem;
}

.plant {
  position: absolute;
  max-width: 150%;
  max-height: 150%;
  z-index: 2;
  transition: transform 0.3s ease;
}

.plant:hover {
  transform: scale(1.05);
}

Décryptage de ces styles :

• Crée un positionnement relatif pour le conteneur de plante afin d’établir un contexte de positionnement
• Fixe chaque conteneur de plante à 13% de hauteur pour que toutes les plantes tiennent verticalement sans défilement
• Décale légèrement les conteneurs vers la gauche pour mieux centrer les plantes dans leurs conteneurs
• Permet aux plantes de s’adapter de façon responsive avec max-width et max-height
• Utilise z-index pour superposer les plantes au-dessus d’autres éléments du terrarium
• Ajoute un effet subtil au survol avec des transitions CSS pour une meilleure interaction utilisateur

✅ Réflexion critique : Pourquoi avons-nous besoin à la fois des sélecteurs .plant-holder et .plant ? Que se passerait-il si on utilisait un seul seul ?

💡 Patron de conception : Le conteneur (.plant-holder) contrôle la mise en page et le positionnement, tandis que le contenu (.plant) contrôle l’apparence et la mise à l’échelle. Cette séparation rend le code plus maintenable et flexible.

Comprendre le positionnement CSS

Le positionnement CSS est comme être le metteur en scène d’une pièce de théâtre - vous dirigez où chaque acteur se place et comment il se déplace sur scène. Certains acteurs suivent la formation standard, tandis que d’autres ont besoin d’un positionnement spécifique pour un effet dramatique.

Une fois que vous comprenez le positionnement, beaucoup de défis de mise en page deviennent gérables. Besoin d’une barre de navigation qui reste en haut pendant que l’utilisateur défile ? Le positionnement gère cela. Vous voulez une infobulle qui apparaît à un endroit précis ? C’est aussi du positionnement.

Les cinq valeurs de position

quadrantChart
    title Stratégie de Positionnement CSS
    x-axis Flux du Document --> Retiré du Flux
    y-axis Position Statique --> Contrôle Précis
    quadrant-1 Absolu
    quadrant-2 Fixe
    quadrant-3 Statique
    quadrant-4 Collant
    
    Static: [0.2, 0.2]
    Relative: [0.3, 0.6]
    Absolute: [0.8, 0.8]
    Fixed: [0.9, 0.7]
    Sticky: [0.5, 0.9]

Valeur de position	Comportement	Cas d’usage
static	Flux par défaut, ignore top/left/right/bottom	Mise en page normale du document
relative	Positionné par rapport à sa position normale	Ajustements mineurs, création de contexte de positionnement
absolute	Positionné par rapport à l’ancêtre positionné le plus proche	Placement précis, superpositions
fixed	Positionné par rapport à la fenêtre d’affichage	Barres de navigation, éléments flottants
sticky	Passe de relatif à fixe selon le défilement	En-têtes qui restent visibles lors du défilement

Positionnement dans notre terrarium

Notre terrarium utilise une combinaison stratégique de types de positionnement pour créer la mise en page désirée :

/* Container positioning */
.container {
  position: absolute; /* Removes from normal flow */
  /* ... other styles ... */
}

/* Plant holder positioning */
.plant-holder {
  position: relative; /* Creates positioning context */
  /* ... other styles ... */
}

/* Plant positioning */
.plant {
  position: absolute; /* Allows precise placement within holder */
  /* ... other styles ... */
}

Comprendre la stratégie de positionnement :

• Les conteneurs absolus sont retirés du flux normal du document et attachés aux bords de l’écran
• Les conteneurs de plantes relatifs créent un contexte de positionnement tout en restant dans le flux du document
• Les plantes en position absolue peuvent être positionnées précisément à l’intérieur de leurs conteneurs relatifs
• Cette combinaison permet aux plantes d’être empilées verticalement tout en pouvant être positionnées individuellement

🎯 Pourquoi c’est important : Les éléments plant ont besoin d’un positionnement absolu pour devenir déplaçables dans la leçon suivante. Le positionnement absolu les retire du flux normal, rendant possible les interactions de glisser-déposer.

✅ Temps d’expérimentation : Essayez de changer les valeurs de positionnement et observez les résultats :

• Que se passe-t-il si vous changez .container de absolute à relative ?
• Comment la mise en page change-t-elle si .plant-holder utilise absolute au lieu de relative ?
• Que se passe-t-il lorsque vous passez .plant en positionnement relative ?

🔄 Point pédagogique

Maîtrise du positionnement CSS : Faites une pause pour vérifier votre compréhension :

• ✅ Pouvez-vous expliquer pourquoi les plantes ont besoin d'un positionnement absolu pour le drag-and-drop ?
• ✅ Comprenez-vous comment les conteneurs relatifs créent un contexte de positionnement ?
• ✅ Pourquoi les conteneurs latéraux utilisent-ils un positionnement absolu ?
• ✅ Que se passerait-il si vous supprimiez entièrement les déclarations de position ?

Lien avec le monde réel : Pensez à la façon dont le positionnement CSS reflète la disposition dans la vie réelle :

• Static : Livres sur une étagère (ordre naturel)
• Relative : Déplacer un livre légèrement tout en gardant sa place
• Absolute : Placer un marque-page à une page précise
• Fixed : Un post-it qui reste visible lorsque vous tournez les pages

Construire le terrarium avec CSS

Nous allons maintenant construire un bocal en verre en utilisant uniquement du CSS - pas besoin d'images ou de logiciels graphiques.

Créer l’illusion d’un verre réaliste, des ombres et des effets de profondeur à l’aide du positionnement et de la transparence démontre les capacités visuelles du CSS. Cette technique reflète la manière dont les architectes du mouvement Bauhaus utilisaient des formes géométriques simples pour créer des structures complexes et esthétiques. Une fois ces principes compris, vous reconnaîtrez les techniques CSS derrière beaucoup de designs web.

flowchart LR
    A[Haut du bocal] --> E[Terrarium complet]
    B[Parois du bocal] --> E
    C[Couche de terre] --> E
    D[Fond du bocal] --> E
    F[Effets de verre] --> E
    
    A1["50% largeur<br/>5% hauteur<br/>Position haute"] --> A
    B1["60% largeur<br/>80% hauteur<br/>Coins arrondis<br/>0.5 opacité"] --> B
    C1["60% largeur<br/>5% hauteur<br/>Marron foncé<br/>Couche inférieure"] --> C
    D1["50% largeur<br/>1% hauteur<br/>Position basse"] --> D
    F1["Ombres subtiles<br/>Transparence<br/>Superposition Z-index"] --> F
    
    style E fill:#d1e1df,stroke:#3a241d
    style A fill:#e8f5e8
    style B fill:#e8f5e8
    style C fill:#8B4513
    style D fill:#e8f5e8

Création des composants du bocal en verre

Construisons le bocal du terrarium pièce par pièce. Chaque partie utilise un positionnement absolu et des tailles en pourcentages pour un design responsive :

.jar-walls {
  height: 80%;
  width: 60%;
  background: #d1e1df;
  border-radius: 1rem;
  position: absolute;
  bottom: 0.5%;
  left: 20%;
  opacity: 0.5;
  z-index: 1;
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}

.jar-top {
  width: 50%;
  height: 5%;
  background: #d1e1df;
  position: absolute;
  bottom: 80.5%;
  left: 25%;
  opacity: 0.7;
  z-index: 1;
  border-radius: 0.5rem 0.5rem 0 0;
}

.jar-bottom {
  width: 50%;
  height: 1%;
  background: #d1e1df;
  position: absolute;
  bottom: 0;
  left: 25%;
  opacity: 0.7;
  border-radius: 0 0 0.5rem 0.5rem;
}

.dirt {
  width: 60%;
  height: 5%;
  background: #3a241d;
  position: absolute;
  border-radius: 0 0 1rem 1rem;
  bottom: 1%;
  left: 20%;
  opacity: 0.7;
  z-index: -1;
}

Compréhension de la construction du terrarium :

• Utilise des dimensions en pourcentage pour un redimensionnement adaptatif sur toutes tailles d'écran
• Positionne les éléments en absolu pour les empiler et les aligner précisément
• Applique différentes valeurs d’opacité pour créer l’effet de transparence du verre
• Implémente un z-index pour que les plantes apparaissent à l’intérieur du bocal
• Ajoute des ombres portées subtiles et un rayon de bordure affiné pour un aspect plus réaliste

Design responsif avec des pourcentages

Remarquez que toutes les dimensions utilisent des pourcentages plutôt que des valeurs fixes en pixels :

Pourquoi c’est important :

• Assure que le terrarium s’adapte proportionnellement à toute taille d’écran
• Maintient les relations visuelles entre les composants du bocal
• Offre une expérience cohérente des mobiles aux grands écrans de bureau
• Permet au design de s’adapter sans casser la mise en page

Unités CSS en action

Nous utilisons les unités rem pour le border-radius, qui s’échelonnent en fonction de la taille de police racine. Cela crée des designs plus accessibles qui respectent les préférences de police de l’utilisateur. En savoir plus sur les unités relatives CSS dans la spécification officielle.

✅ Expérimentation visuelle : Essayez de modifier ces valeurs et observez les effets :

• Changez l’opacité du bocal de 0.5 à 0.8 – comment cela affecte-t-il l’apparence du verre ?
• Ajustez la couleur de la terre de #3a241d à #8B4513 – quel impact visuel cela a-t-il ?
• Modifiez le z-index de la terre à 2 – que se passe-t-il dans la superposition ?

🔄 Point pédagogique

Compréhension du design visuel CSS : Confirmez votre maîtrise du CSS visuel :

• ✅ Comment les dimensions en pourcentage créent-elles du design adaptatif ?
• ✅ Pourquoi l’opacité crée-t-elle l’effet de transparence du verre ?
• ✅ Quel rôle joue le z-index dans la superposition des éléments ?
• ✅ Comment les valeurs de border-radius créent-elles la forme du bocal ?

Principe de design : Remarquez comment nous construisons des visuels complexes à partir de formes simples :

1. Rectangles → Rectangles arrondis → Composants du bocal
2. Couleurs plates → Opacité → Effet verre
3. Éléments individuels → Composition en couches → Apparence 3D

---

Défi GitHub Copilot Agent 🚀

Utilisez le mode Agent pour relever le défi suivant :

Description : Créez une animation CSS qui fait doucement osciller les plantes du terrarium, simulant un effet de brise naturelle. Cela vous aidera à pratiquer les animations, transformations et keyframes CSS tout en améliorant l’esthétique de votre terrarium.

Consigne : Ajoutez des animations keyframe CSS pour faire balancer doucement les plantes du terrarium de gauche à droite. Créez une animation oscillante qui fait pivoter chaque plante légèrement (2 à 3 degrés) à gauche et à droite avec une durée de 3 à 4 secondes, et appliquez-la à la classe .plant. Assurez-vous que l’animation boucle infiniment avec une fonction d’accélération pour un mouvement naturel.

Pour en savoir plus sur le mode agent, cliquez ici.

🚀 Défi : Ajouter des reflets de verre

Prêt à améliorer votre terrarium avec des reflets de verre réalistes ? Cette technique ajoutera profondeur et réalisme au design.

Vous allez créer des reflets subtils qui simulent la façon dont la lumière se reflète sur les surfaces de verre. Cette approche est similaire à celle utilisée par les peintres de la Renaissance comme Jan van Eyck qui utilisaient lumière et réflexion pour donner un aspect tridimensionnel au verre peint. Voici ce que vous devrez viser :

Votre défi :

• Créer des formes ovales blanches ou claires subtiles pour les reflets du verre
• Les positionner stratégiquement sur le côté gauche du bocal
• Appliquer l’opacité et l’effet de flou appropriés pour un reflet lumineux réaliste
• Utiliser le border-radius pour créer des formes organiques rappelant des bulles
• Expérimenter avec des dégradés ou des ombres portées pour plus de réalisme

Quiz post-conférence

Quiz post-conférence

Approfondissez vos connaissances CSS

Le CSS peut sembler complexe au début, mais comprendre ces concepts fondamentaux fournit une base solide pour des techniques plus avancées.

Vos prochaines étapes en CSS :

• Flexbox – simplifie l’alignement et la distribution des éléments
• CSS Grid – offre des outils puissants pour créer des mises en page complexes
• Variables CSS – réduit la répétition et améliore la maintenabilité
• Design responsive – garantit un bon fonctionnement sur différentes tailles d’écran

Ressources d’apprentissage interactives

Pratiquez ces concepts avec ces jeux ludiques et pratiques :

• 🐸 Flexbox Froggy – Maîtrisez Flexbox par des défis amusants
• 🌱 Grid Garden – Apprenez CSS Grid en cultivant des carottes virtuelles
• 🎯 CSS Battle – Testez vos compétences CSS avec des défis de code

Apprentissage complémentaire

Pour maîtriser les bases du CSS, complétez ce module Microsoft Learn : Styliser votre application HTML avec CSS

⚡ Ce que vous pouvez faire dans les 5 prochaines minutes

• Ouvrir DevTools et inspecter les styles CSS de n’importe quel site avec le panneau Éléments
• Créer un fichier CSS simple et le lier à une page HTML
• Essayer de changer les couleurs avec différentes méthodes : hexadécimal, RGB et noms de couleur
• Pratiquer le modèle de boîte en ajoutant padding et margin à une div

🎯 Ce que vous pouvez accomplir cette heure

• Compléter le quiz post-leçon et revoir les fondamentaux du CSS
• Styliser votre page HTML avec des polices, couleurs et espacements
• Créer une mise en page simple avec flexbox ou grid
• Expérimenter les transitions CSS pour des effets fluides
• Pratiquer le design responsive avec des media queries

📅 Votre aventure CSS sur une semaine

• Réaliser le style du terrarium avec créativité
• Maîtriser CSS Grid en construisant une galerie photo
• Apprendre les animations CSS pour animer vos designs
• Explorer les préprocesseurs CSS comme Sass ou Less
• Étudier les principes de design et les appliquer en CSS
• Analyser et recréer des designs intéressants trouvés en ligne

🌟 Votre maîtrise du design en un mois

• Construire un système complet de design de site web responsive
• Apprendre CSS-in-JS ou des frameworks utilitaires comme Tailwind
• Contribuer à des projets open source avec des améliorations CSS
• Maîtriser des concepts avancés CSS comme les propriétés personnalisées et le containment
• Créer des bibliothèques de composants réutilisables avec du CSS modulaire
• Encadrer d’autres apprentis CSS et partager vos connaissances design

🎯 Votre chronologie de maîtrise CSS

timeline
    title Progression d'apprentissage CSS
    
    section Fondations (10 minutes)
        Connexion de fichiers : Lier CSS à HTML
                             : Comprendre les règles de cascade
                             : Apprendre les bases de l'héritage
        
    section Sélecteurs (15 minutes)
        Ciblage des éléments : Sélecteurs d'éléments
                            : Modèles de classes
                            : Spécificité des ID
                            : Combinateurs
        
    section Modèle de boîte (20 minutes)
        Fondamentaux de mise en page : Marges et padding
                                   : Propriétés de bordure
                                   : Dimensionnement du contenu
                                   : Comportement de box-sizing
        
    section Positionnement (25 minutes)
        Placement des éléments : Statique vs relatif
                               : Positionnement absolu
                               : Superposition avec z-index
                               : Unités adaptées
        
    section Conception visuelle (30 minutes)
        Maîtrise du style : Couleurs et opacité
                         : Ombres et effets
                         : Transitions
                         : Propriétés de transformation
        
    section Conception adaptative (45 minutes)
        Support multi-appareils : Requêtes media
                               : Mise en page flexible
                               : Approche mobile-first
                               : Optimisation du viewport
        
    section Techniques avancées (1 semaine)
        CSS moderne : Dispositions Flexbox
                    : Systèmes CSS Grid
                    : Propriétés personnalisées
                    : Images-clés d'animation
        
    section Compétences professionnelles (1 mois)
        Architecture CSS : Modèles de composants
                         : Code maintenable
                         : Optimisation des performances
                         : Compatibilité multi-navigateurs

🛠️ Résumé de votre boîte à outils CSS

Après cette leçon, vous avez maintenant :

• Compréhension de la cascade : Comment les styles héritent et se remplacent
• Maîtrise des sélecteurs : Ciblage précis avec éléments, classes et IDs
• Compétences en positionnement : Placement stratégique et gestion des couches d’éléments
• Design visuel : Création d’effets verre, ombres et transparence
• Techniques responsives : Mise en page en pourcentages qui s’adapte à tout écran
• Organisation du code : Structure CSS propre et maintenable
• Pratiques modernes : Utilisation d’unités relatives et design accessible

Prochaines étapes : Votre terrarium possède désormais structure (HTML) et style (CSS). La dernière leçon ajoutera de l’interactivité avec JavaScript !

Devoir

Refactorisation CSS

---

Avertissement :
Ce document a été traduit à l’aide du service de traduction automatique Co-op Translator. Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour des informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.