RPG - Entraide

Forum d'entraide pour forum de jeux de rôles et autre forums en tous genres!
 

Partagez|

Effets codes, polices, citations... [CSS]

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
avatar
Dan
Fondateur
Messages : 87
Points Entraide : 15118
Date d'inscription : 13/09/2009
Localisation : Ne regarde pas derrière toi, l'ombre pourrais ne pas être la tienne!
MessageSujet: Effets codes, polices, citations... [CSS] Jeu 3 Déc - 19:40

Citation :
Effets Citations, Spoilers et Codes [CSS]



    Pour donner un effet à vos citations, spoilers et vos codes, voici les codes CSS que vous pouvez modifier à votre guise.




    Code:
    .quote { background-color: #COULEUR;
    -moz-border-radius:20px; border-bottom: 3px #86d86d solid;
    }
    .code { background-color: #COULEUR;
    -moz-border-radius:20px; border-bottom: 3px #86d86d solid;
    }




    radius = taille de la courbe des coins
    border-bottom = taille de "l'ombre" sous les citations et etc, ainsi que sa couleur.


    D'abord, qu'est-ce qu'une info-bulle? C'est une image qui apparait lors du passage de votre curseur sur une image en particulier. Comme ceci :




    Spoiler:
     




    Comment faire? D'abord, ajoutez ce code à votre feuille de CSS




    Code:
    a.imginfo {
    position: relative;
    color: #7d7d7d; /* couleur de votre texte */
    text-decoration: none;
    border-bottom: 0px #7d7d7d solid; /* on souligne le texte */
    }

    a.imginfo span {
    display: none; /* on masque l'infobulle */
    }
    a.imginfo:hover {
    background: none; /* correction d'un bug IE */
    z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
    cursor: help; /* on change le curseur par défaut en curseur d'aide */
    }
    a.imginfo:hover span {
    display: inline; /* on affiche l'infobulle */
    position: absolute;
    white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
    top: 30px; /* on positionne notre infobulle */
    left: 20px;
    background: white;
    color: 7d7d7d; /* votre couleur de fond */
    padding: 3px;
    border: 0px solid grey;
    border-left: 5px solid #b6b6b6; /* vos couleurs et taille de bordures */
    border-right: 3px solid #b6b6b6;
    border-top: 3px solid #b6b6b6;
    border-bottom: 5px solid #b6b6b6;
    }




    Et voici le code à ajouter dans votre html (page accueil par exemple




    Code:

    <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="IMAGE PRINCIPALE"/></font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><font size="1">TEXTE PRINCIPAL</font><br/></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="IMAGE DANS LA BULLE"/></a></td></tr><tr><td style="text-align: center;"><font size="1">TEXTE DANS LA BULLE<br/></font></td></tr><tr align="center"/></tbody></table></span></a>




</SPAN>

_________________
SVP! Nourrissez mon Danounet!
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://three-csi.forumactif.com

Effets codes, polices, citations... [CSS]

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1
Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
RPG - Entraide :: Pour vos forums! :: Codes CSS pour vos forums-