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 barre de vie

    Partagez
    avatar
    Ombinou
    FémininAge : 24Messages : 144

    le Sam 24 Nov 2018 - 23:45

    Une fiche ou entête de fiche rp avec barre de vie



    Bien le bonjour ou bonsoir. J'aimerai vous demandez un peu d'aide, pour réaliser une fiche contenant un système de barre de vie. Cela rendrai plus claire les rps actions, où des créatures passent à l'attaque.


    Schéma(s) et Eléments


    Schémas : J'ai réalisé ce petit dessin pour montrer ce que je visualise.
    schéma:
    Tailles des éléments : 300px en hauteur et 600px de large, après j'aimerai que la hauteur puisse varier si possible.
    Effets voulus : Changement de couleurs de la barre de vie suivant le niveau de vie? Si c'est réalisable.
    Version de votre forum : PHPBB2


    Ressources


    Pas d'image spécifique


    Autres précisions ?


    Si possible fiche modifiable, pour rajouter autant de barre de vie que nécessaire?


    avatar
    Ombinou
    FémininAge : 24Messages : 144

    le Lun 26 Nov 2018 - 16:24

    up?
    avatar
    Luirio
    MasculinAge : 28Messages : 164

    le Mar 27 Nov 2018 - 1:26

    Est-ce que tu peux préciser davantage? par exemple compte tu changer la couleur de la barre après un certain cap? Par exemple dans Legend of Dragoon, si ton personnage avait moins que 50% de son max PV, son curseur devenait jaune puis rouge à 25%.

    Sinon voila :)

    Code:
    <div class="greybox"><div class="typename">HP:75/100</div><div class="emptybar"><div style="border-radius:10px;width:75%; height:25px; background-color:red;"></div></div><br><div class="typename">MP:5/10</div><div class="emptybar"><div style="border-radius:10px;width:50%; height:25px; background-color:blue;"></div></div></div><br><div class="bigframe">Ton contenu ici s'il-te-plait




    </div></div>

    Et le css qui va avec.
    Code:
    .greybox {border:2px #000000 solid;
    margin:auto;
    width:600px;
    height:120px;
    padding:12px;
    background-color:grey;}

    .emptybar{border-radius:10px;
    margin:auto;
    width:200px;
    height:25px;
    background-color:#ffffff;}

    .typename{border-radius:10px;
    margin:auto;
    width:300px;
    height:25px;
    font-size: 24px;
    color: #000000;}

    .bigframe{border-radius:10px;
    margin:auto;
    width:500px;
    height:400px;
    background-color:#ffffff;}

    Pour les valeurs en % t'as juste à entré le nombre de PV actuel, divise par le maximum possible et tu multiplie par 100

    Par exemple: 64PV sur 123
    64/123 = 52%
    avatar
    Ombinou
    FémininAge : 24Messages : 144

    le Mar 27 Nov 2018 - 11:35

    Merci d'avoir répondu Luirio.

    Pour ce qui est des couleurs je pensais à du vert quand la barre est pleine, orange quand elle arrive à la moitié, rouge si c'est dès qui reste que peu de point de vie.
    Là pour l'instant la barre de vie est de 25 points.
    Mais il sera possible de l'augmenter plus tard?
    Et était il possible de mettre des nom sur le côté de la barre?

    25 ->19#29A947
    18->7 #fe7803
    6->0#b9121b
    avatar
    Ombinou
    FémininAge : 24Messages : 144

    le Jeu 29 Nov 2018 - 10:49

    Up?
    avatar
    Ombinou
    FémininAge : 24Messages : 144

    le Sam 1 Déc 2018 - 18:34

    Up?
    avatar
    Ombinou
    FémininAge : 24Messages : 144

    le Lun 3 Déc 2018 - 22:03

    Up?
    avatar
    Ombinou
    FémininAge : 24Messages : 144

    le Jeu 6 Déc 2018 - 21:35

    Up?
    Contenu sponsorisé


      La date/heure actuelle est Mer 19 Déc 2018 - 6:00