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é

    Partagez
    avatar
    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
    avatar
    Ptite Louve
    FémininAge : 28Messages : 33

    le Mer 17 Fév 2016 - 13:50

    bonjour :)

    jolie fiche :)

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

    le Mer 17 Fév 2016 - 17:32

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

    le Lun 21 Mar 2016 - 9:34

    Merci beaucoup, je suis en totale adoration x)
    avatar
    MeowLowDee
    FémininAge : 26Messages : 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à.
    avatar
    Fleazy
    FémininAge : 18Messages : 31

    le Lun 28 Mar 2016 - 10:04

    Merci
    avatar
    thidabou
    FémininAge : 17Messages : 37

    le Lun 28 Mar 2016 - 21:09

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

    le Mar 5 Avr 2016 - 12:57

    Mercii !
    avatar
    Orochimaru
    FémininAge : 28Messages : 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."
    avatar
    Pokkymon
    FémininAge : 23Messages : 10

    le Ven 8 Juil 2016 - 23:44

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

    le Sam 9 Juil 2016 - 15:49

    Merci pour le partage :)
    avatar
    Dehlila
    FémininAge : 36Messages : 27

    le Lun 31 Oct 2016 - 13:01

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

    le Mar 1 Nov 2016 - 0:43

    Merci :3
    avatar
    Lessien
    FémininAge : 36Messages : 163

    le Dim 15 Jan 2017 - 13:48

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

    le Ven 14 Avr 2017 - 0:43

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

    le Sam 29 Avr 2017 - 16:04

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

    le Dim 16 Juil 2017 - 18:18

    avatar
    Waphy's
    FémininAge : 19Messages : 54

    le Ven 28 Juil 2017 - 12:41

    merci !
    avatar
    benficagirl
    FémininAge : 32Messages : 383

    le Mer 25 Oct 2017 - 22:23

    Merci :)
    avatar
    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 !!
    avatar
    PockyBanana
    FémininAge : 28Messages : 31

    le Mar 31 Oct 2017 - 15:26

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

    le Jeu 4 Jan 2018 - 12:24

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

    le Mer 28 Mar 2018 - 20:16

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

    le Jeu 24 Mai 2018 - 2:42

    Charmant :o merci du partage !
    avatar
    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 24 Oct 2018 - 1:39