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.

Le Deal du moment : -29%
DYSON V8 Origin – Aspirateur balai sans fil
Voir le deal
269.99 €

    (Azel) Code pour fiche présentation !

    FROSTendoloris
    FROSTendoloris
    FémininAge : 31Messages : 206

    Sam 23 Juil 2016 - 13:43

    Ma demande



       Booonjour ! J'aimerai une fiche de présentation assez claire mais aussi agréable à regarder !

       Schéma(s) et Eléments

       Schémas :

    Voici une reproduction approximative du visuelle de la fiche que j'aimerai avoir ! J'ai fait ça sur Photoshop, pardonnez mon incompétence ):
    Schéma / Brouillon :
       Tailles des éléments : image : 200x320, police max 30 pour les titres (nom nom prénom, mon histoire et behind the screen* *scene sur l'image)
       Effets voulus : simplement des cadres pour l'image, l'histoire et le behind the screen. Ombrages pour les titres(nom nom prénom, mon histoire et behind the screen* *scene sur l'image)

       Ressources
       
    image:


       Autres précisions ?
       Brush photoshop utilisés :
    http://www.brush-photoshop.fr/dessin/splatterphotoshopbrushes-1389.html

    http://www.brush-photoshop.fr/abstrait/brushset2syringa-1415.html

    (je peux retirer les liens si ils sont hors sujet !)

    Prenez votre temps, j'utiliserai ce code lorsque j'aurai refais le thème complet de mon forum, c'est à dire dans 4 ou 5 mois !

    Merci pour vos créations déjà présentées, elles sont toutes très belles et je vous envie de savoir faire tout ça alors que dès que je vois un code mon cerveau se noue hahaha. Bisous à tous ♥
       


    Dernière édition par lucythao le Mer 27 Juil 2016 - 15:50, édité 1 fois
    • Revenir en haut
    Azel
    Azel
    FémininAge : 26Messages : 42

    Dim 24 Juil 2016 - 0:29

    Salut, je veux bien t'aider pour ça, mais étant très peu qualifiée avec Photoshop, il me faudrait l'image de fond à côté de l'avatar. Veux-tu que les couleurs soient exactement comme dans ton schéma ? et quelles polices veux-tu utiliser ?
    • Revenir en haut
    FROSTendoloris
    FROSTendoloris
    FémininAge : 31Messages : 206

    Dim 24 Juil 2016 - 11:50

    Coucou  :hug:
    Niveau couleurs tu peux te permettre quelque fantaisies, seulement garde un #.9E6B6B pour les titres !

    Pour l'image : La voici ! Je l'ai modifiée du coup car flemme de reprendre les mêmes brushs hahaha

    image fond:


    Merci beaucoup Very Happy
    • Revenir en haut
    Azel
    Azel
    FémininAge : 26Messages : 42

    Dim 24 Juil 2016 - 11:52

    De rien, et quelles polices veux-tu utiliser ? :)
    • Revenir en haut
    FROSTendoloris
    FROSTendoloris
    FémininAge : 31Messages : 206

    Dim 24 Juil 2016 - 12:04

    Et bien... J'aime beaucoup la police "metropolis" mais elle n'est pas toujours très lisible >.<
    Si non, mets la Great Vibes !



    (Azel) Code pour fiche présentation ! 3oov
    • Revenir en haut
    Azel
    Azel
    FémininAge : 26Messages : 42

    Dim 24 Juil 2016 - 13:41

    Voilà, c'est fait :
    Spoiler:

    J'ai dû rajouter ce cadre transparent à côté de l'avatar car sinon c'était illisible. J'espère que ça te convient *-* Dis-moi si tu veux des bordures aux cadres.
    • Revenir en haut
    FROSTendoloris
    FROSTendoloris
    FémininAge : 31Messages : 206

    Dim 24 Juil 2016 - 15:00

    MERCI C'EST TELLEMENT BEAU ! ♥♥♥

    J'aurai juste une dernière petite demande à faire : que le "nom prénom" soit aligné à la photo et que du coup l'âge et tout soit descendu aussi ! :o si c'est possible, mais ptn c'est trop beau, mieux que ce que je m'imaginais haha
    • Revenir en haut
    Azel
    Azel
    FémininAge : 26Messages : 42

    Dim 24 Juil 2016 - 15:41

    Comme ça ?
    Spoiler:

    Merci, c'est un plaisir Razz
    • Revenir en haut
    FROSTendoloris
    FROSTendoloris
    FémininAge : 31Messages : 206

    Dim 24 Juil 2016 - 19:52

    Ouiii ! C'est parfait ! Merci beaucoup ♥



    (Azel) Code pour fiche présentation ! 3oov
    • Revenir en haut
    Azel
    Azel
    FémininAge : 26Messages : 42

    Dim 24 Juil 2016 - 19:56

    Très bien, voici pour les codes :

    Dans le sujet :
    Code:
    <center>
       <pres><img id="avatar" src="http://i35.servimg.com/u/f35/19/45/34/89/sans_t10.png" /><infos><titre>Nom Prénom</titre><inf><br /><c>ÂGE :</c> Trois mille ans 8D<br /><br /><c>LIEU DE NAISSANCE :</c> Les cavernes<br /><br /><c>SITUATION AMOUREUSE :</c> Futurement divorcé<br /><br /><c>ORIENTATION :</c> Bisexuel<br /><br /><c>REGION :</c> le Nôrd<br /><br /><c>METIER :</c> Mercenaire<br /><br /><c>SURNOM(S) :</c> Gob'</inf></infos><hist><titre1>Mon histoire</titre1><h id="overflow">Les aigles sont de grands rapaces planeurs diurnes qui possèdent des pattes puissantes et de grandes serres pour saisir leurs proies. Ils ont également une vue perçante leur permettant de repérer celles-ci à distance.<br />Les aigles ont des ailes qui présentent une émargination importante, ce qui les distingue des Falconidae (faucons, éperviers). Comme certaines buses, ils ont des tarses emplumés, mais les aigles en ont de plus grands que celles-ci.<br />De nombreuses espèces sont vulnérables à la destruction de leur habitat. De plus, situés en tête de chaîne et pyramide alimentaire, ces oiseaux de proie concentrent dans leur organisme de nombreux polluants (pesticides, métaux lourds...) et par conséquent, de même que de nombreux prédateurs et nécrophages, ils sont fréquemment victimes de saturnisme aviaire1,2, notamment quand ils ingèrent des grenailles de plomb.<br /><br />Le nom français aigle vient du latin aquila, peut-être par l'intermédiaire de l'ancien provençal aigla (ce qui expliquerait le g français). Le nom latin – repris à l'époque moderne pour désigner le genre Aquila – se continue dans d'autres langues latines comme l'espagnol águila (es). Le nom français est passé dans l'anglais pour devenir eagle. En revanche, l'allemand Aar ou Adler (ancien adelar, littéralement aigle noble) et le grec αετός (el) (aetós) ont d'autres origines.</h></hist><hist><titre1>Behind the scene</titre1><h>Renard est un terme ambigu qui désigne le plus souvent en français les canidés du genre Vulpes, le plus commun étant le Renard roux (Vulpes vulpes). Toutefois, par similitude physique, le terme est aussi employé pour désigner des canidés appartenant à d'autres genres, comme les genres Atelocynus, Cerdocyon, Dusicyon, Otocyon, Lycalopex et Urocyon.</h></hist><cred>made by Azel</cred></pres>  
     </center>

    Dans la fiche CSS :
    Code:
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,700italic,800,800italic,300,300italic,600italic);
      @import url(https://fonts.googleapis.com/css?family=Great+Vibes);
    pres
    {
      background: url(http://i35.servimg.com/u/f35/19/45/34/89/imagef10.png) top left 60px no-repeat, #f2efef;
      display: block;
      width: 450px;
      padding: 25px;
      text-align: left;
      font-family: Verdana;             /* Pour changer la police il suffit de remplacer Verdana par celle qui te plaît le plus */
      font-size: 11px;
    }
    pres img#avatar
    {
      width: 200px;
      height: 320px;
      border: 2px solid #dcc9c9;
      box-shadow: 0px 0px 8px black;
    }
      
    infos
    {
      display: block;
      float: right;
      height: 318px;
      padding: 0px 8px 8px;
      width: 217px;
      font-size: 11px;
      color: #1f0f11;
      text-shadow: 0px 0px 8px #fff;
      background-color: rgba(255, 255, 255, 0.5);
    }
    infos inf
    {
      display: block;
      width: 100%;
      height: 288px;
      overflow-y: auto;
    }
      
    titre
    {
      display: block;
      color: #9E6B6B;
      text-shadow: 0px 0px 8px black;
      font-size: 40px;
      font-family: Great Vibes;
      text-align: center;
      margin-top: 8px;
    }

    titre1
    {
      display: block;
      color: #9E6B6B;
      text-shadow: 0px 0px 8px black;
      font-size: 40px;
      font-family: Great Vibes;
      margin-top: -30px;
      margin-left: 30px;
    }
      
    infos c
    {
      text-shadow: 0px 0px 8px #fff;
      color: #aa525f;
      font-size: 13px;
      font-weight: 600;
      font-family: Open Sans;      /* pareil ici */
      letter-spacing: -1px;          /* espace entre les lettres des champs */
      line-height: 10px;
    }

    hist
    {
      display: block;
      margin-top: 60px;
      width: 426px;
      padding: 2px 12px 12px;
      color: #1f0f11;
      background-color: rgba(255, 255, 255, 0.5);
    }

    hist h
    {
      display: block;
      text-align: justify;
      line-height: 12px;
      margin-top: -8px;
    }

    hist h#overflow
    {
      height: 200px;
      overflow-y: auto;
    }

    cred
    {
      text-align: center;
      display: block;
      position: absolute;
      color: #9E6B6B;
      letter-spacing: -1px;
      margin-bottom: -15px;
      height: 13px;
      width: 450px;
      padding-top: 5px;
      font-size: 10px;
    }

    Une balise
    Code:
    <br>
    peut être remplacée par un simple saut de ligne.

    N'hésite pas si tu as des questions !
    • Revenir en haut
    FROSTendoloris
    FROSTendoloris
    FémininAge : 31Messages : 206

    Dim 24 Juil 2016 - 20:39

    Je vais aller installer ça dans mon forum et je te tiendrai au courent ! Very Happy
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 21:26