« Modèle:Police/styles.css » : différence entre les versions
De Nefald
Autres actions
Page créée avec « →==== 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:... » |
m Fette Unz Fraktur |
||
| (3 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
/* ==== Modèle: | /* ==== Modèle:Police - Styles de texte avancés ==== */ | ||
/* === Couleurs de base === */ | /* === Couleurs de base === */ | ||
. | .police-color { | ||
display: inline; | display: inline; | ||
} | } | ||
. | .police-rouge { color: #dc3545; } | ||
. | .police-bleu { color: #0d6efd; } | ||
. | .police-vert { color: #198754; } | ||
. | .police-jaune { color: #ffc107; } | ||
. | .police-orange { color: #fd7e14; } | ||
. | .police-violet { color: #6f42c1; } | ||
. | .police-rose { color: #d63384; } | ||
. | .police-cyan { color: #0dcaf0; } | ||
. | .police-blanc { color: #ffffff; } | ||
. | .police-gris { color: #6c757d; } | ||
. | .police-noir { color: #000000; } | ||
.police-or { color: #ffd700; } | |||
.police-argent { color: #c0c0c0; } | |||
.police-bronze { color: #cd7f32; } | |||
/* | /* === FAMILLES DE POLICES === */ | ||
.font- | |||
.police-famille-serif { | |||
font-family: Georgia, "Times New Roman", serif; | |||
} | |||
.police-famille-sans { | |||
font-family: Arial, Helvetica, sans-serif; | |||
} | |||
.police-famille-mono { | |||
font-family: "Courier New", Courier, monospace; | |||
} | |||
.police-famille-cursive { | |||
font-family: "Brush Script MT", cursive; | |||
} | |||
.police-famille-fantasy { | |||
font-family: "Comic Sans MS", "Chalkboard SE", fantasy; | |||
} | |||
.police-famille-impact { | |||
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; | |||
} | |||
.police-famille-fraktur { | |||
font-family: "Fette Unz Fraktur", Fette Unz Fraktur, AppleGothic, sans-serif; | |||
} | |||
.police-famille-fraktur-classic { | |||
font-family: "Fette Unz Fraktur Classic", Fette Unz Fraktur Classic, AppleGothic, sans-serif; | |||
} | |||
.police-famille-gothic { | |||
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; | |||
} | |||
.police-famille-palatino { | |||
font-family: Palatino, "Palatino Linotype", "Book Antiqua", serif; | |||
} | |||
.police-famille-garamond { | |||
font-family: Garamond, Baskerville, "Baskerville Old Face", serif; | |||
} | |||
.police-famille-verdana { | |||
font-family: Verdana, Geneva, sans-serif; | |||
} | } | ||
. | .police-famille-trebuchet { | ||
font-family: "Trebuchet MS", "Lucida Grande", sans-serif; | |||
} | } | ||
. | .police-famille-times { | ||
font-family: "Times New Roman", Times, serif; | |||
} | } | ||
/* === EFFETS === */ | /* === EFFETS VISUELS === */ | ||
/* Effet brillant | /* Effet brillant - GLOW PUISSANT */ | ||
. | .police-effet-brillant { | ||
text-shadow: | text-shadow: | ||
0 0 10px currentColor, | 0 0 10px currentColor, | ||
0 0 | 0 0 20px currentColor, | ||
0 0 30px currentColor, | |||
0 0 40px currentColor, | |||
0 0 50px currentColor; | |||
font-weight: bold; | font-weight: bold; | ||
letter-spacing: 1px; | |||
} | } | ||
/* Effet néon */ | /* Effet néon - ULTRA VISIBLE */ | ||
. | .police-effet-neon { | ||
text-shadow: | text-shadow: | ||
0 0 5px | 0 0 5px #fff, | ||
0 0 10px currentColor, | 0 0 10px #fff, | ||
0 0 15px currentColor, | |||
0 0 20px currentColor, | 0 0 20px currentColor, | ||
0 0 30px 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 */ | |||
.police-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; | font-weight: bold; | ||
} | } | ||
/* Effet | /* Effet 3D - PROFONDEUR EXTRÊME */ | ||
. | .police-effet-3d { | ||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | 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 | /* Effet relief - GRAVURE PROFONDE */ | ||
. | .police-effet-relief { | ||
text-shadow: | text-shadow: | ||
2px 2px 0 rgba(255, 255, 255, 0.8), | |||
2px 2px 0 rgba(0, 0, 0, 0. | -2px -2px 0 rgba(0, 0, 0, 0.6), | ||
0 0 5px rgba(0, 0, 0, 0.5); | |||
font-weight: bold; | |||
} | } | ||
/* Effet | /* Effet contour - STROKE ÉPAIS */ | ||
. | .police-effet-contour { | ||
text-shadow: | 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 | /* Effet pulsation - ANIMATION VISIBLE */ | ||
. | .police-effet-pulse { | ||
animation: | animation: police-pulse 1.5s ease-in-out infinite; | ||
font-weight: bold; | |||
} | } | ||
@keyframes | @keyframes police-pulse { | ||
0%, 100% { opacity: 1; } | 0%, 100% { | ||
50% { opacity: 0. | 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 */ | /* Effet clignotant */ | ||
. | .police-effet-clignotant { | ||
animation: | animation: police-blink 1s step-start infinite; | ||
font-weight: bold; | |||
} | } | ||
@keyframes | @keyframes police-blink { | ||
0%, 49% { opacity: 1; } | 0%, 49% { opacity: 1; } | ||
50%, 100% { opacity: 0; } | 50%, 100% { opacity: 0; } | ||
| Ligne 94 : | Ligne 187 : | ||
/* Effet gras */ | /* Effet gras */ | ||
. | .police-effet-gras { | ||
font-weight: | font-weight: 900; | ||
letter-spacing: 1px; | |||
} | } | ||
/* Effet métallique | /* Effet métallique OR - BRILLANCE INTENSE */ | ||
. | .police-or.police-effet-metallique { | ||
color: #ffd700; | color: #ffd700; | ||
text-shadow: | text-shadow: | ||
0 1px 0 # | -1px -1px 0 #b8860b, | ||
1px -1px 0 #b8860b, | |||
1px 0 0 # | -1px 1px 0 #b8860b, | ||
- | 1px 1px 0 #b8860b, | ||
0 0 10px | -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; | font-weight: bold; | ||
letter-spacing: 2px; | |||
} | } | ||
/* Effet métallique | /* Effet métallique ARGENT */ | ||
. | .police-argent.police-effet-metallique { | ||
color: # | color: #e8e8e8; | ||
text-shadow: | text-shadow: | ||
0 1px 0 # | -1px -1px 0 #808080, | ||
1px -1px 0 #808080, | |||
1px 0 0 # | -1px 1px 0 #808080, | ||
- | 1px 1px 0 #808080, | ||
0 0 10px | -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; | font-weight: bold; | ||
letter-spacing: 2px; | |||
} | } | ||
/* Effet métallique | /* Effet métallique BRONZE */ | ||
. | .police-bronze.police-effet-metallique { | ||
color: # | color: #e8a75c; | ||
text-shadow: | text-shadow: | ||
0 1px 0 # | -1px -1px 0 #8b5a2b, | ||
1px -1px 0 #8b5a2b, | |||
1px 0 0 # | -1px 1px 0 #8b5a2b, | ||
- | 1px 1px 0 #8b5a2b, | ||
0 0 10px | -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; | font-weight: bold; | ||
letter-spacing: 2px; | |||
} | } | ||
/* Effet | /* Effet FEU - FLAMMES ANIMÉES */ | ||
. | .police-effet-feu { | ||
color: #ff4500; | color: #ff4500; | ||
text-shadow: | text-shadow: | ||
0 0 10px #ff0000, | 0 0 10px #ff0000, | ||
0 0 20px #ff7f00, | 0 0 20px #ff0000, | ||
0 0 | 0 0 30px #ff4500, | ||
animation: | 0 0 40px #ff7f00, | ||
0 0 50px #ff7f00, | |||
0 0 60px #ffff00; | |||
animation: police-fire 0.5s ease-in-out infinite alternate; | |||
font-weight: bold; | font-weight: bold; | ||
letter-spacing: 2px; | |||
} | } | ||
@keyframes | @keyframes police-fire { | ||
0 | 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 | /* Effet GLACE - CRISTAUX GLACÉS */ | ||
. | .police-effet-glace { | ||
color: #00ffff; | color: #00ffff; | ||
text-shadow: | text-shadow: | ||
0 0 5px #ffffff, | 0 0 5px #ffffff, | ||
0 0 10px # | 0 0 10px #ffffff, | ||
0 0 15px #00ffff, | 0 0 15px #00ffff, | ||
0 0 20px #0099ff; | 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 */ | |||
.police-effet-rainbow { | |||
animation: police-rainbow 3s linear infinite; | |||
font-weight: bold; | |||
letter-spacing: 2px; | |||
text-shadow: | |||
0 0 10px currentColor, | |||
0 0 20px currentColor; | |||
} | |||
@keyframes police-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é | /* Effet dégradé avec glow */ | ||
. | .police-effet-degrade { | ||
text-shadow: | 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; | font-weight: bold; | ||
letter-spacing: 1px; | |||
} | } | ||
Dernière version du 13 novembre 2025 à 06:54
/* ==== Modèle:Police - Styles de texte avancés ==== */
/* === Couleurs de base === */
.police-color {
display: inline;
}
.police-rouge { color: #dc3545; }
.police-bleu { color: #0d6efd; }
.police-vert { color: #198754; }
.police-jaune { color: #ffc107; }
.police-orange { color: #fd7e14; }
.police-violet { color: #6f42c1; }
.police-rose { color: #d63384; }
.police-cyan { color: #0dcaf0; }
.police-blanc { color: #ffffff; }
.police-gris { color: #6c757d; }
.police-noir { color: #000000; }
.police-or { color: #ffd700; }
.police-argent { color: #c0c0c0; }
.police-bronze { color: #cd7f32; }
/* === FAMILLES DE POLICES === */
.police-famille-serif {
font-family: Georgia, "Times New Roman", serif;
}
.police-famille-sans {
font-family: Arial, Helvetica, sans-serif;
}
.police-famille-mono {
font-family: "Courier New", Courier, monospace;
}
.police-famille-cursive {
font-family: "Brush Script MT", cursive;
}
.police-famille-fantasy {
font-family: "Comic Sans MS", "Chalkboard SE", fantasy;
}
.police-famille-impact {
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.police-famille-fraktur {
font-family: "Fette Unz Fraktur", Fette Unz Fraktur, AppleGothic, sans-serif;
}
.police-famille-fraktur-classic {
font-family: "Fette Unz Fraktur Classic", Fette Unz Fraktur Classic, AppleGothic, sans-serif;
}
.police-famille-gothic {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.police-famille-palatino {
font-family: Palatino, "Palatino Linotype", "Book Antiqua", serif;
}
.police-famille-garamond {
font-family: Garamond, Baskerville, "Baskerville Old Face", serif;
}
.police-famille-verdana {
font-family: Verdana, Geneva, sans-serif;
}
.police-famille-trebuchet {
font-family: "Trebuchet MS", "Lucida Grande", sans-serif;
}
.police-famille-times {
font-family: "Times New Roman", Times, serif;
}
/* === EFFETS VISUELS === */
/* Effet brillant - GLOW PUISSANT */
.police-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 */
.police-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 */
.police-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 */
.police-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 */
.police-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 */
.police-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 */
.police-effet-pulse {
animation: police-pulse 1.5s ease-in-out infinite;
font-weight: bold;
}
@keyframes police-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 */
.police-effet-clignotant {
animation: police-blink 1s step-start infinite;
font-weight: bold;
}
@keyframes police-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* Effet gras */
.police-effet-gras {
font-weight: 900;
letter-spacing: 1px;
}
/* Effet métallique OR - BRILLANCE INTENSE */
.police-or.police-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 */
.police-argent.police-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 */
.police-bronze.police-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 */
.police-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: police-fire 0.5s ease-in-out infinite alternate;
font-weight: bold;
letter-spacing: 2px;
}
@keyframes police-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 */
.police-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 */
.police-effet-rainbow {
animation: police-rainbow 3s linear infinite;
font-weight: bold;
letter-spacing: 2px;
text-shadow:
0 0 10px currentColor,
0 0 20px currentColor;
}
@keyframes police-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 */
.police-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;
}