Effet halo lumineux sur les liens des titre des forums

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Effet halo lumineux sur les liens des titre des forums

Message par Laura Epone le Sam 18 Sep 2010 - 18:10

    Bonjour - Bonsoir à toutes & tous ^__^
    Voilà, j'aurais simplement voulus savoir comment il fallait faire pour avoir une sorte de halo lumineux autour du lien au passage de la souris. Petit exemple avec ce forum, dont les liens des titres des forums ont l'effet recherché : http://carpe-noctem.1fr1.net/forum.htm . Ce n'est pas la première fois que je vois ce principe, qui me plait beaucoup =)

    J'aurais voulus faire la même chose sur mon forum : http://www.harrypotterrpg.net/forum.htm
    La couleur de mes liens est BLANC (#FFFFFF), mais j'ai changer celle du titre de mes forums en OR (#D2B419) (manuellement, via code HTML)
    Exemple :
    Code:
    <blockquote><font color=#D2B419>Pour commencer ...</font></blockquote>

    Je suis sous PHPBB2, mes templates sont modifiées (index_body ; overall_header ; topics_list_box ; viewtopic_body)
    Voici ma Feuille de Style CSS actuelle :
    Code:
    .statistiques
    {border:0px;
    background-image: url("http://img37.imageshack.us/img37/6167/qeel1t.png");
    background-repeat: no-repeat;
    background-position: center;
    height:359px;}

    .groupes{
    background-color:#262626;border: 1px #C0C0C0 dotted;
    -moz-border-radius : 5px 5px 5px 5px;
    height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
    font-size:15px;font-weight: bold;text-align:center;
    text-decoration: none !important;}

    a { text-decoration: none; }


    body {
        background-position: top center;
        background-repeat: no-repeat;
    }

    input,textarea, select {
    color : #C0C0C0;
    background-color:#1F1F1F;
    }

    .bodyline{
    border-top: none;
    border-bottom: none;
    }
    body {
    margin: 0 auto;
    }

    a:link {letter-spacing: 1px; text-shadow: #000000 1px 1px 1px;}
    a:visited {letter-spacing: 1px; text-shadow: #000000 1px 1px 1px;}
    a:hover {letter-spacing: 1px; text-shadow: #000000 1px 1px 1px;}
    a:active {letter-spacing: 1px; text-shadow: #000000 1px 1px 1px;}
    a{outline: none;}


    .chatbox_row_1, .chatbox_row_2, .chatbox_row_3 {
    font-size:14px;}

    Encore une fois, merci d'avance I love you


Dernière édition par Laura Epone le Dim 19 Sep 2010 - 16:36, édité 1 fois

Laura Epone
**

Féminin
Messages : 61
Inscrit(e) le : 22/06/2007

http://harrypotterrpg.forums-actifs.net
Laura Epone a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet halo lumineux sur les liens des titre des forums

Message par Sen Hime le Dim 19 Sep 2010 - 15:54

Il s'agit d'un code du CSS3 (qui ne marche pas encore sur tous les navigateurs), dont la syntaxe de base est la suivante :
Code:
#text-shadow {
    text-shadow: #555 4px 4px 4px;
}

Le code suivant devrait donc permettre d'obtenir ce que vous voulez sur votre forum :
Code:
a:hover /* par défaut: halo blanc */
{
 text-shadow: white 0px 0px 4px;
}
a.forumlink:hover /* pour les liens des titres : halo doré */
{
  text-shadow: #d2b419 0px 0px 4px;
}
À adapter comme vous le souhaitez ^^

Sen Hime
****

Féminin
Messages : 243
Inscrit(e) le : 24/03/2009

http://hyrulesjourney.fr-bb.com
Sen Hime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet halo lumineux sur les liens des titre des forums

Message par Laura Epone le Dim 19 Sep 2010 - 16:36

Merci beaucoup, cela fonctionne à merveille ♥

Laura Epone
**

Féminin
Messages : 61
Inscrit(e) le : 22/06/2007

http://harrypotterrpg.forums-actifs.net
Laura Epone a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum