Félicitations pour votre progression ! Vous avez déjà une solide base en HTML et CSS, incluant l'utilisation des variables CSS et une première approche de Tailwind CSS. Cette séance va vous propulser au niveau supérieur en vous faisant découvrir des fonctionnalités CSS plus puissantes et créatives. Nous allons approfondir les transformations et animations, explorer des sélecteurs avancés, et formaliser l'utilisation des Frameworks CSS, des outils essentiels dans le développement web moderne.
La propriété transform vous permet de modifier la forme et la position des éléments dans un espace 2D ou 3D sans affecter le flux normal du document.
translate(x, y): Déplace un élément. Ex: translate(10px, 20px).
rotate(angle): Fait pivoter un élément. Ex: rotate(45deg).
scale(x, y): Redimensionne un élément. Ex: scale(1.2, 1.5) ou scale(1.1) (pour proportionnel).
skew(x-angle, y-angle): Incline un élément. Ex: skewX(10deg).
.box-2d {
width: 100px;
height: 100px;
background-color: #FECACA; /* red-200 */
transition: transform 0.3s ease-out;
}
.box-2d:hover {
transform: translateX(20px) rotate(15deg) scale(1.1);
}Pour des transformations 3D, vous devez définir une perspective sur l'élément parent de l'élément que vous transformez. Plus la valeur de perspective est faible, plus l'effet 3D sera prononcé (comme être très proche de l'objet).
rotateX(angle), rotateY(angle), rotateZ(angle).
translateZ(z): Déplace le long de l'axe Z.
transform-origin: Définit le point autour duquel la transformation a lieu (par défaut center center).
<div class="parent-3d">
<div class="box-3d"></div>
</div>.parent-3d {
perspective: 1000px; /* Important pour la 3D */
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.box-3d:hover {
transform: rotateY(180deg); /* Faire pivoter sur l'axe Y */
}shape-outsidePour briser la monotonie des mises en page rectangulaires, CSS nous offre la propriété shape-outside. Elle permet au contenu textuel de s'enrouler autour d'une forme complexe (comme un cercle, une ellipse ou un polygone) au lieu d'une simple boîte carrée.
<div class="article">
<div class="shape"></div>
<p>Le texte de cet article va maintenant s'enrouler joliment autour de la forme circulaire flottante, créant un effet visuel bien plus intéressant qu'un simple carré. Cela ouvre des possibilités de design qui étaient auparavant réservées aux logiciels de publication assistée par ordinateur...</p>
</div>.shape {
float: left;
width: 150px;
height: 150px;
background-color: #818CF8;
clip-path: circle(50%); /* Crée une forme visuelle circulaire */
shape-outside: circle(50%); /* Définit la forme pour l'habillage du texte */
margin-right: 20px;
}
.article p {
text-align: justify;
}Les pseudo-classes et pseudo-éléments que vous connaissez (:hover, :active) ne sont que la pointe de l'iceberg. Ils permettent de cibler des états ou des parties spécifiques d'un élément.
:nth-child(n), :nth-of-type(n): Cible un élément en fonction de sa position parmi ses frères (enfants de même parent). n peut être un nombre, odd, even ou une formule (2n+1).
:first-child, :last-child, :only-child.
:not(selector): Applique le style à tous les éléments SAUF ceux qui correspondent au sélecteur.
:focus-within: Cible un élément parent si l'un de ses descendants a le focus.
:valid, :invalid, :checked, :disabled.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>ul li:nth-child(odd) {
background-color: #E0F2FE; /* blue-50 */
}
ul li:last-child {
font-weight: bold;
}
input:invalid {
border: 2px solid red;
}::before et ::after :Ces pseudo-éléments vous permettent d'insérer du contenu cosmétique (non sémantique) avant ou après le contenu réel d'un élément, uniquement via CSS. Ils sont couramment utilisés pour des icônes, des formes décoratives, ou des effets visuels.
content (même si vide).display: block ou inline-block pour appliquer des dimensions.position: absolute pour un placement précis.<button class="button-icon">Télécharger</button>.button-icon {
position: relative;
padding-left: 2rem; /* Pour faire de la place à l'icône */
background-color: #4F46E5; /* indigo-600 */
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
}
.button-icon::before {
content: '⬇️'; /* Une icône emoji, ou unicode \2B07 */
position: absolute;
left: 0.5rem;
top: 50%;
transform: translateY(-50%);
}Pour les icônes et les logos, le format SVG (Scalable Vector Graphics) est le roi. Contrairement aux images raster (JPG, PNG) qui sont basées sur des pixels, les SVG sont basés sur des instructions mathématiques. Ils sont donc infiniment redimensionnables sans aucune perte de qualité.
La plus grande force des SVG est qu'ils peuvent être insérés directement dans le HTML et stylisés avec CSS, comme n'importe quel autre élément.
<!-- SVG en ligne -->
<svg class="icon-heart" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>.icon-heart {
width: 50px;
height: 50px;
stroke: #4F46E5; /* Couleur de la bordure */
stroke-width: 2;
fill: none; /* Pas de remplissage par défaut */
transition: all 0.3s ease;
}
.icon-heart:hover {
fill: #FCA5A5; /* Remplissage rose au survol */
stroke: #DC2626;
}CSS offre des outils puissants pour créer des effets graphiques avancés directement dans le navigateur.
filter permet d'appliquer des effets graphiques comme le flou, la saturation, etc. .image-blur { filter: blur(5px); }.image-grayscale { filter: grayscale(100%); }
backdrop-filter applique un filtre à la zone derrière un élément. C'est la clé de l'effet "glassmorphism"..glass-panel { background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); }
.gradient-background { background-image: linear-gradient(to right, #818CF8, #4F46E5); }
@keyframes) : Des Séquences D'EffetsAlors que les transitions animent le changement d'un état à un autre, les animations CSS vous permettent de créer des séquences d'animations complexes avec plusieurs étapes définies. Elles sont parfaites pour des mouvements continus, des effets d'entrée ou de sortie, ou des comportements répétitifs.
@keyframes :La règle @keyframes définit les styles d'un élément à des points spécifiques de son animation. Vous lui donnez un nom, puis vous définissez des étapes en pourcentage (de 0% à 100%) ou avec from (équivalent à 0%) et to (équivalent à 100%).
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
transform: translateX(10%);
opacity: 0.5;
}
100% {
transform: translateX(0);
opacity: 1;
}
}animation :animation-name: Le nom de l'animation (slideIn).
animation-duration: La durée d'une cycle (ex: 1s).
animation-timing-function: La courbe de vitesse (ex: ease-out).
animation-delay: Délai avant le début.
animation-iteration-count: Nombre de répétitions (ex: 2, infinite).
animation-direction: normal, reverse, alternate, alternate-reverse.
animation-fill-mode: Ce qui se passe avant/après l'animation (none, forwards, backwards, both).
animation-play-state: running ou paused.
animation :.animated-element {
animation: slideIn 1s ease-out forwards;
/* Nom Durée Timing-function Fill-mode */
}<div class="bouncing-ball"></div>@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
}
.bouncing-ball {
width: 50px;
height: 50px;
background-color: #6EE7B7; /* emerald-300 */
border-radius: 50%;
animation: bounce 1s infinite alternate; /* Nom Durée Répétition Direction */
}C'est une des fonctionnalités les plus récentes et puissantes de CSS. Elle permet de lier la progression d'une animation au défilement d'un conteneur, un effet qui nécessitait auparavant du JavaScript complexe.
L'exemple le plus classique est une barre de progression de lecture.
<!-- Placé en haut du body -->
<div class="progress-bar"></div>
<!-- Contenu de la page qui peut être scrollé -->
<article>...</article>/* L'animation qui fait grandir la barre de 0% à 100% */
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.progress-bar {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 8px;
background-color: #4F46E5;
transform-origin: left; /* L'animation grandit depuis la gauche */
/* La magie est ici : */
animation: grow-progress linear;
animation-timeline: scroll(root); /* Lie l'animation au scroll de la page */
}Nous avons déjà eu un aperçu des Frameworks CSS, notamment avec l'introduction de Tailwind CSS en Séance 1. Cette section vise à approfondir notre compréhension de ces outils essentiels dans le développement web moderne. Nous allons revoir ce qu'est un Framework CSS, pourquoi ils sont si populaires, et comment les utiliser efficacement pour construire plus vite et mieux.
Un Framework CSS est une collection de fichiers CSS (et parfois JavaScript) pré-écrits qui fournissent un ensemble de composants, de styles de base et d'utilitaires pour faciliter et accélérer le développement web. C'est un peu comme avoir une bibliothèque de briques de construction préfabriquées pour votre site web, plutôt que de devoir mouler chaque brique soi-même.
Il existe principalement deux grandes familles de frameworks CSS :
Ils fournissent des "composants" prêts à l'emploi (boutons stylisés, barres de navigation, cartes, modales) que vous ajoutez avec des classes spécifiques. Vous modifiez le moins possible le CSS direct ; vous utilisez les classes du framework.
<!-- Exemple Bootstrap -->
<button class="btn btn-primary">Bouton Principal</button>
Au lieu de composants préfabriqués, ils fournissent des milliers de "classes utilitaires" atomiques, chacune faisant une seule chose (ex: pt-4 pour padding-top: 1rem, text-lg pour font-size: 1.125rem). Vous construisez votre design en composant ces petites classes directement dans votre HTML.
<!-- Exemple Tailwind CSS -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Mon Bouton Stylisé
</button>
Comme nous l'avons vu dès la Séance 1, nous utilisons Tailwind CSS dans nos exemples. C'est un excellent exemple de framework "utility-first". Revoyons pourquoi il est si puissant et comment l'exploiter au maximum :
Avantages de Tailwind CSS :
Dans les exercices à venir, nous continuerons à combiner les classes de Tailwind avec les techniques CSS avancées pour créer des interfaces dynamiques et esthétiques, tout en gardant notre code propre et maintenable.
Pour chaque exercice, créez un nouveau fichier HTML et CSS (sauf indication contraire pour Tailwind).
:root..dark-theme. Lorsque cette classe est ajoutée à la balise <body>, les variables CSS correspondantes doivent changer (ex: background-color, text-color) pour simuler un mode sombre.dark-theme sur le body au clic. (Pas de JS pour l'instant, juste le CSS pour la classe active).div).transform avec translate et rotate et scale, et ajoutez une transition.perspective. Au survol, faites pivoter la boîte sur l'axe Y (rotateY) pour un effet de retournement.transform-origin pour voir comment le point de pivot change.<ul>) avec au moins 5 éléments (<li>).:nth-child(even/odd)).:first-child).::before pour ajouter une petite icône ou un numéro stylisé devant chaque élément de la liste.::after pour ajouter une ligne de séparation subtile après chaque élément (sauf le dernier, en utilisant :not(:last-child)).div qui servira de "loader" (indicateur de chargement).@keyframes pour faire tourner cet élément sur lui-même (rotate).div adjacentes et faites-les rebondir de manière décalée pour simuler un loader "bouncing dots".Pour ce TP, vous allez combiner toutes les compétences acquises dans cette séance pour créer une carte de produit interactive et visuellement soignée, en utilisant notre Design System.
Concevoir une "carte de produit" responsive et interactive qui utilise des variables CSS pour son thème, des transformations et animations au survol, des pseudo-éléments pour des détails, et le tout structuré avec des classes Tailwind CSS.
tp-seance9-card-interactive avec index.html et styles.css.index.html, créez une structure de card :
div (la carte).h3).p).span ou p).styles.css :
flexbox pour l'alignement, border-radius, shadow).scale et une petite box-shadow plus prononcée.fadeInUp).::before ou ::after sur le bouton "Ajouter au panier" pour ajouter un petit chariot (emoji ou icône unicode).grayscale()) à l'image du produit au survol de la carte, et utilisez un dégradé pour le fond du bouton.index.html dans le navigateur. Vérifiez que la carte est bien stylisée, que les effets de survol fonctionnent, et que les pseudo-éléments sont correctement affichés. Testez la réactivité.Cette séance a été riche en nouvelles notions, vous permettant d'ajouter une dimension visuelle et interactive majeure à vos projets web. Les variables CSS vous offrent un contrôle sans précédent sur la maintenabilité de votre code, tandis que les transformations et animations ouvrent la porte à des expériences utilisateur beaucoup plus engageantes. L'exploration des pseudo-classes et pseudo-éléments affine votre capacité à cibler et à décorer vos éléments avec précision. Enfin, la découverte des frameworks CSS comme Tailwind CSS est une étape cruciale vers des méthodes de développement plus rapides et standardisées.
Ces outils combinés vous donnent une puissance considérable pour créer des interfaces non seulement fonctionnelles, mais aussi véritablement captivantes et professionnelles. Continuez à pratiquer, à expérimenter, et à imaginer de nouvelles façons d'appliquer ces concepts !