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 : 20Messages : 488

    le Mer 25 Juin 2014 - 12:28

    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
    narakye
    FémininAge : 23Messages : 446

    le Mer 25 Juin 2014 - 12:33

    Merci beaucoups Very Happy
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Mer 25 Juin 2014 - 17:04

    Pourquoi n'as-tu donc pas participé au Creativ' Mess 8 avec ta fiche ?!
    Elle est classe en plus !

    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Jeu 26 Juin 2014 - 15:22

    Hum, c'est-à-dire que j'avais oublié que ça existait, même si (comme une petite fille intelligente que je suis) j'avais envisagé d'y participer...
    Enfin c'est peut-être pas encore trop tard... *part relire le règlement*



    Alumine
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Jeu 26 Juin 2014 - 17:43

    Les votes sont en cours donc pour le Creativ Mess 8 c'est trop tard x)

    avatar
    Neva
    FémininAge : 26Messages : 18564

    le Ven 27 Juin 2014 - 17:41

    Hey Alumine,
    Est-ce que tu pourrais poster tous les éléments de précision que tu donnes dans ton lien directement dans le sujet ? On préfère des LS avec le maximum d'infos possible :)



     
    avatar
    CaraDelevngnie
    FémininAge : 18Messages : 368

    le Mar 15 Juil 2014 - 21:45

    Ho ben ça moi j'aime bien *w* J'aime vraiment bien ! Surtout avec la pitite animation et tout... Cha ch'est cool :3



    avatar
    mikalus
    MasculinAge : 46Messages : 92

    le Dim 20 Juil 2014 - 9:54

    Amusant... Cool 
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Dim 17 Aoû 2014 - 14:28

    Bonjour!
    Alors à propos du centrage... Eh bien je n'y avais absolument pas pensé, puisque la fiche fait exactement la taille de mon forum!
    Mais effectivement ça paraît intéressant d'ajouter cette possibilité à mon code (merci Mikalus!)
    Du coup j'ai réédité le code à partir de celui fourni par toi (enfin Mikalus quoi) et je l'ai "nettoyé" afin que tout soit propre!
    Enfin bref, je vais éditer mon premier message et rajouter ça dedans (=



    Alumine
    avatar
    mikalus
    MasculinAge : 46Messages : 92

    le Dim 17 Aoû 2014 - 15:19

    Je l'avais dis, 'imparfait', c'est donc bien que tu y mets un peu d'ordre.. Wink
    Le mec un peu chiant...
    Ça serait parfait avec un copyright intégré en te nommant dans un lien vers ce topic. Wink

    Pour le moment, je ne l'ai pas encore vraiment utilisé, mais j'ai déjà rajouté un truc du genre ;
    (c) Design by Alumine

    En tout cas, j'adore la description de la mise en place, d'autre pourrait prendre exemple, car c'est rudement pratique !  :bisou: 
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Lun 18 Aoû 2014 - 20:22

    Haha, merci =^^=
    un copyright... je me sens pro là! Mais si c'est pour NU je vais rajouter ça (=
    Et je vais m'arranger pour que ce ne soit pas trop dur à enlever, c'est pas non plus comme si j'étais une vraie codeuse, j'ai juste appris "sur le pouce" pour mon forum!

    Et merci pour la description, j'y ai passé beaucoup de temps pour que mes membres ne s'y perdent pas trop!
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Jeu 28 Aoû 2014 - 0:09

    Ça en est où ici (: ?

    avatar
    Chione
    MasculinAge : 17Messages : 397

    le Jeu 28 Aoû 2014 - 14:44

    J'adore l'effet de la bannière mais je trouve que les couleurs ne sont pas terribles et les ombres des boîtes un peu trop épaisses ! Mais sinon j'adore la bannière !




    FEZ!FEZ!
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Jeu 28 Aoû 2014 - 23:59

    Après réflexion je suis d'accord avec toi, Chione, ce truc manque de subtilité.

    Et A-lice, à vrai dire je n'en ai aucune idée, je ne sais pas du tout comment fonctionne le LS, alors si il reste quelque chose à modifier, ce sera avec plaisir, et sinon... Heu, je sais pas ?



    Alumine
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Ven 29 Aoû 2014 - 13:24

    À la base quand tu le proposes ici ce n'est pas pour qu'il soit modifié, mais je t'ai laissé du temps parce qu'apparemment les conseils donnés ici t'aidaient. Après l'avis de Chione ne compte pas dans le sens où c'est ton LS donc c'est toi qui le propose tel que tu l'utilises ou que tu l'as créé. Si quelqu'un le veut, mais qu'il le veut en rose il modifiera lui-même les couleurs Wink

    Et moi je le trouve très bien comme ça (: Donc je vais le déplacer.

    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Ven 29 Aoû 2014 - 18:39

    Merci beaucoup ! cheers
    avatar
    Pythia
    FémininAge : 29Messages : 176

    le Mar 2 Sep 2014 - 22:26

    Elle est extra cette fiche ^^



    avatar
    Amerawdwr
    MasculinAge : 24Messages : 17

    le Ven 5 Sep 2014 - 23:50

    Merci mille fois pour cette jolie fiche, toute simple en effet mais terriblement efficace.



    L'Empereur de toutes choses.
    avatar
    laboukineuze
    FémininAge : 28Messages : 6

    le Mer 17 Sep 2014 - 12:20

    merci!



    :wantsleep:
    avatar
    Féhéla
    FémininAge : 44Messages : 233

    le Jeu 18 Sep 2014 - 18:23

    merci
    avatar
    Sasha57
    FémininAge : 23Messages : 35

    le Mer 1 Oct 2014 - 21:34

    Han il est super joli et bien fait ce code *_*

    Merci <3
    avatar
    Bamboocoon
    FémininAge : 25Messages : 66

    le Dim 16 Nov 2014 - 10:25

    Très sympathique ! Merci beaucoup ^^
    avatar
    Zoé
    FémininAge : 18Messages : 185

    le Sam 22 Nov 2014 - 17:27

    merciii



    avatar
    Moona Neko
    FémininAge : 22Messages : 70

    le Mar 2 Déc 2014 - 13:26

    Merci Very Happy
    avatar
    Sokaro
    FémininAge : 21Messages : 195

    le Mer 3 Déc 2014 - 19:00

    Merci beaucoup! Très belle fiche :3




    (Signature provisoire.)
    Contenu sponsorisé


      La date/heure actuelle est Ven 15 Déc 2017 - 5:24