Séance 8 : Compléments CSS - Affiner Votre Design

1. Introduction : Au-delà des Fondamentaux

Après avoir maîtrisé la structure HTML, les sélecteurs CSS, le modèle de boîte, les systèmes de mise en page (Flexbox et Grid), et le positionnement, il est temps d'explorer des concepts complémentaires qui vous permettront de créer des interfaces plus dynamiques, adaptatives et esthétiques. Cette séance est dédiée à l'apprentissage d'outils qui affineront vos compétences en design web.

2. Des Outils pour le Détail

2.1 Unités de Mesure Relatives : `rem` et `em`

Jusqu'à présent, nous avons principalement utilisé des unités de mesure absolues comme les pixels (px). Cependant, pour un Responsive Design et une meilleure accessibilité, les unités relatives sont préférables.

2.1.1 L'unité `em` (relative à la taille de police du parent)

L'unité em est relative à la taille de police de l'élément parent. Si la taille de police du parent est de 16px, alors 1em sera égal à 16px. Si la taille de police du parent est de 20px, alors 1em sera égal à 20px. Cela peut devenir complexe avec des imbrications.

<div class="parent">
    Parent text (16px)
    <p class="child-em">Child text (1.2em)</p>
</div>

.parent {
    font-size: 16px;
}
.child-em {
    font-size: 1.2em; /* Sera 1.2 * 16px = 19.2px */
    padding: 0.5em; /* Sera 0.5 * 19.2px = 9.6px */
}

2.1.2 L'unité `rem` (relative à la taille de police de l'élément racine)

L'unité rem (root em) est relative à la taille de police de l'élément racine du document, c'est-à-dire la taille de police définie sur la balise <html>. C'est souvent la valeur par défaut du navigateur (généralement 16px). L'avantage est que toutes les tailles basées sur rem sont cohérentes et faciles à gérer, car elles dépendent d'une seule valeur de base.

<html>
<!-- font-size par défaut du navigateur est souvent 16px -->
<body>
    <p class="text-rem">Text with rem unit</p>
</body>
</html>

html {
    font-size: 16px; /* Définir une base explicite */
}
.text-rem {
    font-size: 1.25rem; /* Sera 1.25 * 16px = 20px */
    padding: 1rem; /* Sera 1 * 16px = 16px */
}

Pour le Responsive Design, il est courant de définir la taille de police de la balise <html> en pourcentage (ex: 62.5% pour que 1rem = 10px, facilitant les calculs) ou d'ajuster cette taille via des Media Queries.

2.2 Typographie de Pointe : Les Polices Variables

Les polices variables sont une avancée majeure pour la typographie web. Un unique fichier de police peut contenir toutes les variations de style (graisse, inclinaison, etc.), offrant une flexibilité de design incroyable et des performances optimisées (un seul fichier à charger).

On peut ainsi faire varier la graisse (weight) d'une police de manière fluide, ce qui est impossible avec des polices standards.

/* Import d'une police variable depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

.variable-text {
    font-family: 'Inter', sans-serif;
    font-weight: 100; /* Graisse de départ */
    transition: font-weight 0.5s ease-in-out; /* Transition sur la graisse */
}

.variable-text:hover {
    font-weight: 900; /* Graisse finale au survol */
}

2.3 Transitions CSS : Effets de Changement Fluides

Les transitions CSS permettent de contrôler la vitesse et la fluidité des changements de propriétés CSS. Elles sont parfaites pour les interactions simples comme les survols de souris.

Propriétés Clés des Transitions :

transition-property: Spécifie la ou les propriétés CSS à animer.
- Ex: background-color, transform, opacity, all (pour toutes les propriétés modifiées).
transition-duration: La durée de la transition.
- Ex: 0.5s (secondes), 300ms (millisecondes).
transition-timing-function: La courbe de vitesse de la transition.
- ease (début et fin lents, milieu rapide - par default)
- linear (vitesse constante)
- ease-in (début lent)
- ease-out (fin lente)
- ease-in-out (début et fin lents)
- cubic-bezier(...) (personnalisée)
transition-delay: Le délai avant le début de la transition.
- Ex: 1s, 200ms.

Raccourci transition :

.element {
    transition: property duration timing-function delay;
    /* Ex: transition: background-color 0.3s ease-out 0.1s; */
    /* Ex: transition: all 0.5s linear; */
}

<button class="animated-button">Hover Me</button>

