• Titre du header en dégradé


    Lundi 6 Mai 2019 à 11:21
    Amber Flynn

    Petite découverte avec l'aide de Kalyna! J'ai pu réussir à mettre mon titre en deux couleur fondu ensemble ainsi qu'un contour pour donner un style 3D aux lettres. Pour se faire, il faut d'abord mettre le sélecteur qui est #Titre_header a (Le ¨a¨ indique toujours un lien) et le code CSS s'écrit comme suit: 


    #titre_header a {     
    font-size: XXpt; (La valeur en rouge est modifiable)
    background: -webkit-linear-gradient(#XXXXXX, #XXXXXX); (Numéro de la couleur) 
    -webkit-background-clip: text;   
    -webkit-text-fill-color: transparent;}

     

    Si vous voulez ajouté un contour comme moi autour des lettres vous devez ajouter ceci:

    -webkit-filter: drop-shadow(XXpx XXpx #XXXXXX)(La valeur en rouge est modifiable)
    filter: drop-shadow(XXpx XXpx #XXXXXX(La valeur en rouge est modifiable)

     

    Et donc finalement le code complet s'écrit comme suit:

    #titre_header a {     
    font-size: XXpt;
    background: -webkit-linear-gradient(#XXXXXX, #XXXXXX);
    -webkit-background-clip: text;   
    -webkit-text-fill-color: transparent;
    -webkit-filter: drop-shadow(XXpx XXpx #XXXXXX);
    filter: drop-shadow(XXpx XXpx #XXXXXX);}

     

    À vous maintenant d'essayer les possibilités pour pouvoir avoir un joli résultat!

     

    * NE FONCTIONNE PAS SUR INTERNET EXPLORER!

      

     




    Vous devez être membre pour poster un message.