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.

-20%
Le deal à ne pas rater :
-20% sur le Lot de 2 écrans PC GIGABYTE 27″ LED M27Q
429 € 539 €
Voir le deal
Le Deal du moment : -20%
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q ...
Voir le deal
749 €

    Fiche règlement avec transition (CSS + HTML)

    Yukimura Esuki
    Yukimura Esuki
    MasculinAge : 28Messages : 131

    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
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 21 Déc 2016 - 4:46

    Salut!

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



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    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:

    On aura plus qu'à rajouter les bons tags, indexer et déplacer le sujet Wink

    Anonymous
    Invité

    Sam 11 Mar 2017 - 16:56

    Merci pour le partage !
    Jenova
    Jenova
    MasculinAge : 29Messages : 153

    Dim 17 Sep 2017 - 19:53

    J'adore !



    Fiche règlement avec transition (CSS + HTML) I3k3
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 13:45