.animated-button {
    padding: 10px 20px;
    background-color: #4F46E5; /* indigo-600 */
    color: white;
    border: none;
    border-radius: 0.5rem; /* rounded-lg */
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.animated-button:hover {
    background-color: #6366F1; /* indigo-500 */
    transform: scale(1.05);
}

2.4 Stylisation des Formulaires

Les formulaires sont des éléments cruciaux pour l'interaction utilisateur. Les styles par défaut des navigateurs sont souvent basiques. Voici comment les améliorer.

2.3.1 Champs de Texte et Zones de Texte

<input type="text" placeholder="Votre nom" class="form-input">
<textarea placeholder="Votre message" class="form-textarea"></textarea>

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.75rem; /* p-3 */
    margin-bottom: 1rem; /* mb-4 */
    border: 1px solid #CBD5E1; /* slate-300 */
    border-radius: 0.375rem; /* rounded-md */
    font-size: 1rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #6366F1; /* indigo-500 */
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); /* indigo-500 with opacity */
}
.form-textarea {
    resize: vertical; /* Permet le redimensionnement vertical */
    min-height: 100px;
}

2.3.2 Boutons de Soumission

<button type="submit" class="form-button">Envoyer</button>

.form-button {
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    background-color: #4F46E5; /* indigo-600 */
    color: white;
    border: none;
    border-radius: 0.5rem; /* rounded-lg */
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600; /* semibold */
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.form-button:hover {
    background-color: #6366F1; /* indigo-500 */
    transform: translateY(-2px);
}
.form-button:active {
    transform: translateY(0);
}

2.3.3 Cases à Cocher et Radios

Les éléments <input type="checkbox"> et <input type="radio"> sont plus difficiles à styliser uniformément entre les navigateurs. Pour un contrôle total, il est souvent nécessaire d'utiliser des bibliothèques JavaScript ou de masquer l'élément natif et de le remplacer par un élément stylisé en CSS (technique avancée).

2.5 Autres Compléments Utiles

box-shadow: Ajoute une ombre portée à un élément.

.element {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* offset-x offset-y blur-radius spread-radius color */
}

text-shadow: Ajoute une ombre portée au texte.

.element {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* offset-x offset-y blur-radius color */
}

border-radius: Arrondit les coins d'un élément.

.element {
    border-radius: 10px; /* Coins arrondis */
    border-radius: 50%; /* Cercle/Ovale parfait */
}

opacity: Définit l'opacité (transparence) d'un élément.
- Valeurs de 0 (complètement transparent) à 1 (complètement opaque).
```
.element {
    opacity: 0.7;
}
```
cursor: Change l'apparence du curseur de la souris au survol d'un élément.
- Ex: pointer (main), text (curseur de texte), not-allowed.
```
.element {
                    cursor: pointer;
                }
                
```

2.6 La Révolution Responsive : Les Container Queries

Les Media Queries sont excellentes, mais elles ont une limite : elles ne répondent qu'à la taille de la fenêtre (viewport). Les Container Queries sont la solution moderne : elles permettent à un composant de s'adapter à la taille de son conteneur parent.

Cela permet de créer des composants véritablement autonomes et réutilisables.

<!-- Un conteneur large -->
                <main class="main-content">
                    <div class="card">...</div>
                </main>
                
                <!-- Un conteneur étroit -->
                <aside class="sidebar">
                    <div class="card">...</div>
                </aside>

/* 1. On déclare les éléments qui serviront de conteneur */
                .main-content, .sidebar {
                    container-type: inline-size; /* Le conteneur est sensible à sa largeur */
                    container-name: card-host; /* On peut même nommer le conteneur */
                }
                
                /* 2. On style le composant par défaut (pour les petits conteneurs) */
                .card {
                    display: flex;
                    flex-direction: column; /* Layout vertical */
                }
                
                /* 3. On change le style si le conteneur atteint une certaine taille */
                @container card-host (min-width: 400px) {
                    .card {
                        flex-direction: row; /* Layout horizontal pour les conteneurs larges */
                    }
                }

4. Exercices d'Application

Pour chaque exercice, créez un nouveau fichier HTML et CSS.

Exercice 1 : Redimensionnement de Texte avec `rem`

Créez une page avec un titre (<h1>) et quelques paragraphes (<p>).
Dans votre CSS, définissez la font-size de la balise <html> à 18px.
Définissez la taille de police du titre en rem (ex: 2.5rem) et celle des paragraphes en rem (ex: 1rem).
Modifiez la font-size de <html> dans une Media Query pour les petits écrans (ex: 14px). Observez comment toutes les tailles de texte s'adaptent proportionnellement.

Exercice 2 : Bouton Interactif avec Transitions

Créez un bouton.
Au survol de ce bouton :
- La couleur de fond doit changer.
- Le texte doit devenir gras.
- Le bouton doit légèrement s'agrandir (transform: scale(1.1);).
Appliquez une transition sur toutes ces propriétés pour qu'elles s'animent en 0.4s avec une fonction de timing ease-in-out.

Exercice 3 : Formulaire de Contact Stylisé

Créez un formulaire de contact simple avec les champs suivants : Nom (<input type="text">), Email (<input type="email">), Message (<textarea>) et un bouton Envoyer (<button type="submit">).
Utilisez les styles de formulaire vus dans la partie explicative pour donner une apparence moderne et cohérente à tous les champs et au bouton.
Ajoutez des box-shadow au :focus des champs de texte.

Exercice 4 : Carte avec Effets Visuels

Créez une "carte" (<div class="card">) avec un titre et un paragraphe.
Appliquez-lui un border-radius pour des coins arrondis.
Ajoutez une box-shadow subtile.
Au survol de la carte, faites en sorte que l'opacity diminue légèrement et que l'box-shadow s'intensifie, le tout avec une transition douce.
Changez le cursor en pointer au survol.

5. TP : Amélioration d'une Section d'Héros avec le Design System et Polices Variables

Pour ce TP, vous allez appliquer les concepts de cette séance pour créer une section d'héros (la première section d'une page web, souvent grande et accrocheuse) avec des éléments interactifs et bien stylisés, en utilisant notre Design System et les polices variables.

