AccueilFAQRechercherMembresGroupesS'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.


    Fiche règlement avec transition (CSS + HTML)

    Partagez
    avatar
    Yukimura Esuki
    MasculinAge : 21Messages : 120

    le Ven 7 Oct 2016 - 22:05



    Bonjour à tous mes amis ! Voici ma première fiche, en espérant que cela vous plaise !



    Tout d'abord, vous devez savoir que cette fiche se décompose en deux parties. Une partie CSS qui sera à ajouter dans la feuille de style CSS de votre forum et une seconde partie HTML qui devra être mise dans votre sujet à poster.

    CSS


    Le code CSS est à ajouter dans le Panneau d'Administration > Affichage > Couleurs > Feuille de style CSS

    Code:
    /* FICHE DE REGLEMENT
      par Yukimura Esuki sur Never Utopia
    */
    .fond_premier {
        margin: auto;
        width: 600px; /* largeur image */
        height: 300px; /* hauteur image */
        overflow: hidden;
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .image_fond {
        width: 600px; /* largeur image */
        height: 300px; /* hauteur image */
        position: relative;
        z-index: 2;
        transition: 1s;
    }

    .sous_image {
        width: 600px; /* largeur image */
        height: 300px; /* hauteur image */
        margin-top: -300px; /* hauteur image */
        position: relative;
        z-index: 1;
    }

    .fond_premier:hover .image_fond {
        transform: translateX(100%);
        transition: 1s;
    }


    .fond_secondaire {
        margin: auto;
        width: 600px;
        border: solid 1px black;
        box-sizing: border-box;
        background-color: #545454;
    }

    .sous_titre {
        margin: auto;
        padding-top: 5px;
        padding-bottom: 15px;
        border-top: dotted 1px black;
        border-bottom: dotted 1px black;
        background-color: #A5A5A5;
        font-size: 20px;
        text-align: center;
        box-shadow: 0px 3px 3px black;
    }

    .texte_cadre_reglement {
        padding: 5px;
        margin: auto;
        width: 75%;
        height: 110px;
        border: dotted 1px black;
        background-color: #A5A5A5;
        box-shadow: 3px 3px 3px black;
        text-align: justify;
        font-size: 13px;
        color: white;
        overflow: auto;
    }

    /* FIN fiche de reglement */


    HTML


    Code:
    <div class="fond_premier"><div class="image_fond"><img src="http://img4.hostingpics.net/pics/928018imagedessus.png" /></div><div class="sous_image"><img src="http://img4.hostingpics.net/pics/961039Imagedesousrglement.png" /></div></div><div class="fond_secondaire">

    <div class="sous_titre">1° / Premier sous-titre</div>

    <div class="texte_cadre_reglement">Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.

    Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.
    </div>


    <div class="sous_titre">2° / Second sous-titre</div>

    <div class="texte_cadre_reglement">Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.

    Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.
    </div>

    </div>

    Vous devez savoir que l'image mesure 600 pixels * 300 pixels
    avatar
    Onyx
    FémininAge : 23Messages : 3049

    le Mer 21 Déc 2016 - 4:46

    Salut!

    J'ai vu l'icône "en cours", est-ce que le code est terminé?



    avatar
    Nihil Scar Winspeare
    Messages : 4809

    le Sam 11 Mar 2017 - 16:10

    Comme on n'a pas de nouvelles, j'ai testé le code qui a l'air de bien fonctionner, et j'ai juste retiré quelques petites choses inutiles du CSS (par exemple, la classe "texte_cadre_contexte" n'est pas utilisé, j'ai enlevé les transform qui ne servaient pas, pour alléger :) )

    Merci pour ton partage Yukimura :hug:
    ancien css:
    Code:
    .fond_premier {margin: auto; width: 600px; height: 300; overflow: hidden; background-color: #ffffff; box-sizing : border-box;}
    .image_fond {width: 600px; height: 300px; margin-left: 0px; position: relative; z-index: 2; transform: all; -moz-transform: all; -o-transform: all; -htm-transform: all; -webkit-transform: all; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s;}
    .fond_premier:hover .image_fond {margin-left: 600px; transform: all; -moz-transform: all; -o-transform: all; -htm-transform: all; -webkit-transform: all; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s;}
    .sous_image {width: 600px; height: 300px; margin-top: -300px; position: relative; z-index: 1;}
    .fond_secondaire {margin: auto; width: 600px; border: solid 1px black; box-sizing: border-box; background-color: #545454;}
    .sous_titre {margin: auto; padding-top: 5px; padding-bottom; 5px; width: 598px; height: 25px; border-top: dotted 1px black; border-bottom: dotted 1px black; background-color: #A5A5A5; font-size: 20px; text-align: center; box-shadow: 0px 3px 3px black;}
    .texte_cadre_reglement {padding: 5px;margin: auto; width: 75%; height: 110px; border: dotted 1px black; background-color: #A5A5A5; box-shadow: 3px 3px 3px black; text-align: justify; font-size: 13px; color: white; overflow: auto;}
    .texte_cadre_contexte {padding: 10px;margin: auto; width: 75%; height: 400px; border: dotted 1px black; background-color: #A5A5A5; box-shadow: 3px 3px 3px black; text-align: justify; font-size: 13px; color: white; overflow: auto;}

    On aura plus qu'à rajouter les bons tags, indexer et déplacer le sujet Wink
    En ligne
    avatar
    Kelalin
    FémininAge : 25Messages : 1709

    le Sam 11 Mar 2017 - 16:56

    Merci pour le partage !
    avatar
    Jenova
    MasculinAge : 23Messages : 126

    le Dim 17 Sep 2017 - 19:53

    J'adore !



    Contenu sponsorisé


      La date/heure actuelle est Jeu 23 Nov 2017 - 17:26