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 relations codage simplifié

    Alumine
    Alumine
    FémininAge : 21Messages : 488

    le Mer 25 Juin 2014 - 12:28

    Rappel du premier message :

    Bonjour !
    Alors voilà une petite fiche de relations assez basique, avec quelques effets CSS. Pour que le code soit utilisable simplement, j'ai volontairement séparé le CSS du HTML. L'inconvénient, c'est que la personnalisation devient un peu plus compliquée. Bref, trêve de bavardages, voilà un aperçu!









    Qui est-ce ?
    Be happy, become crazy !

    BEAU ❖ PARFAIT ❖ FANTASTEEK
    SURDOUÉ ❖ UNIQUE ❖ SYMPATHIQUE

    Anglais, aime le jus d'orange et les mannequinettes en bois.




    Charles Frederick Worth

    127 ans, émissaire de Dieu



    On recherche
    -Un meilleur ami à noyer sous un flot de paroles
    -Une maman
    -Un papa pour construire un lit
    -Un souffre-douleur, disponible 24h/24 sachant se plaindre juste ce qu'il faut, beau pour prendre plaisir à le défigurer, disposé à rester amorphe en endurant des coups, échangeable à vie.
    -Un ennemi, histoire de pas trop s'ennuyer.

    Liste des RPs
    -On ne badine pas avec l'amour, Musset
    -Les Plaideurs, Racine
    -Chatterton, Vigny
    -L'avare, Molière
    -Les précieuses ridicules, Molière
    -Le Bourgeois Gentilhomme, Molière
    -Phèdre, Platon
    -Le jeu de l'amour et du hasard, Marivaux
    -Bérénice, Racine






    Mes amis




    Prêtre-roi d'Inanna
    Suisse
    17 ans
    Très mignonne

    ♥ ♥ ♥
    Miss Bernina
    Je l'aiiimeuh...




    Larbin de Nanna
    Allemand
    35ans
    Prévoyant
    Mon meilleur ami
    Singer
    Lui, c'est mon meilleur ami. Il se promène toujours avec son parapluie, comme ça pas de risque de faire gonfler le bois! Hé oui, il tient à rester mince, Singer... En plus il chante, des fois.



    Ennemis




    Créanne d'Ersh
    Canadien
    368 ans
    Démoniaque
    Mon ennemi juré.
    Mr. Pfaff
    Il est méchannnnnnt Maman!


    Et maintenant le code, en plusieurs parties pour simplifier la chose:
    Le CSS


    Après réfection, voici le code pour avoir une fiche centrée:
    Spoiler:
    Code:




        <link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
        <style>.r_contenu{opacity:1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; ms-transition: all 0.5s;-o-transition: all 0.5s; -moz-box-shadow: 2px 2px 7px 0px #000000; -webkit-box-shadow: 2px 2px 7px 0px #000000; -o-box-shadow: 2px 2px 7px 0px #000000;box-shadow: 2px 2px 7px 0px #000000;filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=7);}.r_contenu:hover{opacity:1;}.r_image{opacity:1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); -webkit-transform: rotate(5deg); z-index:1;} .r_image:hover{ opacity:0;  transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg);}.r_titre{font-size:35px; font-family: 'The Girl Next Door', cursive; color: #C9EAA5; text-shadow: 2px 2px 4px black; text-align: center; margin: auto;font-weight: bold;}.r_soustitre{font-size:20px; font-family: 'The Girl Next Door', cursive; color: #C9EAA5; text-shadow: 1px 1px 2px black; text-align: center; margin: auto;}.r_titre2{font-size:20px; font-family: 'The Girl Next Door', cursive; color: black; text-shadow: 1px 1px 2px #C9EAA5; font-weight: bold;}.r_zone{ background: white; overflow: auto; border-top: 7px solid #C9EAA5; border-bottom: 7px solid #C9EAA5; -moz-box-shadow: 2px 2px 7px 0px #000000; -webkit-box-shadow: 2px 2px 7px 0px #000000; -o-box-shadow: 2px 2px 7px 0px #000000;box-shadow: 2px 2px 7px 0px #000000; filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=7); text-align: left;}.relations{background: #2E372E; border-radius: 25px; border-top: 8px solid #C9EAA5; border-bottom: 8px solid #C9EAA5; position: relative;width: 500px;}.r_iun{width: 140px; height: 140px; position: absolute; top: 20px;left: 20px;  z-index:1;}.r_cun{width: 120px; height: 120px; background:white; position: absolute; top: 20px; left: 20px; padding: 10px;}.r_zun{width: 280px; height: 120px; position: absolute; top: 20px; left: 180px; padding: 10px; border:0;}.r_header{width: 460px; height: 220px; position: absolute; top: 30px; left: 20px;}.r_cdeux{width: 430px; height: 190px; background:white; position: absolute; top: 30px; left: 20px; padding: 15px;}.r_zdeux{width: 200px;height: 200px; padding:10px;}</style>
        <center>
        <div class="relations"><div style="position: relative; width:500px; height: 270px;">
        <div class="r_image r_header" style="background-image: url(http://i39.servimg.com/u/f39/15/54/06/55/paul10.jpg);"></div>
        <div class="r_contenu r_cdeux">
        <span class="r_titre2">Qui est-ce ?</span>
        <div style=" height:1em; width: 400px; margin: auto; border: 1px inset black;">[scroll]UNE PETITE DEVISE ? [/scroll]</div>
        QUALITÉ ❖ DÉFAUT ❖ QUALITÉ
        DÉFAUT ❖ QUALITÉ ❖ DÉFAUT

        Nationalité, préférences, autres

        [right]<a href="ADRESSE DE LA PAGE">texte du lien</a>[/right]

        </div></div>
        <div class="r_titre">VOTRE NOM</div>
        <div class="r_soustitre">AGE, CLASSE ET RANG</div>

        [center]<table width="470"><tr><td><div class="r_zone r_zdeux"><span class="r_titre2">On recherche</span>
        -VOUS CHERCHEZ UN AMI?
        </div></td><td width="10"></td><td><div class="r_zone r_zdeux"><span class="r_titre2">Liste des RPs</span>
        -LISTE DE VOS RPs
        </div></td></tr></table>[/center]

        </div>
        <div class="r_titre">AMI</div>
        <div class="relations" style="height:180px">
        <div class="r_image r_iun" style="background-image: url('http://i39.servimg.com/u/f39/15/54/06/55/paul210.jpg');"></div>
        <div class="r_contenu r_cun">
        Rang
        Nationalité
        Age
        Qualité
        type de lien
        </div><div class="r_zone r_zun">
        <span class="r_titre2">SON NOM</span>
        DESCRIPTION DE VOTRE LIEN AVEC LUI/ELLE</div>
        </div>
        <div class="r_titre">ENNEMI</div>
        <div class="relations" style="height:180px">
        <div class="r_image r_iun" style="background-image: url('http://i39.servimg.com/u/f39/15/54/06/55/paul210.jpg');"></div>
        <div class="r_contenu r_cun">
        Rang
        Nationalité
        Age
        Qualité
        type de lien
        </div><div class="r_zone r_zun">
        <span class="r_titre2">SON NOM</span>
        DESCRIPTION DE VOTRE LIEN AVEC LUI/ELLE</div>
        </div>
        </center>

    Comme cette fiche est prévue pour être postée dans les messages, les sauts de lignes sont de véritables sauts de ligne, non pas des balises br.
    Voilà! ~


    J'attaque la seconde partie, la personnalisation:


    Dernière édition par Alumine le Lun 18 Aoû 2014 - 20:31, édité 2 fois
    Ptite Louve
    Ptite Louve
    FémininAge : 28Messages : 33

    le Mer 17 Fév 2016 - 13:50

    bonjour :)

    jolie fiche :)

    Merci à toi pour ce beau travail :)
    Pucky
    Pucky
    FémininAge : 22Messages : 44

    le Mer 17 Fév 2016 - 17:32

    Elle est superbe ta fiche !!
    MeowLowDee
    MeowLowDee
    FémininAge : 27Messages : 72

    le Lun 21 Mar 2016 - 9:34

    Merci beaucoup, je suis en totale adoration x)
    MeowLowDee
    MeowLowDee
    FémininAge : 27Messages : 72

    le Lun 21 Mar 2016 - 11:30

    Désolée du double post mais je ne peux pas éditer Oo Donc je voulais dire que j'ai rajouté votre copyright en bas de la fiche voilà voilà.
    Fleazy
    Fleazy
    FémininAge : 14Messages : 31

    le Lun 28 Mar 2016 - 10:04

    Merci
    thidabou
    thidabou
    FémininAge : 18Messages : 37

    le Lun 28 Mar 2016 - 21:09

    J'adore ! Merci beaucoup Very Happy
    Kingdom.
    Kingdom.
    FémininAge : 19Messages : 54

    le Mar 5 Avr 2016 - 12:57

    Mercii !
    Orochimaru
    Orochimaru
    FémininAge : 29Messages : 209

    le Jeu 5 Mai 2016 - 21:55

    Beau travail Very Happy Merci du partage Very Happy



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    Pokkymon
    Pokkymon
    FémininAge : 23Messages : 10

    le Ven 8 Juil 2016 - 23:44

    Merci beaucoup !!
    Glimy
    Glimy
    FémininAge : 19Messages : 19

    le Sam 9 Juil 2016 - 15:49

    Merci pour le partage :)
    Dehlila
    Dehlila
    FémininAge : 37Messages : 30

    le Lun 31 Oct 2016 - 13:01

    Merci j'adore! C'est simple comme on les aime.
    Eerie Ange's
    Eerie Ange's
    FémininAge : 18Messages : 166

    le Mar 1 Nov 2016 - 0:43

    Merci :3
    Lessien
    Lessien
    FémininAge : 37Messages : 163

    le Dim 15 Jan 2017 - 13:48

    Joli travail, merci beaucoup !
    Neya
    Neya
    FémininAge : 20Messages : 164

    le Ven 14 Avr 2017 - 0:43

    mercii
    Mathilde .M
    Mathilde .M
    FémininAge : 15Messages : 14

    le Sam 29 Avr 2017 - 16:04

    C'est juste trop beau
    mikagekun
    mikagekun
    FémininAge : 22Messages : 27

    le Dim 16 Juil 2017 - 18:18

    Waphy's
    Waphy's
    FémininAge : 20Messages : 54

    le Ven 28 Juil 2017 - 12:41

    merci !
    benficagirl
    benficagirl
    FémininAge : 33Messages : 395

    le Mer 25 Oct 2017 - 22:23

    Merci :)
    Pelagius
    Pelagius
    MasculinAge : 20Messages : 5

    le Dim 29 Oct 2017 - 15:32

    Merci beaucoup ! Je cherchais une fiche simple vu que je suis un débutant total... et la tienne est à la fois facile à prendre en main et belle ! C'est parfait ! Encore merci !!
    PockyBanana
    PockyBanana
    FémininAge : 29Messages : 35

    le Mar 31 Oct 2017 - 15:26

    Merci beaucoup pour le partage, j'aime beaucoup ! **
    Desmnas
    Desmnas
    MasculinAge : 21Messages : 12

    le Jeu 4 Jan 2018 - 12:24

    Merci pour cette petite fiche de relation
    Mirony
    Mirony
    FémininAge : 31Messages : 44

    le Mer 28 Mar 2018 - 20:16

    J'adore c'est vraiment très beau!
    Alice's Substitute
    Alice's Substitute
    FémininAge : 23Messages : 12

    le Jeu 24 Mai 2018 - 2:42

    Charmant :o merci du partage !
    Yuna Kazama
    Yuna Kazama
    FémininAge : 26Messages : 100

    le Lun 8 Oct 2018 - 17:08

    Merci et jolie la fiche ^^
    Contenu sponsorisé


      La date/heure actuelle est Mer 26 Juin 2019 - 22:44