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.


    (Dehvi) Fiche présentation étoilé

    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Ven 29 Jan 2016 - 8:18

    Ma demande



    Bonjour tout le monde o/ Alors c'est simple, tout est dans le tire x3 Je souhaiterais avoir une fiche avec comme thème les étoiles dont 3 assez grosses pour contenir "Physique" "Caractère" et "Histoire". Merci d'avance o/

    Schéma(s) et Eléments
    Schémas : Voilà le schéma :) : https://i.servimg.com/u/f68/18/09/95/63/pres_e10.png
    Tailles des éléments : Je ne sais pas moi même, je vous laisse faire comme vous le sentez
    Effets voulus : Comme dit dans le schéma, les formes étoilés avec un effet hover pour dévoiler le contenu et un fond transparent ^^


    Ressources
    Pour le fond de la première grande case : https://2img.net/r/hpimg15/pics/127442CielEtoilesTransitionPlante.jpg
    Et pour l'autre grande case : https://49.media.tumblr.com/7185bdfdf4189126ce928896783813f6/tumblr_n4c6376Neu1s0wuv4o1_500.gif (je pense qu'elle saura sans doute petite)
    Pour les étoiles : http://static.mnium.org/images/contenu/actus/JeuxVideo/Mario_Kart_8/MK8_objets_11.png


    Autres précisions ? Aucune o/
    Rien ^^ Merci encore o/


    Dernière édition par Nearween le Dim 31 Jan 2016 - 9:29, édité 1 fois



    (Dehvi) Fiche présentation étoilé Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 31 Jan 2016 - 0:09

    Salut! Ce serait bien que tu rajoute l'image des étoiles à mettre dans ta prez svp Wink



    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Dim 31 Jan 2016 - 9:26

    Edit : Je me suis trompée de bouton '-'


    Dernière édition par Nearween le Dim 31 Jan 2016 - 9:28, édité 1 fois



    (Dehvi) Fiche présentation étoilé Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Dim 31 Jan 2016 - 9:27

    Je l'ai rajoutée o/=)



    (Dehvi) Fiche présentation étoilé Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Magico
    Magico
    MasculinAge : 32Messages : 41

    Lun 1 Fév 2016 - 19:59

    o/
    Magico
    Magico
    MasculinAge : 32Messages : 41

    Lun 1 Fév 2016 - 20:00

    Je l'ai rajoutée o/=)
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 4 Fév 2016 - 3:17

    Salut!

    C'est bien, mais tu n'as pas besoin de spammer les ups tu sais? Les ups sont aux 48h maximum, pas avant Wink



    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Ven 5 Fév 2016 - 8:14

    En faite je m'étais trompée de bouton, j'ai cliqué sur cité au lieu de Editer xD Et je me suis rendu compte que après avoir prévenu que j'ai rajouter donc voilà pourquoi j'avais deux messages à ta suite.
    Ou bien alors c'est par rapport au deux messages de Magico ? scratch



    (Dehvi) Fiche présentation étoilé Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Lun 15 Fév 2016 - 23:01

    Je pense qu'Onyx a cru que ce topic était celui de Magico alors que non mais alors pourquoi ces messages... ? Je pense que Magico s'est cru dans le LS. Je vais voir.

    Mais sinon, côté relance, on a pas eu de nouvelles depuis 10 jours alors je viens te relancer moi-même. Pense à en faire un tous les 9 jours minimum :)



     
    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Mar 16 Fév 2016 - 8:42

    Yo o/

    Oui je relance ^^



    (Dehvi) Fiche présentation étoilé Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Dehvi
    Dehvi
    MasculinAge : 31Messages : 72

    Sam 20 Fév 2016 - 20:43

    Salut !
    En théorie pas de problème majeur pour créer ce genre de fiche, si ce n'est l'espace très restreint laissé par la forme de l'étoile.

    J'ai lu que tu parlais d'effet d'apparition au hover, est-ce que l'idée est que l'étoile "cache" le texte en dessous ?

    Veux-tu utiliser les images des étoiles Mario que tu as mises dans ta description ou bien était-ce juste pour "l'exemple" ? (une image avec des branches plus courtes laisserait par exemple plus de place pour l'écriture.) Sur ton image de démonstration, je vois mal plus de quatre ou cinq lignes de quelques mots entrer dans le hover de ton étoile.

    Une des possibilités est celle-ci :
    Sans Hover
    Au Hover
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 1 Mar 2016 - 7:07

    Salut!

    Nearween, tu as vu le message de Dehvi?



    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Mar 1 Mar 2016 - 16:29

    Yo !
    Oui pardon je comptais répondre mais j'ai du délaisser à cause des examens qui approche ;.;

    Sinon, pourquoi pas faire des zones de texte qu'ont pourraientfaire défiler quand il y a plusieurs paragraphes? Et j'aime bien cette étoile que tu as pris, je ne savais pas trop quoi choisir ^^



    (Dehvi) Fiche présentation étoilé Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Dehvi
    Dehvi
    MasculinAge : 31Messages : 72

    Mar 1 Mar 2016 - 19:28

    Bonjour,
    Mon pseudo c'est Dehvi, pas Nehvi Wink
    L'idée reste la même avec un scroll : tu as besoin d'un confort de lecture minimum surtout quand ce qui compte c'est quand même le texte.
    Tu lis beaucoup mieux ça :
    "How wondrous familiar is a fool!" muttered Ahab; then aloud, "Thou art a full ship and homeward bound, thou sayst; well, then, call me an empty ship, and outward-bound. So go thy ways, and I will mine. Forward there! Set all sail, and keep her to the wind!"
    And thus, while the one ship went cheerily before the breeze, the other stubbornly fought against it; and so the two vessels parted; the crew of the Pequod looking with grave, lingering glances towards the receding Bachelor; but the Bachelor's men never heeding their gaze for the lively revelry they were in. And as Ahab, leaning over the taffrail, eyed the homewardbound craft, he took from his pocket a small vial of sand, and then looking from the ship to the vial, seemed thereby bringing two remote associations together, for that vial was filled with Nantucket soundings.
    Not seldom in this life, when, on the right side, fortune's favourites sail close by us, we, though all adroop before, catch somewhat of the rushing breeze, and joyfully feel our bagging sails fill out. So seemed it with the Pequod. For next day after encountering the gay Bachelor, whales were seen and four were slain; and one of them by Ahab.


    Que ça :
    "How wondrous familiar is a fool!" muttered Ahab; then aloud, "Thou art a full ship and homeward bound, thou sayst; well, then, call me an empty ship, and outward-bound. So go thy ways, and I will mine. Forward there! Set all sail, and keep her to the wind!"
    And thus, while the one ship went cheerily before the breeze, the other stubbornly fought against it; and so the two vessels parted; the crew of the Pequod looking with grave, lingering glances towards the receding Bachelor; but the Bachelor's men never heeding their gaze for the lively revelry they were in. And as Ahab, leaning over the taffrail, eyed the homewardbound craft, he took from his pocket a small vial of sand, and then looking from the ship to the vial, seemed thereby bringing two remote associations together, for that vial was filled with Nantucket soundings.
    Not seldom in this life, when, on the right side, fortune's favourites sail close by us, we, though all adroop before, catch somewhat of the rushing breeze, and joyfully feel our bagging sails fill out. So seemed it with the Pequod. For next day after encountering the gay Bachelor, whales were seen and four were slain; and one of them by Ahab.


    L'étoile que j'ai "prise" est créée à partir d'un polygone sur Photoshop, je peux les faire à l'envi :)

    J'attends ta confirmation / infirmation du coup pour me mettre sur la fiche, comme c'est quand même ta commande à la base.
    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Mar 1 Mar 2016 - 19:59

    Yo o/

    C'est vrais que c'est plus confortable le premier mais le seconde serais mieux niveau espacement. Tu peux commencer ^^



    (Dehvi) Fiche présentation étoilé Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Dehvi
    Dehvi
    MasculinAge : 31Messages : 72

    Jeu 3 Mar 2016 - 16:24

    Yosh Wink
    Je suis en semaine de projet pour les cours, je ne pourrai donc pas m'y mettre avant ce week-end
    Juste histoire que tu ne t'inquiètes pas
    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Jeu 3 Mar 2016 - 18:21

    Yo o/
    T'inquiète pas ^^ prend ton temps :3



    (Dehvi) Fiche présentation étoilé Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Dehvi
    Dehvi
    MasculinAge : 31Messages : 72

    Ven 11 Mar 2016 - 10:03

    Salut ! Voilà ce que ça donne avec les informations que tu m'as fournies :
    Fiche sans passer la souris
    Au survol de la souris

    Voilà le code qu'il faudra donner à tes membres pour qu'ils remplissent la fiche :
    Code:
    <div class="fichePres">
    <div class="header">
    <h1>Nom Prénom P. </h1>
    <em>Classe Année Âge Nationalité Pouvoir</em>
    </div>
    <div class="bloc caractere"><img src="http://www.zupmage.eu/i/R0zNSoXSa1.png"/>
    <p>Votre caractère</p>
    </div>
    <div class="bloc physique"><img src="http://www.zupmage.eu/i/lHBK1KXvE2.png"/>
    <p>
    Votre physique
    </p>
    </div>
    <div class="bloc histoire"><img src="http://www.zupmage.eu/i/lL5JJjLfJE.png"/>
    <p>
    Votre histoire
    </p>
    </div>
    <div class="footer"><p><strong>Pseudo : </strong>
    <strong>Autres comptes ici ? </strong>
    <strong>Âge : </strong>
    <strong>Sexe : </strong>
    <strong>Comment avez-vous connu le forum ? </strong>
    <strong>Personnage sur l'avatar : </strong>
    <strong>Petit mot de la fin : </strong>
    <strong>Code du forum : </strong></p>
    <img src="http://placehold.it/100x100"/>
    </div>
    </div>

    Et voilà le css à ajouter dans Panneau d'administration > Affichage > Couleurs > Feuille de style CSS
    Code:

    .fichePres{
       width: 600px;
       margin:auto;
       display: block;
       background-color:rgba(255,255,255,0.5);
       border-radius: 150px 150px 0 0;
    }

    .fichePres .header{height: 150px
       background: url(http://img15.hostingpics.net/pics/127442CielEtoilesTransitionPlante.jpg) #00001c;
       border-radius: 150px 150px 0 0;
       color: white;
       text-shadow: 0px 0px 6px white;
       margin-top: -17px;
    }

    .fichePres h1{
       text-align: center;
       font-size: 30px;
       color: white;
       font-weight: normal;
    }

     .fichePres .header em{
        font-style: normal;
       display: block;
       text-align: center;
       margin:auto;
    }

     .fichePres .bloc{
        width: 250px;
       height: 250px;
       overflow: hidden;
       padding:0;
    }

     .fichePres .bloc p{
        width: 230px;
       height:240px;
       opacity:0;
       padding:10px 5px;
       overflow: auto;
       margin-top: -255px;
       -webkit-transition:all 0.8s;
       transition:all 0.8s;
       position:relative;
    }

     .fichePres .bloc img{
        -webkit-transition:all 0.8s;
       transition: all 0.8s;
       position: relative;
    }

    .fichePres .bloc:hover img{opacity:0;z-index: 2}
    .fichePres .bloc:hover p{z-index: 5;opacity: 1}
    .fichePres .bloc.caractere {margin-left: 320px;}
    .fichePres .bloc.physique {margin-top: -120px;margin-left: 20px}
    .fichePres .bloc.histoire {margin-left: 320px; margin-top: -115px}

    .fichePres .footer{
       background:url(https://49.media.tumblr.com/7185bdfdf4189126ce928896783813f6/tumblr_n4c6376Neu1s0wuv4o1_500.gif) #00001c;
       height: 150px;
       overflow: hidden;
       position: relative;
       border-radius: 20px;
       margin-bottom: -20px;
    }

    .fichePres .footer img{
        position: absolute;
       top:25px;
       right:25px;
    }

     .fichePres .footer p{
        padding:10px;
        height:130px;
       overflow: auto;
       color: white;
       margin:0;
        width: 430px;
       text-shadow: 0px 0px 6px black;
    }

    Si tu veux apporter des modifications, fais-moi signe
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 23 Mar 2016 - 5:21

    Salut!

    Nearween, tu as vu la réponse de Dehvi?



    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Jeu 24 Mar 2016 - 8:28

    Hey !

    Oui pardon, je suis très occupée en ce moment TwT

    Sinon le code ma va parfaitement ! Merkii beaucoup :3



    (Dehvi) Fiche présentation étoilé Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 25 Mar 2016 - 4:01

    Bouh!

    Est-ce que je peux en conclure que la demande est terminée? Je peux archiver le sujet?



    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Ven 25 Mar 2016 - 20:17

    Oui :3 Merci encore Dehvi o/



    (Dehvi) Fiche présentation étoilé Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 22:40