AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Xiaomi Mi Smart Camera 2K Standard Edition (design compact / support ...
11.39 €
Voir le deal

    Sésame, ouvre-toi !

    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mar 17 Mar 2015 - 13:25


    Sésame, ouvre-toi !


    Suite à une demande de Blem voici une PA avec effets au passage de la souris.

    Je précise que l'arrière plan gris clair correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www & au passage de la souris ~ phpBB2


    Et le code :
    HTML :
    Code:
    <div class="PA_fond">
    <div class="PA_guide"><div class="PA_titre">Guide</div><div class="infobulle1"><div class="PA_titre">Guide</div><p class="PA_txt1">-Règlement <br />
    -Contexte<br />
    -Autre...<br /></p></div></div>
    <div class="PA_contexte"><div class="PA_titre">Contexte</div><div class="infobulle2"><div class="PA_titre">Contexte</div><p class="PA_txt1">Texte ici
    </p></div></div>
    <div class="PA_partenaire"><div class="PA_titre">Partoche</div><div class="infobulle3"><div class="PA_titre">Partoche</div><div class="PA_img"><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> </div></div></div>
    <div class="PA_predefini"><div class="PA_titre">Predef</div><div class="infobulle4"><div class="PA_titre">Predef</div><div class="PA_img"><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> </div></div></div>
    <div class="PA_annonce"><div class="PA_titre">Annonce</div><div class="infobulle5"><div class="PA_titre">Annonce</div><p class="PA_txt3">-Machin a gagné le LPA X<br />
    -Truc a participé à chose W<br /></p><a href="http://www.never-utopia.com" class="PA_credit">A-Lice | Never-Utopia</a></div></div>
    <div class="PA_new"><div class="PA_titre">News</div><div class="infobulle6"><div class="PA_titre">News</div><p class="PA_txt2">00/00/00 : Blablabla<br />
    00/00/00 : Blablabla<br /></p></div></div>
    <div class="PA_staff"><div class="PA_titre">Staff</div><div class="infobulle7"><div class="PA_titre">Staff</div><div class="PA_img"><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <br /><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> </div></div></div>
    </div>


    CSS :
    Code:
    .PA_fond {
    position: relative;
    width: 685px;
    height: 350px;
    margin: auto;
    background: white;
    font-size: 14px;
    }

    .PA_guide {
    position: absolute;
    width: 159px;
    height: 259px;
    padding: 3px;
    background: silver;
    left: 5px;
    text-align: justify;
    }

    .PA_guide .infobulle1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 159px;
    height: 259px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    padding: 3px;
    text-align: justify;
    }

    .PA_guide:hover .infobulle1 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_contexte {
    position: absolute;
    width: 159px;
    height: 259px;
    padding: 3px;
    background: silver;
    left: 175px;
    text-align: justify;
    }

    .PA_contexte .infobulle2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 159px;
    height: 259px;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    text-align: justify;
    }

    .PA_contexte:hover .infobulle2 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_partenaire {
    position: absolute;
    width: 329px;
    height: 74px;
    padding: 3px;
    background: silver;
    left: 345px;
    text-align: justify;
    }

    .PA_partenaire .infobulle3 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 329px;
    height: 74px;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    text-align: justify;
    }

    .PA_partenaire:hover .infobulle3 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_predefini {
    position: absolute;
    width: 329px;
    height: 74px;
    padding: 3px;
    background: silver;
    top: 270px;
    left: 5px;
    text-align: justify;
    }

    .PA_predefini .infobulle4 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 329px;
    height: 74px;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    text-align: justify;
    }

    .PA_predefini:hover .infobulle4 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_annonce {
    position: absolute;
    width: 159px;
    height: 259px;
    padding: 3px;
    background: silver;
    left: 345px;
    top: 85px;
    text-align: justify;
    }

    .PA_annonce .infobulle5 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 159px;
    height: 259px;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    text-align: justify;
    }

    .PA_annonce:hover .infobulle5 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_new {
    position: absolute;
    width: 159px;
    height: 124px;
    padding: 3px;
    background: silver;
    left: 515px;
    top: 85px;
    text-align: justify;
    }

    .PA_new .infobulle6 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 159px;
    height: 124px;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    text-align: justify;
    }

    .PA_new:hover .infobulle6 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_staff {
    position: absolute;
    width: 159px;
    height: 124px;
    padding: 3px;
    background: silver;
    left: 515px;
    top: 220px;
    text-align: justify;
    }

    .PA_staff .infobulle7 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 159px;
    height: 124px;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    text-align: justify;
    }

    .PA_staff:hover .infobulle7 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_titre {
    text-indent: 20px;
    font-size: 25px;
    position: relative;
    z-index: 20;
    }

    .PA_img {
    margin-top: -5px;
    position: relative;
    z-index: 10;
    }

    .PA_txt1 {
    overflow: auto;
    height: 209px;
    }

    .PA_txt2 {
    overflow: auto;
    height: 74px;
    }

    .PA_txt3 {
    overflow: auto;
    height: 190px;
    }

    a.PA_credit {
    text-decoration: none;
    font-size: 12px;
    color: white;
    display: block;
    text-align: center;
    }


    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.

    Madras
    Madras
    FémininAge : 39Messages : 285

    Ven 3 Avr 2015 - 8:09

    Merci
    Dark Fairy
    Dark Fairy
    FémininAge : 26Messages : 244

    Sam 4 Avr 2015 - 11:50

    Merci!
    Chocolakato
    Chocolakato
    FémininAge : 33Messages : 837

    Jeu 21 Mai 2015 - 21:52

    Ouiii! Merciii !



    Haniwa
    Haniwa
    FémininAge : 29Messages : 206

    Ven 5 Juin 2015 - 1:04

    Merci
    Dydy
    Dydy
    FémininAge : 33Messages : 493

    Ven 12 Juin 2015 - 12:51

    merci du partage! ^^



    Sésame, ouvre-toi !  27978_signature_never_utopia_dydy_2
    allcl
    allcl
    FémininAge : 24Messages : 81

    Mer 1 Juil 2015 - 11:26

    Merci
    Lily Andrew
    Lily Andrew
    FémininAge : 20Messages : 17

    Mer 9 Sep 2015 - 16:00

    Merkii :3
    Anonymous
    Invité

    Jeu 10 Sep 2015 - 19:01

    Merci ! [○・`Д´・○]
    Heah92
    Heah92
    FémininAge : 26Messages : 89

    Ven 25 Sep 2015 - 20:39

    MERCI
    Moro-PM
    Moro-PM
    FémininAge : 21Messages : 149

    Sam 26 Sep 2015 - 15:47

    Merci !
    Apolarione
    Apolarione
    MasculinAge : 25Messages : 5

    Sam 13 Fév 2016 - 18:52

    merci
    Rudcash
    Rudcash
    MasculinAge : 23Messages : 17

    Mar 26 Avr 2016 - 16:34

    Merci
    Dacina moe
    Dacina moe
    FémininAge : 45Messages : 171

    Ven 17 Juin 2016 - 20:36

    merci elle est tres simple et bien :)
    Reckoner
    Reckoner
    FémininAge : 30Messages : 36

    Lun 18 Juil 2016 - 22:48

    Wow, cette PA vient de me donner une inspiration du tonnerre de Zeus!
    Merci beaucoup A-Lice !
    Océ
    Océ
    FémininAge : 49Messages : 363

    Ven 29 Juil 2016 - 11:56

    Très jolie et merci

    Furagu
    Furagu
    MasculinAge : 33Messages : 19

    Dim 31 Juil 2016 - 23:19

    Mercii
    Demowee
    Demowee
    MasculinAge : 27Messages : 46

    Mar 30 Aoû 2016 - 20:20

    Merci o/
    Wiss
    Wiss
    FémininAge : 19Messages : 53

    Mer 31 Aoû 2016 - 14:12

    Merci !



    Sésame, ouvre-toi !  Wiss11
    Autre signa:
    Marion Navi
    Marion Navi
    FémininAge : 30Messages : 183

    Sam 3 Sep 2016 - 11:56

    merci
    Lughnassadh
    Lughnassadh
    FémininAge : 33Messages : 27

    Mar 6 Sep 2016 - 22:02

    Merci !
    Bryan1997
    Bryan1997
    MasculinAge : 26Messages : 51

    Ven 4 Nov 2016 - 2:02

    Merci
    Nekrofyre
    Nekrofyre
    MasculinAge : 24Messages : 33

    Mar 8 Nov 2016 - 23:16

    merci
    Solitude
    Solitude
    FémininAge : 48Messages : 294

    Dim 13 Nov 2016 - 10:30

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Sésame, ouvre-toi !  Sign510
    Tink ♥
    Tink ♥
    FémininAge : 31Messages : 66

    Lun 14 Nov 2016 - 23:01

    Elle st cool ^^
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 0:55