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 de présentation - Steampunk et vieux livre

    Partagez
    avatar
    Shaneliae
    FémininAge : 20Messages : 786

    le Mar 19 Mai 2015 - 16:02


    Fiche de présentation de style Steampunk à effet "livre"



    Bonjour à vous !

    Je vous présente ci-dessous un LS fait à partir d'une demande de Matthew Williams.

    Nous avons donc ici une fiche de présentation de style "steampunk" avec un effet "vieux livre". Nous avons donc une première couverture qui recouvre la présentation et quand on passe le curseur sur la couverture on obtient la présentation. Bref ! Assez parlé, voici les visuels !

    Le contour bleu foncé des screens ci-dessous correspondent au fond actuel de mon forum test.
    Ici, un aperçu de la présentation au repos.
    Maintenant, la présentation "ouverte"
    Et enfin, lorsque l'on passe le curseur sur les différentes catégories.
    Il y a aussi un effet en hover sur les URL.

    Pour voir la fiche en direct


    Informations complémentaires



    Je propose deux versions de ce LS : une pour les admin qui vont placer les codes dans leur feuille de style CSS, et une pour les membres lambda qui souhaitent poster une présentation avec un style particulier.

    La présentation fait en tout 530*950 px (530px de largeur, et 950 de hauteur).
    Les petites images font 120*200px et sont codées pour ne faire que cette taille. Mettez donc des images de cette dimension, ou si elles sont plus grandes, avec un rapport de taille équivalent.

    La fiche est entièrement en HTML, vérifié donc que le HTML n'est pas désactivé dans vos messages et sur votre forum !

    Le crédit vers Never Utopia ne doit pas être retiré !


    Fiche officielle avec CSS



    Le CSS



    Code:
    /***** Fiche de présentation Steampunk-livre *****/

    .couverture_livre {
      background-image: url('http://i19.servimg.com/u/f19/18/91/36/39/couver10.jpg');
      width: 530px;
      height: 950px;
      margin: auto;
      transform: all;
      -webkit-transform: all;
      transition: 2s;
      webkit-transition: 2s;
      position: relative;
    }

    .couverture_livre:hover {
      transform: all;
      -webkit-transform: all;
      transition: 2s;
      -webkit-transition: 2s;
      z-index: 5;
    }

    .page_livre {
      color: #1F140B;
      font-family: courrier new;
      text-align: justify;
      background-image: url('http://i19.servimg.com/u/f19/18/91/36/39/page_s10.jpg');
      width: 530px;
      height: 950px;
      margin: auto;
      position: relative;
      display: block;
      opacity: 0;
      transform: all;
      -webkit-transform: all;
      transition: 2s;
      webkit-transition: 2s;
      z-index: 1;
    }

    .page_livre:hover {
      opacity: 1;
      transform: all;
      -webkit-transform: all;
      transition: 2s;
      webkit-transition: 2s;
    }

    .tableau_steam {
      margin: auto;
    }

    .page_livre a{
      color: #6D2A0C !important;
      font-family: impact;
      transition: 1s;
      webkit-transition: 1s;
    }

    .page_livre a:hover{
      color: #D17923 !important;
      letter-spacing: 3px;
      text-shadow: 0px 0px 3px #1F140B;
    }

    .image_steam {
      width: 120px;
      height: 200px;
      overflow: hidden;
      background-color: rgba(204, 147, 56, 0.7);
    }

    .autre_cadre {
      font-family: courier new;
      text-align: left;
      width: 355px;
      height: 180px;
      overflow: auto;
      background-color: rgba(204, 147, 56, 0.7);
      padding: 10px; font-size: 14px;
    }

    .police_autre {
      font-weight: bold;
      font-family: 'Orbitron', sans-serif;
      font-size: 15px;
    }

    .grand_cadre {
      border-radius: 10px;
      width: 480px;
      overflow: auto;
      margin: auto;
      background-color: rgba(204, 147, 56, 0.7);
      padding: 10px;
    }

    .petit_cadre {
      height: 10px;
      opacity: 0;
      overflow: auto;
      -webkit-transition: all 1s;
      transition: all 1s;
      margin: auto;
    }

    .cadre_cache:hover .petit_cadre {
      height: 180px;
      width: 450px;
      opacity:1;
    }

    .police_titres {
      font-family: 'Aldrich', sans-serif;
      font-size: 18px;
      font-weight: bold;
      display: block;
      text-align: center;
    }

    .info_importante {
      font-family: 'Impact';
      color: #49270D;
      letter-spacing: 2px;
    }

    Le HTML



    Code:
    <div class="couverture_livre"><div class="page_livre">

    <table class="tableau_steam"><tr><td><img src="URL DE L'AVATAR ICI" alt="UN PETIT MOT SUR L'AVATAR" class="image_steam" style="border-radius: 10px 2px 2px 10px;" /></td><td><div class="autre_cadre" style="border-radius: 2px 10px 10px 2px;"><span class="police_autre">Nom</span> : Réponse

    <span class="info_importante">Information à mettre en évidence</span>

    <a href="LIEN DE L'URL">Titre de l'url</a>
    </div></td></tr></table>

    <div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
    Physique</span><div class="petit_cadre">

    Ton Physique.

    </div></div></div>
    <div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
    Caractère</span><div class="petit_cadre">

    Ton Caractère.

    </div></div></div>
    <div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
    Histoire</span><div class="petit_cadre">

    Ton Histoire.

    </div></div></div>
    <table class="tableau_steam"><tr><td><div class="autre_cadre" style="border-radius: 10px 2px 2px 10px;"><span class="police_autre">Nom</span> : Réponse
    </div></td><td><img src="URL DE L'AVATAR ICI" alt="UN PETIT MOT SUR L'AVATAR" class="image_steam" style="border-radius: 2px 10px 10px 2px;" /></td></tr></table>

    <a href="http://www.never-utopia.com/" style="text-align: center; color: #e0c060 !important; display: block; letter-spacing: 1px;">©Shaneliae | Never Utopia</a>

    </div></div>
    <link href='http://fonts.googleapis.com/css?family=Orbitron|Aldrich' rel='stylesheet' type='text/css'>
    [/hide]

    Fiche uniquement en HTML



    Code:
    <style>.couverture_livre {background-image: url('http://i19.servimg.com/u/f19/18/91/36/39/couver10.jpg'); width: 530px; height: 950px; margin: auto; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; position: relative;} .couverture_livre:hover {transform: all; -webkit-transform: all; transition: 2s; -webkit-transition: 2s; z-index: 5;} .page_livre {color: #1F140B; font-family: courier new; text-align: justify; background-image: url('http://i19.servimg.com/u/f19/18/91/36/39/page_s10.jpg'); width: 530px; height: 950px; margin: auto; position: relative; display: block; opacity: 0; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; z-index: 1;} .page_livre:hover {opacity: 1; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s;} .tableau_steam {margin: auto;} .page_livre a{color: #6D2A0C !important; font-family: impact; transition: 1s; webkit-transition: 1s;} .page_livre a:hover{color: #D17923 !important; letter-spacing: 3px; text-shadow: 0px 0px 3px #1F140B;} .image_steam {width: 120px; height: 200px; overflow: hidden; background-color: rgba(204, 147, 56, 0.7);} .autre_cadre {font-family: courier new; text-align: left; width: 355px; height: 180px; overflow: auto; background-color: rgba(204, 147, 56, 0.7); padding: 10px; font-size: 14px;} .police_autre {font-weight: bold; font-family: 'Orbitron', sans-serif; font-size: 15px;} .grand_cadre {border-radius: 10px; width: 480px; overflow: auto; margin: auto; background-color: rgba(204, 147, 56, 0.7); padding: 10px;} .petit_cadre{height: 10px; opacity: 0; overflow: auto; -webkit-transition: all 1s; transition: all 1s; margin: auto;} .cadre_cache:hover .petit_cadre{height: 180px; width: 450px; opacity:1;} .police_titres {font-family: 'Aldrich', sans-serif; font-size: 18px; font-weight: bold; display: block; text-align: center;} .info_importante {font-family: 'Impact'; color: #49270D; letter-spacing: 2px;}</style>

    <div class="couverture_livre"><div class="page_livre">

    <table class="tableau_steam"><tr><td><img src="URL DE L'AVATAR ICI" alt="UN PETIT MOT SUR L'AVATAR" class="image_steam" style="border-radius: 10px 2px 2px 10px;" /></td><td><div class="autre_cadre" style="border-radius: 2px 10px 10px 2px;"><span class="police_autre">Nom</span> : Réponse

    <span class="info_importante">Information à mettre en évidence</span>

    <a href="LIEN DE L'URL">Titre de l'url</a>
    </div></td></tr></table>

    <div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
    Physique</span><div class="petit_cadre">

    Ton Physique.

    </div></div></div>
    <div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
    Caractère</span><div class="petit_cadre">

    Ton Caractère.

    </div></div></div>
    <div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
    Histoire</span><div class="petit_cadre">

    Ton Histoire.

    </div></div></div>
    <table class="tableau_steam"><tr><td><div class="autre_cadre" style="border-radius: 10px 2px 2px 10px;"><span class="police_autre">Nom</span> : Réponse
    </div></td><td><img src="URL DE L'AVATAR ICI" alt="UN PETIT MOT SUR L'AVATAR" class="image_steam" style="border-radius: 2px 10px 10px 2px;" /></td></tr></table>

    <a href="http://www.never-utopia.com/" style="text-align: center; color: #e0c060 !important; display: block; letter-spacing: 1px;">©Shaneliae | Never Utopia</a>

    </div></div>
    <link href='http://fonts.googleapis.com/css?family=Orbitron|Aldrich' rel='stylesheet' type='text/css'>

    Merci pour avoir lu ce LS ♥

    Vous avez une question ou un problème avec ce LS ? Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.


    Dernière édition par Shaneliae le Mer 1 Mar 2017 - 18:09, édité 3 fois



    avatar
    Ehawee
    FémininAge : 24Messages : 4626

    le Dim 30 Aoû 2015 - 20:10

    Hello miss =)

    En premier lieu, désolée de l'attente, et merci de cette superbe proposition de code très classe et très innovante =)

    Tout fonctionne parfaitement de mon côté, et ton code est plutôt propre =) Pour l'améliorer, (et t'éviter l'usage intempestif des mentions !important), n'hésite pas à consulter ce tuto qui est certes très théorique, mais qui pourra t'aider à améliorer tes futurs bébés ^^)

    Merci encore pour cette contribution =)



    Absence jusque début juillet pour cause de concours ; merci de vous adresser à d'autres membres du staff Wink


    avatar
    Kelalin
    FémininAge : 24Messages : 1473

    le Dim 30 Aoû 2015 - 23:34

    Merci ! \(T∇T)/
    avatar
    Ice Cream'
    FémininAge : 14Messages : 15

    le Lun 31 Aoû 2015 - 22:14

    Wouah ! Magnifique fiche ! *0* *bave*
    Merci beaucoup pour ce partage Very Happy
    avatar
    Cherry'
    FémininAge : 20Messages : 59

    le Mer 16 Sep 2015 - 22:07

    Magnifique merci beaucoup ! ♥
    avatar
    MeowLowDee
    FémininAge : 25Messages : 72

    le Sam 19 Sep 2015 - 14:05

    Génial !
    avatar
    Sokaro
    FémininAge : 21Messages : 194

    le Dim 20 Sep 2015 - 2:39

    Très classe! Merci beaucoup du partage :3




    (Signature provisoire.)
    avatar
    Lena Choux
    FémininAge : 20Messages : 28

    le Dim 20 Sep 2015 - 22:54

    Très beau *-*
    avatar
    -Madara Uchiha-
    MasculinAge : 22Messages : 41

    le Lun 21 Sep 2015 - 4:09

    Wow, merci!
    avatar
    Renarde
    FémininAge : 27Messages : 9

    le Mer 30 Sep 2015 - 19:13

    Waw !
    Merci !
    avatar
    Kuvera
    FémininAge : 23Messages : 30

    le Mer 30 Sep 2015 - 19:58

    Merci !
    avatar
    Chocolakato
    FémininAge : 26Messages : 768

    le Mer 30 Sep 2015 - 20:13

    Oh mon dieu, Woaw !
    Je ne pense pas l'utiliser, mais c'est vraiment beau et ça mérite un bravo !



    avatar
    Phoenix Elen
    FémininAge : 22Messages : 93

    le Sam 3 Oct 2015 - 20:10

    Oh... Elle est magnifique ! Merci :)



    avatar
    Zealanders
    MasculinAge : 21Messages : 40

    le Lun 5 Oct 2015 - 18:50

    Merci !
    avatar
    Bellatrix
    FémininAge : 25Messages : 15

    le Ven 9 Oct 2015 - 17:15

    Magnifique ! Merci !
    avatar
    mmorgo
    FémininAge : 19Messages : 46

    le Mar 13 Oct 2015 - 8:44

    C'est super, merci ! Very Happy
    avatar
    Kanra
    FémininAge : 16Messages : 113

    le Sam 17 Oct 2015 - 15:22

    merci
    avatar
    KyoShinya
    FémininAge : 23Messages : 7

    le Mer 21 Oct 2015 - 23:36

    Merci beaucoup !
    Je compte l'utiliser pour un forum type futuriste, donc les images sont à changer, mais l'ensemble est magnifique !
    avatar
    Anaruth
    MasculinAge : 27Messages : 68

    le Jeu 22 Oct 2015 - 10:25

    sublime, waouh tu es un génie *-*

    merci merci merci *-*
    avatar
    #FifuKing.
    MasculinAge : 20Messages : 33

    le Dim 25 Oct 2015 - 20:16

    merci merci :B
    avatar
    Patdrue
    FémininAge : 27Messages : 153

    le Ven 6 Nov 2015 - 0:35

    Je suis bluffée! magnifique!!!
    avatar
    Cassisse
    FémininAge : 24Messages : 91

    le Ven 6 Nov 2015 - 20:50

    beau travail ! J'adore merci !
    avatar
    Pikabouh
    FémininAge : 15Messages : 121

    le Ven 6 Nov 2015 - 21:08

    Merci, elle est magnifique **
    avatar
    Sparryx
    MasculinAge : 15Messages : 68

    le Sam 7 Nov 2015 - 21:12

    Merci
    avatar
    Roxane.D
    FémininAge : 18Messages : 29

    le Lun 9 Nov 2015 - 20:17

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Mar 25 Avr 2017 - 10:39