Basculer la recherche
Basculer le menu
49
1.9K
9
3.9K
Nefald
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

« Modèle:Police/styles.css » : différence entre les versions

De Nefald
Autres actions
Navigation interactive dans l’historique
Modification suivante →
Hiob (discussion | contributions)
owner
3 142 modifications
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:... »
 
Hiob (discussion | contributions)
owner
3 142 modifications
mAucun résumé des modifications
Ligne 19 : Ligne 19 :


/* Couleurs métalliques */
/* Couleurs métalliques */
.font-or {  
.font-or { color: #ffd700; }
    color: #ffd700;  
.font-argent { color: #c0c0c0; }
}
.font-bronze { color: #cd7f32; }
 
.font-argent {  
    color: #c0c0c0;  
}
 
.font-bronze {  
    color: #cd7f32;  
}


/* === EFFETS === */
/* === EFFETS AMÉLIORÉS === */


/* Effet brillant (glow) */
/* Effet brillant - GLOW PUISSANT */
.font-effet-brillant {
.font-effet-brillant {
     text-shadow:  
     text-shadow:  
        0 0 5px currentColor,
         0 0 10px currentColor,
         0 0 10px currentColor,
         0 0 15px currentColor;
         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 */
.font-effet-neon {
.font-effet-neon {
     text-shadow:  
     text-shadow:  
         0 0 5px currentColor,
         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;
     font-weight: bold;
    letter-spacing: 2px;
}
}


/* Effet ombre */
/* Effet ombre portée - MARQUÉE */
.font-effet-ombre {
.font-effet-ombre {
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
     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 */
/* Effet 3D - PROFONDEUR EXTRÊME */
.font-effet-3d {
.font-effet-3d {
     text-shadow:  
     text-shadow:  
         1px 1px 0 rgba(0, 0, 0, 0.2),
         1px 1px 0 rgba(0, 0, 0, 0.3),
         2px 2px 0 rgba(0, 0, 0, 0.2),
         2px 2px 0 rgba(0, 0, 0, 0.3),
         3px 3px 0 rgba(0, 0, 0, 0.2),
         3px 3px 0 rgba(0, 0, 0, 0.3),
         4px 4px 0 rgba(0, 0, 0, 0.2);
         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 */
/* Effet relief - GRAVURE PROFONDE */
.font-effet-relief {
.font-effet-relief {
     text-shadow:  
     text-shadow:  
         1px 1px 0 rgba(255, 255, 255, 0.5),
         2px 2px 0 rgba(255, 255, 255, 0.8),
         -1px -1px 0 rgba(0, 0, 0, 0.3);
         -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) */
/* Effet pulsation - ANIMATION VISIBLE */
.font-effet-pulse {
.font-effet-pulse {
     animation: font-pulse 2s ease-in-out infinite;
     animation: font-pulse 1.5s ease-in-out infinite;
    font-weight: bold;
}
}


@keyframes font-pulse {
@keyframes font-pulse {
     0%, 100% { opacity: 1; }
     0%, 100% {  
     50% { opacity: 0.5; }
        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;
    }
}
}


Ligne 86 : Ligne 122 :
.font-effet-clignotant {
.font-effet-clignotant {
     animation: font-blink 1s step-start infinite;
     animation: font-blink 1s step-start infinite;
    font-weight: bold;
}
}


Ligne 95 : Ligne 132 :
/* Effet gras */
/* Effet gras */
.font-effet-gras {
.font-effet-gras {
     font-weight: bold;
     font-weight: 900;
    letter-spacing: 1px;
}
}


/* Effet métallique or (simulation sans gradient) */
/* Effet métallique OR - BRILLANCE INTENSE */
.font-or.font-effet-metallique {
.font-or.font-effet-metallique {
     color: #ffd700;
     color: #ffd700;
     text-shadow:  
     text-shadow:  
         0 1px 0 #ffed4e,
         -1px -1px 0 #b8860b,
         0 -1px 0 #b8860b,
        1px -1px 0 #b8860b,
         1px 0 0 #ffed4e,
         -1px 1px 0 #b8860b,
         -1px 0 0 #b8860b,
         1px 1px 0 #b8860b,
         0 0 10px rgba(255, 215, 0, 0.5);
        -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 argent */
/* Effet métallique ARGENT */
.font-argent.font-effet-metallique {
.font-argent.font-effet-metallique {
     color: #c0c0c0;
     color: #e8e8e8;
     text-shadow:  
     text-shadow:  
         0 1px 0 #f0f0f0,
         -1px -1px 0 #808080,
         0 -1px 0 #808080,
        1px -1px 0 #808080,
         1px 0 0 #f0f0f0,
         -1px 1px 0 #808080,
         -1px 0 0 #808080,
         1px 1px 0 #808080,
         0 0 10px rgba(192, 192, 192, 0.5);
        -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 bronze */
/* Effet métallique BRONZE */
.font-bronze.font-effet-metallique {
.font-bronze.font-effet-metallique {
     color: #cd7f32;
     color: #e8a75c;
     text-shadow:  
     text-shadow:  
         0 1px 0 #e8a75c,
         -1px -1px 0 #8b5a2b,
         0 -1px 0 #8b5a2b,
        1px -1px 0 #8b5a2b,
         1px 0 0 #e8a75c,
         -1px 1px 0 #8b5a2b,
         -1px 0 0 #8b5a2b,
         1px 1px 0 #8b5a2b,
         0 0 10px rgba(205, 127, 50, 0.5);
        -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 feu */
/* Effet FEU - FLAMMES ANIMÉES */
.font-effet-feu {
.font-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 30px #ffff00;
        0 0 30px #ff4500,
     animation: font-flicker 1.5s ease-in-out infinite;
        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;
     font-weight: bold;
    letter-spacing: 2px;
}
}


@keyframes font-flicker {
@keyframes font-fire {
     0%, 100% { opacity: 1; }
     0% {  
     25%, 75% { opacity: 0.9; }
        text-shadow:  
     50% { opacity: 0.95; }
            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 */
/* Effet GLACE - CRISTAUX GLACÉS */
.font-effet-glace {
.font-effet-glace {
     color: #00ffff;
     color: #00ffff;
     text-shadow:  
     text-shadow:  
         0 0 5px #ffffff,
         0 0 5px #ffffff,
         0 0 10px #00ffff,
         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 dégradé - simple transition de couleur via ombre */
/* 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 {
.font-effet-degrade {
     text-shadow:  
     text-shadow:  
         1px 1px 2px rgba(0, 0, 0, 0.1),
         0 0 5px currentColor,
        0 0 10px 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;
}
}
Récupérée de "https://wiki.nefald.fr/Modèle:Police/styles.css"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.