Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    Codage RP en couleur dégradé + expressions des personnages

    Partagez
    MasculinAge : 23Message(s) : 52
    La Tour Fantôme
    le Lun 3 Aoû 2015 - 22:39
    Bonjour à tous, mon pseudo est "La Tour Fantôme", je suis nouveau ici et je voudrais donc proposer un codage pour RP. Ce codage a été confectionné avec l'aide d'un ami mais c'est moi qui l'ait structuré principalement.

    Vous aurez besoin d'avoir accès au CSS afin de l'utiliser, car ce code est intégré au CSS.

    Voici un aperçu de ce que ça donne en finale.

    Spoiler:

    Il vous est conseillé d'avoir un minimum de connaissance en codage afin de pouvoir le remanier, ainsi qu'un logiciel de graphisme. De plus, vous pouvez changer la couleur de fond en noir. Afin que le bas de l'image fasse un bon dégradé avec le fond et ne pas laisser paraître une ligne distincte de deux couleurs, pour que l'illusion de dégradé fonctionne, vous pouvez facilement utiliser un effet de spray avec la couleur du background sur le bas de l'image.

    Voilà voilà, en espérant que vous apprécierez !

    Code:
    <div class="Codage_Forme"><img class="img_Forme" src="http://img11.hostingpics.net/pics/635890sanst11.png"/ >

    <h class="titre_Forme">" Titre RP "</h><br /><br />

    <img class="banniererp" src="http://img11.hostingpics.net/pics/603264000.jpg"/ >
    <div class="Bloc_RP">
    <h>
    Feat. Joueur un et Joueur deux.
    </h>
    <p>
    [color=black]

    Cet homme venait de demander un service à Ora alors qu'ils ne se connaissaient pas vraiment. Mais que peut-il bien avoir en tête ? Était-il désespéré au point de venir demander de l'aide et faire confiance à n'importe qui ? C'est une réaction qui surprenait énormément notre jeune borgne. Pourtant, ce n'est pas contre sa nature d'aider les autres et il n'était pas non plus occupé avec des priorités qu'il aurait pu placer comme étant plus importantes. Sans plus attendre, Ora lui répondit alors en restant tout à fait calme, afin de montrer toute sa confiance et de le rassurer quant à l'aide qu'il lui apporterait, tout en rendant le geste totalement naturel.

    <div class="Bloc_Parole"><img class="face_speaker" src="http://img15.hostingpics.net/pics/791954tumblrinlinenfnr5fkAeT1sqb1up.jpg"/ >
    <z>[color=#0e4dad]« Je veux bien t'aider, mais ne joue pas les mecs endettés qui veulent absolument rembourser leur dette en cherchant par tous les moyens de m'en remercier après. Je déteste ça. »[/color] Fit-il en baillant.</z></div>


    <p>
    Sur ces mots, il se frotta doucement l'oeil avant de jeter un oeil à l'horloge. L'heure pressait, il est donc grand temps pour eux de se mettre en route avant qu'il ne soit trop tard.
    </p>
    [/color]
    [right][size=9][color=black]Codage par LaTourFantôme ~ Never Utopia[/color][/size][/right]
    </p>
    </div>
    </div>

    Voici le code à ajouter dans votre feuille de style CSS.

    Code:
    /* CODAGE PERSO */

    .Codage_Forme {
    width: 800px;
    margin: auto;
    text-align: center;
    background-color: #c9c9c9;
    box-shadow: 0px 0px 5px  #c9c9c9;
    border-radius: 200px 200px 0px 0px;
    }

    .img_Forme {
    width: 800px;
    height: 250px;
    border-radius: 200px 200px 0px 0px;
    box-shadow: 0px 0px 5px  #c9c9c9
    }

    .titre_Forme {
    font-size: 38px;
    font-family: 'Ar Essence', sans-serif;
    text-shadow: 0px 3px 0px black;
    position: relative; bottom: 70px
    color: #3085cf;
    }

    .Bloc_RP {
    width: 750px;
    text-align: center;
    margin: auto;
    background-color: #c9c9c9;
    margin-top: -100px
    }

    .Bloc_RP h {
    font-size: 20px;
    letter-spacing: 1px;
    color: #3085cf;
    text-shadow: 0px 0px 2px black;
    font-family: 'Tw Cen MT', serif;
    position: relative; bottom: 20px; right: -160px
    }

    .Bloc_RP p {
    padding: 35px;
    text-align: justify;
    font-family: 'Lora', serif;
    font-size: 16px;
    margin-top: -100px
    }

    .Bloc_RP z {
    padding: 20px;
    text-align: center;
    font-family: 'Lora', serif;
    font-size: 15px;
    margin-top: -10px
    }

    .Bloc_Parole {
    padding: 15px;
    border: 2px solid;
    border-color: #1870bd;
    width: 86%;
    border-radius: 20px 20px 20px 20px;
    position: relative; right: -35px; top: -25px;
    }
     
    .banniererp {
    width: 550px;
    height: 100%;
    border-radius: 15px 15px 15px 15px;
    position: relative; bottom: 100px;
    box-shadow: 0px 0px 5px black
    }

    .face_speaker {
    width: 70px;
    height: 100%;
    border-radius: 20px 20px 20px 20px;
    position: relative; right: 250px; bottom: 10px;
    margin-top: -30px;
    box-shadow: 0px 0px 5px black
    }

    .img_RPG {
    width: 500px;
    height: 100%;
    border-radius: 20px 20px 20px 20px;
    position: relative; top: -40px;
    box-shadow: 0px 0px 5px black
    }

    /* FIN CODAGE PERSO */
    MasculinAge : 31Message(s) : 31659

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Sam 19 Sep 2015 - 17:20
    Merci pour ce partage ! Je déplace dans la bonne section^^


    FémininAge : 24Message(s) : 1355

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kelalin
    le Lun 21 Sep 2015 - 0:29
    Merci (*≧▽≦)
    MasculinAge : 18Message(s) : 519

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    0/10  (0/10)
    Ryukaï
    le Ven 23 Oct 2015 - 20:55
    Mercii Very Happy


    MasculinAge : 20Message(s) : 36
    Lyo Jen
    le Ven 13 Nov 2015 - 12:38
    Merci pour le partage !!
    MasculinAge : 25Message(s) : 26
    Ashiro Ryuka
    le Jeu 26 Nov 2015 - 22:21
    Ce code est juste génial !
    FémininAge : 20Message(s) : 8

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Opaline Lawrence
    le Sam 5 Déc 2015 - 4:05
    Bonsoir

    Merci pour ce partage. Enfin je trouve le style de fiche qu'il me faut... Cependant, serait-il possible de m'expliquer comment... l'appliquer ? oui je suis pas encore une experte.... Rolling Eyes

    Merci infiniment pour votre future réponse.

    Opaline
    MasculinAge : 23Message(s) : 26
    Tewson
    le Lun 7 Déc 2015 - 23:39
    Beau boulot !
    FémininAge : 18Message(s) : 43
    Sylfaen
    le Sam 2 Jan 2016 - 3:53
    thanks ! 8D
    MasculinAge : 18Message(s) : 4
    Pandito
    le Mar 22 Mar 2016 - 20:54
    Merci
    Contenu sponsorisé
    Aujourd'hui à 16:04

      La date/heure actuelle est Sam 1 Oct 2016 - 16:04