Objectif :

Concevoir une section d'héros visuellement attrayante avec un titre, un sous-titre, un bouton d'appel à l'action, et potentiellement un formulaire d'inscription simple, en utilisant les unités relatives, les transitions, les styles de formulaire, et les polices variables.

Consignes :

Créez un nouveau dossier tp-seance8-complements avec index.html et styles.css.
Dans index.html, créez une section
contenant :
- Un titre principal (<h1>).
- Un sous-titre (<p>).
- Un bouton d'appel à l'action (<button>).
- Optionnel : Un petit formulaire d'inscription avec un champ email (<input type="email">) et un bouton de soumission.
Dans votre styles.css :
- Appliquez box-sizing: border-box; universellement.
- Utilisation du Design System : Pour toutes les couleurs, espacements, tailles de police et ombres, utilisez les variables CSS de notre styles.css global (ex: var(--color-primary), var(--space-4), var(--font-size-base), var(--shadow-md)).
- Unités rem :
  - Définissez la font-size de <html> à 62.5% (pour que 1rem = 10px).
  - Utilisez des unités rem pour les font-size, padding, et margin de la section d'héros et de ses éléments.
- Section d'Héros :
  - Donnez-lui une hauteur minimale (min-height: 80vh;).
  - Centrez son contenu verticalement et horizontalement (en utilisant display: flex;, flex-direction: column;, justify-content: center;, align-items: center;).
  - Ajoutez une image de fond ou un dégradé, et une couleur de texte contrastante (via les variables).
- Bouton d'Appel à l'Action :
  - Stylez-le avec des padding, background-color, color, et border-radius (via les variables).
  - Ajoutez des transitions pour les effets de survol (background-color, transform, box-shadow).
  - Utilisez une police variable : Au survol, faites varier la graisse de la police du bouton (ex: de 400 à 700) avec une transition douce.
- Formulaire (si inclus) :
  - Appliquez les styles de formulaire vus précédemment aux champs <input> et <button>, en utilisant les variables du Design System.
  - Utilisez flexbox pour aligner le champ email et le bouton de soumission sur la même ligne.
- Ajoutez des text-shadow aux titres pour les faire ressortir sur le fond.
Vérification : Ouvrez votre index.html dans le navigateur. Vérifiez que la section d'héros est bien stylisée, que les textes et espacements sont proportionnels grâce aux rem, et que les interactions du bouton sont fluides. Testez la réactivité.

6. Conclusion : Vers des Interfaces Plus Riches

Cette séance a enrichi votre boîte à outils CSS avec des techniques pour créer des designs plus raffinés et interactifs. La maîtrise des unités relatives rem et em est fondamentale pour un développement web moderne et accessible. Les transitions CSS vous ouvrent la porte à des animations fluides et des expériences utilisateur plus engageantes, tandis que la stylisation des formulaires est essentielle pour des interfaces professionnelles.

Continuez à expérimenter avec ces propriétés et à les combiner avec les concepts de mise en page que vous avez appris. Le monde du CSS est vaste, et chaque nouvelle propriété est une opportunité de rendre vos créations web encore plus impressionnantes !