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 : 791

    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



    avatar
    Hopyes
    FémininAge : 29Messages : 78

    le Mar 10 Nov 2015 - 20:58

    J'adore merci c'est splendide.
    avatar
    ELLAENYS
    FémininAge : 31Messages : 127

    le Mer 11 Nov 2015 - 14:56

    Merci du partage Very Happy



    avatar
    MissDream
    FémininAge : 22Messages : 144

    le Jeu 12 Nov 2015 - 22:12

    superbe merci *.*

    avatar
    Inoue Musaki
    FémininAge : 27Messages : 147

    le Sam 14 Nov 2015 - 13:05

    merci
    avatar
    Alouarn
    MasculinAge : 26Messages : 84

    le Sam 14 Nov 2015 - 15:02

    Merci beaucoup pour le partage ! ^^
    C'est trop beau ! *_*
    avatar
    Démo
    FémininAge : 17Messages : 35

    le Jeu 19 Nov 2015 - 18:20

    C'est une idée de fou, merci!♥
    avatar
    Aeternum
    FémininAge : 21Messages : 32

    le Ven 20 Nov 2015 - 23:51

    merci beaucoup c'est juste magnifique et ça s'accorde hyper bien avec le thème du forum!
    avatar
    Zoé
    FémininAge : 18Messages : 185

    le Sam 21 Nov 2015 - 15:27

    miciiii



    avatar
    Dante Le Magnifique
    MasculinAge : 31Messages : 48

    le Dim 29 Nov 2015 - 21:29

    C'est tellement beau que ça me donne envie d'aller jouer sur un fow' Steampunk !

    Merci pour ce superbe boulot.
    avatar
    Caiomhe
    FémininAge : 23Messages : 6

    le Jeu 17 Déc 2015 - 16:55

    C'est superbe ! J'adore le principe du "livre", super idée !
    avatar
    CECILE362
    FémininAge : 28Messages : 194

    le Sam 19 Déc 2015 - 20:38

    Merci pour le partage Very Happy
    avatar
    Shanoa
    FémininAge : 19Messages : 64

    le Lun 21 Déc 2015 - 19:11

    Merci beaucoup très original !
    avatar
    Kaisuruko
    MasculinAge : 23Messages : 32

    le Mer 30 Déc 2015 - 23:40

    Merci o/
    avatar
    Sly King
    FémininAge : 20Messages : 75

    le Sam 2 Jan 2016 - 1:34

    Mon Dieu c'est magnifique ! *w*
    avatar
    Nearween
    FémininAge : 18Messages : 207

    le Sam 2 Jan 2016 - 10:54

    Oooh cette fiche *w* merci !





    Stand by Me
    avatar
    Matthew Williams
    FémininAge : 21Messages : 35

    le Mar 5 Jan 2016 - 12:08

    vraiment super , t'as fait du bon travail je te remercie (oui je n'ai un ordi que maintenant XD ) :)
    avatar
    olibo31
    MasculinAge : 31Messages : 14

    le Mar 5 Jan 2016 - 13:21

    ta fiche est vraiment superbe, merci, c'est exactement ce que je cherche (avec modifications de quelques images). Si j'arrive à la mettre en place, évidemment que je laisse le lien vers son créateur :)
    avatar
    Silver Angel
    MasculinAge : 102Messages : 75

    le Mar 5 Jan 2016 - 21:05

    Elle est vraiment très stylée!

    bravo
    avatar
    Junnesekiin
    FémininAge : 21Messages : 5

    le Mer 6 Jan 2016 - 18:57

    super awesome! *^*
    avatar
    Saya Shirayuki
    FémininAge : 24Messages : 149

    le Dim 28 Fév 2016 - 13:33

    Vraiment magique ! Merci !
    avatar
    ryry0013
    FémininAge : 23Messages : 127

    le Dim 28 Fév 2016 - 22:15

    Super beau merci
    avatar
    Orochimaru
    FémininAge : 27Messages : 178

    le Lun 7 Mar 2016 - 1:03

    Génial ça. Bravo. J'adore la fiche. Merci du partage ^^



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    Nardco
    MasculinAge : 56Messages : 50

    le Lun 7 Mar 2016 - 9:48

    Merci a toi :popcorn:
    Yami'
    FémininAge : 17Messages : 24

    le Lun 7 Mar 2016 - 14:38

    Merci
    avatar
    Sydeale
    FémininAge : 20Messages : 96

    le Dim 20 Mar 2016 - 23:14

    Merci, j'ai un autre projet d'utilisation de ton LS, mais merci quand même !
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Juin 2017 - 19:24