• Personnalisation des infobulles

    Comme indiqué dans le titre, aujourd'hui je vais vous montrer comment personnaliser l'infobulle (survolez pour voir l'effetRegardez, j'ai une superbe infobulle personnalisée !) avec quelques exemples.

    C'est partiiiiiii !

    Voici déjà le sélecteur de base :

    #help_bubble {propriété: valeur;}

    Et voici comment la personnaliser :

    Les bordures :

    #help_bubble {border: (taille en pixels)px (type de bordure (solid pour une bordure normale)) (couleur en HTML);}

    La couleur des bordures :

    #help_bubble {border-color: (couleur en HTML);}

    La couleur du texte :

    #help_bubble {color: (couleur en HTML);}

    Le fond (avec une couleur) :

    #help_bubble {background: (couleur en HTML);}

    Le fond (avec une image) :

    #help_bubble {background: url('(url de votre fond)');}

    Les coins arrondis (pour changer l’arrondissement) :

    #help_bubble {border-radius: (taille des coins arrondis en pixels (plus le nombre sera élevé, plus les coins seront arrondis))px;}

    La police :

    #help_bubble {font-family: (police);}

    Taille du texte :

    #help_bubble {font-size: (taille du texte en pixels)px;}

    Donc c'est bien là, mais avec un petit exemple ce sera mieux non ?

    Donc essayons de personnaliser notre infobulle comme celle d'EklaFastoche !

    Dans l'infobulle du blog il y a eu cinq modifications :

    Infobulle de base

    • Ajout de coins arrondis
    • Changement de bordures
    • Changement de la couleur du texte
    • Changement de la couleur du fond
    • Changement de la police

    Voici le code pour y procéder :

    #help_bubble {border: 1px solid #8C8C8C; /* défini la bordure */
        color:#8C8C8C; /* change la couleur du texte */
        font-family: 'Open Sans', sans-serif; /* change la police */
        background: #E5E5E5; /* change le fond */
        border-radius: 5px;/* ajoute des coins arrondis */}

    Et voilà !


    Tags Tags :
  • Commentaires

    1
    Jeudi 2 Septembre 2021 à 18:01

    Bonjour ^^ Alors déjà merci pour ce tuto ;-)
    Les coins arrondis ne fonctionnent pas :/

    Je te montre mon code : 

     

    #help_bubble {
        border0.5px solid #43486D ;
    color:#43486D 
    background:#e8dca2 ;
    border-radius5xp ;
    font-familyCourier New 
    font-size10xp }

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    2
    Jeudi 2 Septembre 2021 à 18:02

    Bonjour ^^ Alors déjà merci pour ce tuto ;-)
    Les coins arrondis ne fonctionnent pas :/

    Je te montre mon code : 

     

    #help_bubble {
        border0.5px solid #43486D ;
    color:#43486D 
    background:#e8dca2 ;
    border-radius5xp ;
    font-familyCourier New 
    font-size10xp }

      • Jeudi 2 Septembre 2021 à 18:02

        (désolée ça a envoyé 2 fois :/

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Veuillez activer le Javascript pour naviguer correctement sur EklaFastoche
Cet article vous a-t-il aidé ?