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

    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
    Dydy
    FémininAge : 26Messages : 490

    le Mar 22 Mar 2016 - 18:16

    merci du partage, j'adore ♥



    avatar
    Borée
    MasculinAge : 17Messages : 40

    le Sam 26 Mar 2016 - 19:33

    MERCIIII!
    avatar
    MarieMou
    FémininAge : 21Messages : 29

    le Dim 10 Avr 2016 - 23:06

    Nice thanks Very Happy
    avatar
    P'tit loup
    MasculinAge : 34Messages : 434

    le Lun 11 Avr 2016 - 10:59

    merci ^^



    avatar
    Isyndra
    FémininAge : 34Messages : 36

    le Sam 16 Avr 2016 - 1:37

    Whaaaa!
    Merci!! Very Happy
    avatar
    SillyDoo
    FémininAge : 24Messages : 13

    le Jeu 21 Avr 2016 - 21:33

    Joli (: Merci !
    donov89
    MasculinAge : 26Messages : 8

    le Ven 22 Avr 2016 - 0:22

    Merci, effets très sympathiques !
    avatar
    Jaunus
    MasculinAge : 21Messages : 11

    le Sam 23 Avr 2016 - 12:08

    Très joli tout ça, bravo ! :')
    avatar
    Cruella
    FémininAge : 22Messages : 7

    le Mar 26 Avr 2016 - 2:09

    Woh c'est l'une des plus belles présentations que j'ai vu *-* Bravo !



    avatar
    Blueflyght
    FémininAge : 16Messages : 19

    le Mar 26 Avr 2016 - 13:39

    Merci :3
    avatar
    Yumeki
    FémininAge : 24Messages : 136

    le Jeu 28 Avr 2016 - 2:05

    superbe fiche !
    merci ^^
    avatar
    RPG Maker
    FémininAge : 22Messages : 44

    le Jeu 28 Avr 2016 - 10:10

    C'est cool, merci. ^^
    avatar
    R.Falsworth
    FémininAge : 20Messages : 49

    le Dim 1 Mai 2016 - 17:37

    merci !
    avatar
    Christtinne
    FémininAge : 31Messages : 160

    le Lun 9 Mai 2016 - 4:57

    Merci
    avatar
    Calkrys
    FémininAge : 19Messages : 49

    le Dim 22 Mai 2016 - 15:51

    C'est énorme ! °o° Merci beaucoup !
    avatar
    Kaei
    MasculinAge : 23Messages : 12

    le Dim 5 Juin 2016 - 0:40

    Vraiment, j'suis impressionné!
    avatar
    SectumSempra
    FémininAge : 19Messages : 34

    le Dim 5 Juin 2016 - 6:49

    Magique ! Merci ! :coeur:
    avatar
    Nyptia
    FémininAge : 25Messages : 12

    le Ven 10 Juin 2016 - 12:46

    Merci !
    avatar
    WolfEla
    FémininAge : 32Messages : 8

    le Dim 12 Juin 2016 - 17:28

    merci
    avatar
    Evalla
    FémininAge : 24Messages : 43

    le Ven 17 Juin 2016 - 23:07

    merci
    avatar
    Amaliiah
    FémininAge : 18Messages : 44

    le Mar 21 Juin 2016 - 17:45

    Merci :)
    avatar
    Merylangel
    FémininAge : 34Messages : 4

    le Dim 3 Juil 2016 - 18:21

    superbe fiche très belle merci
    avatar
    hippolytta
    FémininAge : 17Messages : 52

    le Mar 5 Juil 2016 - 23:27

    Merci beaucoup pour cette oeuvre magnifique *ù*
    avatar
    thidabou
    FémininAge : 16Messages : 37

    le Lun 25 Juil 2016 - 0:32

    Un travail vraiment splendide ! Merci beaucoup !
    avatar
    Miminette62
    FémininAge : 16Messages : 7

    le Mer 27 Juil 2016 - 18:49

    Pas mal du tout ! Merci !!
    Contenu sponsorisé


      La date/heure actuelle est Mer 29 Mar 2017 - 3:26