Modèle:Police/styles.css
De Nefald
Autres actions
/* ==== Modèle:Font - Styles de coloration de texte ==== */
/* === Couleurs de base === */
.font-color {
display: inline;
}
.font-rouge { color: #dc3545; }
.font-bleu { color: #0d6efd; }
.font-vert { color: #198754; }
.font-jaune { color: #ffc107; }
.font-orange { color: #fd7e14; }
.font-violet { color: #6f42c1; }
.font-rose { color: #d63384; }
.font-cyan { color: #0dcaf0; }
.font-blanc { color: #ffffff; }
.font-gris { color: #6c757d; }
.font-noir { color: #000000; }
/* Couleurs métalliques */
.font-or { color: #ffd700; }
.font-argent { color: #c0c0c0; }
.font-bronze { color: #cd7f32; }
/* === EFFETS AMÉLIORÉS === */
/* Effet brillant - GLOW PUISSANT */
.font-effet-brillant {
text-shadow:
0 0 10px currentColor,
0 0 20px currentColor,
0 0 30px currentColor,
0 0 40px currentColor,
0 0 50px currentColor;
font-weight: bold;
letter-spacing: 1px;
}
/* Effet néon - ULTRA VISIBLE */
.font-effet-neon {
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 15px currentColor,
0 0 20px currentColor,
0 0 30px currentColor,
0 0 40px currentColor,
0 0 50px currentColor,
0 0 60px currentColor;
font-weight: bold;
letter-spacing: 2px;
}
/* Effet ombre portée - MARQUÉE */
.font-effet-ombre {
text-shadow:
3px 3px 0 rgba(0, 0, 0, 0.3),
6px 6px 0 rgba(0, 0, 0, 0.2),
9px 9px 0 rgba(0, 0, 0, 0.1);
font-weight: bold;
}
/* Effet 3D - PROFONDEUR EXTRÊME */
.font-effet-3d {
text-shadow:
1px 1px 0 rgba(0, 0, 0, 0.3),
2px 2px 0 rgba(0, 0, 0, 0.3),
3px 3px 0 rgba(0, 0, 0, 0.3),
4px 4px 0 rgba(0, 0, 0, 0.3),
5px 5px 0 rgba(0, 0, 0, 0.3),
6px 6px 0 rgba(0, 0, 0, 0.3),
7px 7px 0 rgba(0, 0, 0, 0.3),
8px 8px 10px rgba(0, 0, 0, 0.5);
font-weight: bold;
letter-spacing: 1px;
}
/* Effet relief - GRAVURE PROFONDE */
.font-effet-relief {
text-shadow:
2px 2px 0 rgba(255, 255, 255, 0.8),
-2px -2px 0 rgba(0, 0, 0, 0.6),
0 0 5px rgba(0, 0, 0, 0.5);
font-weight: bold;
}
/* Effet contour - STROKE ÉPAIS */
.font-effet-contour {
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000,
-3px 0 0 #000,
3px 0 0 #000,
0 -3px 0 #000,
0 3px 0 #000;
font-weight: bold;
letter-spacing: 1px;
}
/* Effet pulsation - ANIMATION VISIBLE */
.font-effet-pulse {
animation: font-pulse 1.5s ease-in-out infinite;
font-weight: bold;
}
@keyframes font-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
text-shadow: 0 0 10px currentColor;
}
50% {
opacity: 0.6;
transform: scale(1.1);
text-shadow: 0 0 30px currentColor;
}
}
/* Effet clignotant */
.font-effet-clignotant {
animation: font-blink 1s step-start infinite;
font-weight: bold;
}
@keyframes font-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* Effet gras */
.font-effet-gras {
font-weight: 900;
letter-spacing: 1px;
}
/* Effet métallique OR - BRILLANCE INTENSE */
.font-or.font-effet-metallique {
color: #ffd700;
text-shadow:
-1px -1px 0 #b8860b,
1px -1px 0 #b8860b,
-1px 1px 0 #b8860b,
1px 1px 0 #b8860b,
-2px -2px 0 #8b6914,
2px -2px 0 #8b6914,
-2px 2px 0 #8b6914,
2px 2px 0 #8b6914,
0 0 5px #ffd700,
0 0 10px #ffd700,
0 0 15px #ffed4e,
0 0 20px #ffed4e;
font-weight: bold;
letter-spacing: 2px;
}
/* Effet métallique ARGENT */
.font-argent.font-effet-metallique {
color: #e8e8e8;
text-shadow:
-1px -1px 0 #808080,
1px -1px 0 #808080,
-1px 1px 0 #808080,
1px 1px 0 #808080,
-2px -2px 0 #606060,
2px -2px 0 #606060,
-2px 2px 0 #606060,
2px 2px 0 #606060,
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #c0c0c0;
font-weight: bold;
letter-spacing: 2px;
}
/* Effet métallique BRONZE */
.font-bronze.font-effet-metallique {
color: #e8a75c;
text-shadow:
-1px -1px 0 #8b5a2b,
1px -1px 0 #8b5a2b,
-1px 1px 0 #8b5a2b,
1px 1px 0 #8b5a2b,
-2px -2px 0 #654321,
2px -2px 0 #654321,
-2px 2px 0 #654321,
2px 2px 0 #654321,
0 0 5px #cd7f32,
0 0 10px #cd7f32,
0 0 15px #e8a75c;
font-weight: bold;
letter-spacing: 2px;
}
/* Effet FEU - FLAMMES ANIMÉES */
.font-effet-feu {
color: #ff4500;
text-shadow:
0 0 10px #ff0000,
0 0 20px #ff0000,
0 0 30px #ff4500,
0 0 40px #ff7f00,
0 0 50px #ff7f00,
0 0 60px #ffff00;
animation: font-fire 0.5s ease-in-out infinite alternate;
font-weight: bold;
letter-spacing: 2px;
}
@keyframes font-fire {
0% {
text-shadow:
0 0 10px #ff0000,
0 0 20px #ff0000,
0 0 30px #ff4500,
0 0 40px #ff7f00;
}
50% {
text-shadow:
0 0 15px #ff0000,
0 0 25px #ff4500,
0 0 35px #ff7f00,
0 0 45px #ffff00;
}
100% {
text-shadow:
0 0 20px #ff0000,
0 0 30px #ff4500,
0 0 40px #ff7f00,
0 0 50px #ffff00,
0 0 60px #ffff00;
}
}
/* Effet GLACE - CRISTAUX GLACÉS */
.font-effet-glace {
color: #00ffff;
text-shadow:
0 0 5px #ffffff,
0 0 10px #ffffff,
0 0 15px #00ffff,
0 0 20px #00ffff,
0 0 30px #00ffff,
0 0 40px #0099ff,
0 0 50px #0099ff;
font-weight: bold;
letter-spacing: 3px;
}
/* Effet RAINBOW multicolore */
.font-effet-rainbow {
animation: font-rainbow 3s linear infinite;
font-weight: bold;
letter-spacing: 2px;
text-shadow:
0 0 10px currentColor,
0 0 20px currentColor;
}
@keyframes font-rainbow {
0% { color: #ff0000; text-shadow: 0 0 20px #ff0000; }
16% { color: #ff7f00; text-shadow: 0 0 20px #ff7f00; }
33% { color: #ffff00; text-shadow: 0 0 20px #ffff00; }
50% { color: #00ff00; text-shadow: 0 0 20px #00ff00; }
66% { color: #0000ff; text-shadow: 0 0 20px #0000ff; }
83% { color: #4b0082; text-shadow: 0 0 20px #4b0082; }
100% { color: #ff0000; text-shadow: 0 0 20px #ff0000; }
}
/* Effet dégradé avec glow */
.font-effet-degrade {
text-shadow:
0 0 5px currentColor,
0 0 10px currentColor,
0 0 15px currentColor,
2px 2px 5px rgba(0, 0, 0, 0.3);
font-weight: bold;
letter-spacing: 1px;
}