Structure fondamentale et sélecteurs CSS

Le langage CSS (Cascading Style Sheets) permet de dissocier la structure sémantique du contenu de sa présentation visuelle. Une règle CSS se compose traditionnellement d'un sélecteur et d'un bloc de déclaration contenant des paires propriété-valeur.

/* Syntaxe de base */
selecteur {
   propriete: valeur;
}

Pour cibler précisément les éléments HTML, on utilise différents types de sélecteurs :

• Sélecteurs de classe (.ma-classe) : Utilisés pour appliquer des styles à plusieurs éléments. Exemple : .btn-action { color: #fff; }.
• Sélecteurs d'identifiant (#mon-id) : Uniques au sein d'une page. Exemple : #bouton-soumettre { width: 200px; }.
• Sélecteurs de type (balise) : Ciblent tous les éléments d'un type donné. Exemple : button { cursor: pointer; }.

La cascade et la spécificité déterminent quelle règle l'emporte en cas de conflit. Un identifiant a plus de poids qu'une classe, qui elle-même prime sur un sélecteur de balise. L'utilisation de !important permet de forcer une valeur, bien que cela soit à utiliser avec parcimonie pour maintenir la lisibilité du code.

Dynamisme et états avec les pseudo-classes

Les pseudo-classes permetttent de modifier l'apparence d'un bouton selon l'interaction de l'utilisateur. C'est essentiel pour fournir un retour visuel (feedback).

/* Style de base du composant */
.ui-button {
   background-color: #3498db;
   border: none;
   padding: 12px 24px;
   transition: all 0.3s ease-in-out;
}

/* État au survol (hover) */
.ui-button:hover {
   background-color: #2980b9;
   transform: translateY(-2px);
}

/* État lors du clic (active) */
.ui-button:active {
   transform: scale(0.95);
}

/* État focus pour l'accessibilité clavier */
.ui-button:focus {
   outline: 3px solid rgba(52, 152, 219, 0.5);
}

Modularité via les classes utilitaires

Pour concevoir un système de design robuste, il est recommandé de créer des classes modulaires qui définissent l'apparence, la forme et la taille séparément.

Thématisation

On définit des thèmes sémantiques comme .btn-primary pour les actions principales et .btn-danger pour les actions critiques.

Variantes de forme et taille

/* Formes */
.rounded-full { border-radius: 50px; }
.rounded-none { border-radius: 0; }

/* Tailles */
.btn-sm { font-size: 0.8rem; padding: 5px 10px; }
.btn-lg { font-size: 1.2rem; padding: 15px 30px; }

Manipulation avancée de background-image

L'insertion d'images de fond permet de créer des boutons graphiquement riches. La propriété background-image peut être optimisée grâce à background-size et background-position.

.icon-button {
   background-image: url('icon-default.png');
   background-repeat: no-repeat;
   background-position: left 10px center;
   background-size: 20px;
   padding-left: 40px;
}

/* Changement d'icône au survol */
.icon-button:hover {
   background-image: url('icon-hover.png');
}

Pour les écrans haute résolution (Retina), utilisez les media queries afin de charger des images de qualité supérieure sans impacter les performances des appareils standards :

@media (min-resolution: 2dppx) {
   .icon-button {
       background-image: url('icon-default@2x.png');
   }
}

Effets visuels : Dégradés, Bordures et Ombres

Le CSS moderne offre des outils pour ajouter de la profondeur sans recourir à des logiciels de retouche d'image.

Dégradés linéaires et radiaux

Les dégradés (gradients) peuvent remplacer des couleurs unies pour un aspect plus moderne.

.gradient-btn {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
}

Profondeur avec box-shadow

L'ombre portée (box-shadow) simule l'élévation de l'élément sur l'axe Z. On peut combiner plusieurs ombres pour un rendu réaliste.

.depth-btn {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
}

.depth-btn:active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

Combinaison pour un bouton "3D" multi-images

En superposant des dégradés semi-transparents et des images de texture, on obtient des composants visuellement complexes et performants.

.complex-btn {
   background: 
       url('texture-overlay.png'),
       linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
   border: 1px solid #bdc3c7;
   border-radius: 4px;
   text-shadow: 1px 1px 0px #fff;
}