Archives CSS — Quand la frontière devient floue
Date de consignation : Nuit du 19 mars — Reflets sur l'écran OLED
Le layout était en place. Responsive, propre, fonctionnel. Mais il manquait l'âme. La couleur. Le relief. La magie qui fait qu'on clique sans savoir pourquoi.
Flexbox et Grid avaient tracé les rues. Mais les rues étaient nues. Pas d'enseignes lumineuses, pas d'ombres portées, pas de reflets dans les flaques.
C'est là que les styles avancés sont entrés en jeu. Pas pour résoudre des problèmes. Pour en créer. Pour embellir. Pour séduire. Pour mentir avec élégance.
9.1 — BORDURES, OMBRES, ARRONDI : LA TROMPERIE DU RELIEF
Donner du volume à ce qui est plat
🎨 Bordures qui ne servent pas à border
.card {
/* La classique, mais avec une couleur qui change */
border: 3px solid;
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
}
/* Ou mieux : une bordure qui n'en est pas une */
.illusion {
position: relative;
}
.illusion::before {
content: '';
position: absolute;
inset: -5px; /* Nouveau : équivaut à top/right/bottom/left */
background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc);
border-radius: inherit;
z-index: -1;
filter: blur(10px);
}
🌑 Les ombres qui racontent une histoire
/* Ombre portée subtile (mode jour) */
.card-day {
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1);
}
/* Ombre dramatique (mode polar) */
.card-night {
box-shadow:
0 0 0 1px rgba(255,255,255,0.1), /* Bordure subtile */
0 10px 30px rgba(0,0,0,0.4),
0 2px 6px rgba(0,0,0,0.2) inset; /* Ombre intérieure */
}
/* Lévitation au hover */
.button {
transition: box-shadow 0.3s ease;
}
.button:hover {
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
🔵 Arrondis qui changent tout
/* Le classique */
.rounded {
border-radius: 8px;
}
/* Le cercle parfait (avatar) */
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover; /* Important pour les images */
}
/* Formes créatives */
.pill {
border-radius: 9999px; /* Un nombre énorme fait l'affaire */
}
.speech-bubble {
border-radius: 20px 20px 20px 0; /* Coin personnalisé */
}
.organic {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* Forme organique */
}
9.2 — ARRIÈRE-PLANS : LA COUCHE SOUTERRAINE
Ce qui se passe derrière la scène
🌈 Dégradés : la couleur en mouvement
/* Linéaire basique */
.sunset {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
/* Linéaire avec plusieurs arrêts */
.rainbow {
background: linear-gradient(
to right,
#ff0000 0%,
#ff9900 20%,
#ffff00 40%,
#00ff00 60%,
#0000ff 80%,
#9900ff 100%
);
}
/* Radial (soleil, œil) */
.sun {
background: radial-gradient(circle at center, #ffdd00, #ff6600);
}
/* Conique (color wheel, progress circle) */
.color-wheel {
background: conic-gradient(
red, yellow, lime, aqua, blue, magenta, red
);
border-radius: 50%;
}
🎭 Arrière-plans multiples : la superposition
.hero {
background:
/* Couche 1 : Motif subtil */
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>'),
/* Couche 2 : Dégradé coloré avec transparence */
linear-gradient(135deg, rgba(255,0,100,0.3), rgba(0,100,255,0.3)),
/* Couche 3 : Image de fond */
url('background.jpg') center/cover;
background-blend-mode: overlay, multiply;
}
/* Effet de bruit (grain) */
.noisy {
background:
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" seed="2"/></filter><rect width="200" height="200" filter="url(%23noise)" opacity="0.1"/></svg>'),
#121212;
}
9.3 — FILTRES CSS : LA PHOTO EN DIRECT
Retoucher l'image sans quitter le navigateur
.photo {
/* Filtre unique */
filter: grayscale(100%);
/* Ou combinaison (comme dans Photoshop) */
filter:
brightness(1.1) /* +10% luminosité */
contrast(1.2) /* +20% contraste */
saturate(1.3) /* +30% saturation */
blur(0.5px) /* Léger flou */
drop-shadow(0 4px 8px rgba(0,0,0,0.3)); /* Ombre portée */
}
/* Effets créatifs */
.vintage {
filter: sepia(0.5) contrast(1.2) brightness(0.9);
}
.cold {
filter: hue-rotate(180deg) saturate(0.8);
}
.dreamy {
filter: blur(1px) brightness(1.2) contrast(0.9);
}
/* Animation de filtre */
.hover-effect {
transition: filter 0.4s ease;
}
.hover-effect:hover {
filter: brightness(1.3) saturate(1.5);
}
Attention : Les filtres sont gourmands en performance sur les grands éléments. À utiliser avec modération.
9.4 — MODES DE FUSION : QUAND LES COULEURS SE MARIENT
Le cocktail chimique du CSS
/* Mix-blend-mode : fusion avec ce qui est DERRIÈRE */
.title {
color: white;
mix-blend-mode: difference; /* Inverse les couleurs */
}
/* Exemple concret : texte sur image */
.image-container {
position: relative;
}
.image-container img {
width: 100%;
height: auto;
}
.image-container h2 {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
mix-blend-mode: overlay;
/* Le texte s'adapte à l'image derrière */
}
/* Background-blend-mode : fusion entre les layers d'arrière-plan */
.button-special {
background:
linear-gradient(45deg, #ff00cc, #3333ff),
url('texture.jpg');
background-blend-mode: multiply;
/* Le dégradé et la texture se mélangent */
}
/* Modes utiles :
- multiply : assombrit (comme un feutre)
- screen : éclaircit (comme un projecteur)
- overlay : contraste (combinaison des deux)
- difference : effet négatif
- exclusion : similar à difference mais plus doux
*/
9.5 — FONTS VARIABLES : LA TYPO QUI RESPIRE
Une police, mille visages
@font-face {
font-family: 'InterVariable';
src: url('InterVariable.woff2') format('woff2-variations');
font-weight: 100 900; /* Gamme de poids disponible */
font-stretch: 75% 125%; /* Gamme de largeur disponible */
}
/* Utilisation classique */
body {
font-family: 'InterVariable', sans-serif;
font-variation-settings: 'wght' 400; /* Poids normal */
}
/* Animation fluide du poids */
h1 {
font-variation-settings: 'wght' 700;
transition: font-variation-settings 0.3s ease;
}
h1:hover {
font-variation-settings: 'wght' 900;
}
/* Contrôle multiple */
.headline-expressive {
font-variation-settings:
'wght' 850, /* Poids */
'wdth' 110, /* Largeur (100 = normal) */
'slnt' -10, /* Italique oblique */
'opsz' 36; /* Optical size (optimisation pour la taille) */
}
/* Responsive typography avec variable fonts */
:root {
--font-weight-base: 400;
--font-width-base: 100;
}
@media (min-width: 768px) {
:root {
--font-weight-base: 350; /* Plus léger sur grand écran */
--font-width-base: 105; /* Un peu plus large */
}
}
body {
font-variation-settings:
'wght' var(--font-weight-base),
'wdth' var(--font-width-base);
}
Avantages :
- Un seul fichier pour tous les styles
- Animations fluides entre les variations
- Meilleures performances (moins de requêtes HTTP)
- Contrôle typographique précis
9.6 — CAS PRATIQUES : SUR LE TERRAIN
🟦 SCÈNE 1 : CARD AVEC EFFETS AVANCÉS
.card {
--card-color: #2d3436;
background: var(--card-color);
border-radius: 16px;
padding: 2rem;
position: relative;
overflow: hidden;
/* Effet de brillance au survol */
&::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.1),
transparent
);
transition: left 0.6s ease;
}
&:hover::before {
left: 100%;
}
/* Ombre dynamique */
box-shadow:
0 4px 6px rgba(0,0,0,0.1),
0 1px 3px rgba(0,0,0,0.08);
&:hover {
box-shadow:
0 20px 40px rgba(0,0,0,0.2),
0 0 0 1px rgba(255,255,255,0.05);
}
}
🟩 SCÈNE 2 : BOUTON NÉOMORPHE
.button-neo {
--size: 60px;
--shadow-color: #b8b8b8;
--light-color: #ffffff;
width: var(--size);
height: var(--size);
border-radius: 50%;
border: none;
background: #e0e0e0;
/* Ombre extérieure et intérieure */
box-shadow:
8px 8px 16px var(--shadow-color),
-8px -8px 16px var(--light-color),
inset 2px 2px 4px var(--shadow-color),
inset -2px -2px 4px var(--light-color);
transition: all 0.2s ease;
&:active {
box-shadow:
inset 4px 4px 8px var(--shadow-color),
inset -4px -4px 8px var(--light-color);
}
}
🟥 SCÈNE 3 : OVERLAY TEXTURÉ
.hero-section {
position: relative;
height: 80vh;
background:
/* Texture de bruit */
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.05"><filter id="a"><feTurbulence baseFrequency="0.7"/></filter><rect width="100" height="100" filter="url(%23a)"/></svg>'),
/* Dégradé coloré */
linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* Filtre pour unifier le tout */
filter: contrast(1.2) brightness(1.1);
}
.hero-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at 20% 80%,
transparent 30%,
rgba(0,0,0,0.3) 100%
);
mix-blend-mode: multiply;
}
9.7 — NOTES DE FIN D'ENQUÊTE
- Performance : Les filtres, les ombres multiples et les dégradés complexes peuvent ralentir le rendu. Testez sur mobile.
- Accessibilité : N'oubliez pas le contraste. Un texte avec
mix-blend-modepeut devenir illisible. - Support navigateur : Les fonts variables sont bien supportées, mais testez les fallbacks.
- La modération : Un site avec trop d'effets ressemble à un sapin de Noël. Choisissez 2-3 effets cohérents et gardez-les.
- Progressive enhancement : Commencez par un design sobre, puis ajoutez les effets pour les navigateurs qui les supportent.
La vérité : Tous ces effets ne sont que des mensonges. Des ombres qui n'existent pas, des lumières qui ne brillent pas, des textures qui ne se touchent pas. Mais ce sont des mensonges utiles. Des mensonges qui guident l'œil, qui créent l'émotion, qui racontent une histoire.
Dernière lumière sur l'écran : 05:55.
Les ombres sont parfaites. Les dégradés, fluides. Les polices, expressives.
La page n'est plus une collection de boîtes. C'est une scène. Une ambiance. Une promesse.
Les effets avancés ont fait leur travail. Ils ont transformé l'utilitaire en désirable.
Demain, on parlera peut-être d'animations. De mouvement. De vie.
Mais pour ce soir, le design a une âme. Et c'est déjà beaucoup.
Fin du dossier Styles Avancés — Classé et archivé.