AccueilRechercherS'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

    Anonymous
    Invité

    le Mar 19 Mai 2015 - 16:02

    Rappel du premier message :


    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
    Argimpasa
    Argimpasa
    FémininAge : 28Messages : 96

    le Sam 30 Juil 2016 - 14:07

    Sublime, merci Very Happy
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 28Messages : 315

    le Sam 30 Juil 2016 - 17:20

    Elenthil, c'est bluffant, superbe !!! Merci beaucoup de ce partage !
    Anonymous
    Invité

    le Ven 5 Aoû 2016 - 13:33

    Wow, elle est juste wow, merci !
    Aaron Silver
    Aaron Silver
    MasculinAge : 26Messages : 27

    le Mar 9 Aoû 2016 - 17:58

    C'est magnifique !!!!
    Sadja
    Sadja
    MasculinAge : 21Messages : 77

    le Dim 14 Aoû 2016 - 12:53

    Merci :)
    Anonymous
    Invité

    le Jeu 25 Aoû 2016 - 0:25

    Haaaaan, pour une fan de steampunk, cette fiche est ultra méga super belleuh ! Vraiment, chapeau et un grand merci de ta part ! ♥♥
    Sinon
    Sinon
    FémininAge : 20Messages : 68

    le Jeu 25 Aoû 2016 - 13:42

    Merci beaucoup^^
    Otulissa
    Otulissa
    FémininAge : 22Messages : 24

    le Mar 30 Aoû 2016 - 16:06

    Merci beaucoup
    Yttel
    Yttel
    MasculinAge : 37Messages : 29

    le Mer 7 Sep 2016 - 10:52

    Merci ! :)
    InkBoy
    InkBoy
    MasculinAge : 26Messages : 66

    le Ven 9 Sep 2016 - 5:29

    Salut, je suis curieux de voir comment tu as codé et superbe fiche au passage ! Merci



    Fiche de présentation - Steampunk et vieux livre - Page 4 351tqox
    Lughnassadh
    Lughnassadh
    FémininAge : 28Messages : 23

    le Lun 12 Sep 2016 - 18:45

    C'est juste magnifique, merci et gros bravo !
    Shinji ikari
    Shinji ikari
    MasculinAge : 23Messages : 12

    le Dim 16 Oct 2016 - 1:18

    ce que je cherchais ! enfin
    leviarthrite
    leviarthrite
    FémininAge : 32Messages : 26

    le Dim 16 Oct 2016 - 20:52

    Merci
    Djine
    Djine
    FémininAge : 24Messages : 17

    le Sam 12 Nov 2016 - 16:59

    Cette fiche quoi cette fiche *O*
    remrem
    remrem
    MasculinAge : 22Messages : 48

    le Sam 19 Nov 2016 - 20:26

    très joli merci du partage !
    Marko82
    Marko82
    MasculinAge : 24Messages : 1

    le Lun 21 Nov 2016 - 17:27

    Superbe merci ! :)
    avatar
    Phénix'
    FémininAge : 18Messages : 94

    le Mer 23 Nov 2016 - 15:52

    Merci !=)
    Ishiro
    Ishiro
    FémininAge : 25Messages : 87

    le Jeu 1 Déc 2016 - 3:32

    Merci!
    Ca a l'air vraiment très classe




    Fiche de présentation - Steampunk et vieux livre - Page 4 09041711320918177
    Thalysa
    Thalysa
    FémininAge : 68Messages : 31

    le Ven 9 Déc 2016 - 1:40

    merci :)
    Maitre_Soda
    Maitre_Soda
    MasculinAge : 42Messages : 33

    le Ven 9 Déc 2016 - 13:23

    merci
    Samara-sciences
    Samara-sciences
    FémininAge : 24Messages : 6

    le Jeu 22 Déc 2016 - 6:41

    Whaaaa!!

    MERCI!!!
    miriam94
    miriam94
    FémininAge : 25Messages : 168

    le Jeu 29 Déc 2016 - 22:50

    Merci beaucoup, elle est magnifique **



    Fiche de présentation - Steampunk et vieux livre - Page 4 24786310
    Frishaille
    Frishaille
    MasculinAge : 24Messages : 5

    le Sam 28 Jan 2017 - 15:10

    merci
    Kae
    Kae
    FémininAge : 34Messages : 8

    le Jeu 2 Fév 2017 - 4:33

    Merci !
    Mary Lestrange
    Mary Lestrange
    FémininAge : 20Messages : 15

    le Mer 1 Mar 2017 - 17:25

    Merci ! :3
    Contenu sponsorisé


      La date/heure actuelle est Lun 14 Oct 2019 - 20:03