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
    Dark-Ice
    FémininAge : 23Messages : 173

    le Jeu 1 Jan 2015 - 15:23

    Merci c'est très beau



    avatar
    Istina
    FémininAge : 24Messages : 111

    le Dim 4 Jan 2015 - 19:42

    Très jolie Very Happy
    avatar
    SokoMinami
    FémininAge : 27Messages : 16

    le Sam 2 Mai 2015 - 9:11

    J'adore *.* Merci du partage
    avatar
    Monox76
    MasculinAge : 28Messages : 64

    le Sam 2 Mai 2015 - 18:59

    Excellente fiche, merci beaucoup !



    avatar
    Nutop
    FémininAge : 16Messages : 254

    le Lun 25 Mai 2015 - 20:30

    Merci beaucoup, je vais tenter de l'utiliser ^^






    avatar
    Chèlha
    FémininAge : 25Messages : 121

    le Lun 25 Mai 2015 - 20:41

    Merci
    avatar
    Kirito
    MasculinAge : 23Messages : 200

    le Mar 26 Mai 2015 - 17:39

    Merci =)
    avatar
    Soleilou
    FémininAge : 18Messages : 49

    le Mar 26 Mai 2015 - 19:09

    Merci :3
    avatar
    Presto
    FémininAge : 18Messages : 18

    le Sam 6 Juin 2015 - 21:30

    aaaah c'est trop magnifiqueeeu
    bravoo et merci ^^
    avatar
    Nevr0z
    FémininAge : 30Messages : 74

    le Dim 14 Juin 2015 - 2:32

    Merci :) !
    avatar
    Katheliina
    FémininAge : 22Messages : 11

    le Mar 14 Juil 2015 - 13:01

    Personnellement, j'aime beaucoup les couleurs, c'est plutôt sympa ! Merci pour cette fiche :3
    avatar
    Rudein
    FémininAge : 22Messages : 83

    le Lun 20 Juil 2015 - 9:15

    merci beaucoup pour le partage !
    avatar
    Skyera
    FémininAge : 19Messages : 3

    le Ven 24 Juil 2015 - 16:27

    C'est génial *-* Merciii !
    avatar
    Aiolosly
    FémininAge : 20Messages : 106

    le Jeu 30 Juil 2015 - 23:21

    Merciiii ! Elle est divine !



    avatar
    GoldenGrams
    FémininAge : 18Messages : 35

    le Lun 3 Aoû 2015 - 9:51

    Merci du partage, très jolie fiche. ^^
    avatar
    ecosystem
    FémininAge : 20Messages : 38

    le Sam 15 Aoû 2015 - 20:28

    Merci ! Very Happy
    avatar
    Kelalin
    FémininAge : 26Messages : 1979

    le Dim 16 Aoû 2015 - 22:49

    Merci beaucoup du partage ! (*^▽^*)
    avatar
    Louh
    FémininAge : 26Messages : 15

    le Lun 17 Aoû 2015 - 18:54

    Merciii !
    avatar
    Mimio
    FémininAge : 24Messages : 179

    le Mar 18 Aoû 2015 - 1:32

    Merci



    avatar
    MeowLowDee
    FémininAge : 27Messages : 72

    le Sam 19 Sep 2015 - 13:47

    J'aime beaucoup, merci Very Happy
    avatar
    Bamboocoon
    FémininAge : 26Messages : 66

    le Mer 23 Déc 2015 - 13:45

    Merci beaucoup ! Très beau travail Very Happy
    avatar
    Lalanuy
    FémininAge : 20Messages : 9

    le Sam 26 Déc 2015 - 0:40

    Magnifique code merci beaucoup ^^
    avatar
    Précious'
    FémininAge : 21Messages : 5

    le Jeu 7 Jan 2016 - 17:02

    Merci beaucoup ^^
    avatar
    Fraise •
    FémininAge : 20Messages : 20

    le Ven 8 Jan 2016 - 23:08

    Merci c:
    avatar
    Dearborn
    FémininAge : 24Messages : 110

    le Sam 23 Jan 2016 - 0:22

    Merci!
    Contenu sponsorisé


      La date/heure actuelle est Mer 19 Déc 2018 - 11:32