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.


    Codage type Skype

    .sapphire
    .sapphire
    FémininAge : 24Messages : 38

    le Dim 10 Sep 2017 - 20:04

    Bonjour ! Suite à une demande de codage voici un code en livre service pour un code style Skype.

    Petit aperçu:
    Codage type Skype AxMJHfp

    Une fois que vous dépassez le cadre une barre de défilement apparaîtra pour que vous puissiez lire tous les messages. Une petit merci vous permettra de faire apparaître le code :

    Le code:
    Code:
    <style type="text/css">.cadreblanc{background-color: #fff; width: 500px; height: 400px;} .imagepseudo{width: 70px; height: 70px; border-radius: 100px;} .cadrepseudo{width: 215px; height: 20px; border-radius: 20px; background:#C7EDFC; padding: 20px;} .pseudo{color: #D34A77; font-size: 25px; font-family: arial; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff;} .cadreoverflow{width: 500px; height: 280px; background:#fff; overflow: auto;} .imagemessage{width: 50px; height: 50px; border-radius: 100px;} .flechegauche{width:0; height:0; border-style: solid; border-width: 5px 8px 5px 0; border-color:transparent; border-right-color:#F0F4F8; margin-top: -10px;} .cadremessagegris{width: 360px; background:#F0F4F8; padding: 12px; display: inline-block;} .cadremessagespan{color: #000; font-size: 15px; font-family: arial;} .heure{color: #667486; font-size: 10px; font-family: arial;} .espace{width: 59px; height: 50px; color: #fff;} .cadremessagebleu{width: 360px; background:#C7EDFC; padding: 12px; display: inline-block;} .flechedroite{width:0; height:0; border-style: solid; border-width: 5px 0 5px 8px; border-color:transparent; border-left-color:#C7EDFC; margin-top: -10px;} .cadrecredit{background: #fff; width: 500px; text-align: right;} .cadrecreditspan{font-family: arial; font-size: 7px; color: #667486;}</style>

    <div class="cadreblanc"><table><tr><td><img src="https://l-userpic.livejournal.com/123566551/68620810" class="imagepseudo"></td><td><img src="http://i.imgur.com/nivmRVR.png"/>
    <img src="http://i.imgur.com/xtDxbOW.png"/></td><td><div class="cadrepseudo"><span class="pseudo">Pseudo</span></div></td><td><img src="https://img4.hostingpics.net/pics/638601Sanstitre1.png" style="margin-right: 4px;"></img><img src="https://img4.hostingpics.net/pics/844579Sanstitre2.png"style="margin-right: 4px;"></img><img src="https://img4.hostingpics.net/pics/405865Sanstitre3.png"/></td>
    </tr><tr><td colspan="4"><img src="http://i.imgur.com/0JvNsIJ.png"/></td></tr></table><div class="cadreoverflow"><table><tr><td><img src="https://l-userpic.livejournal.com/123566551/68620810" class="imagemessage"></td><td><div style="display: inline-block;"><div class="flechegauche"></div></div><div class="cadremessagegris"><span class="cadremessagespan">Message reçu</span></div></td><td><span class="heure">00:00</span></td></tr></table><table><tr><td><div class="espace">b</div></td><td><div class="cadremessagegris"><span class="cadremessagespan">Message reçu</span></div></td><td><span class="heure">00:00</span></td></tr></table><table><tr><td><span class="heure">00:00</span></td><td><div class="cadremessagebleu"><span style="cadremessagespan">Message reçu</span></div><div style="display: inline-block;"><div class="flechedroite"></div></div></td><td><img src="https://l-userpic.livejournal.com/123566551/68620810" class="imagemessage"></td></tr></table><table><tr><td><span class="heure">00:00</span></td><td><div class="cadremessagebleu"><span class="cadremessagespan">Message reçu</span></div></td></tr></table>
    </div></div><div class="cadrecredit"><span class="cadrecreditspan">made by .sapphire</span></div>

    Concernant les images celle du pseudo est automatiquement redimensionné en 70px et les plus petites des messages en 50px. Bien sûre vous pouvez changez les images comme vous le voulez, j'ai mis la même (le Pikachu) pour être sûre que vous ne changez pas les autres images. L'adresse de l'image Pikachu est la suivante : https://l-userpic.livejournal.com/123566551/68620810

    Il est possible de changer les couleurs les deux codes couleurs utilisés sont les suivants :
    le bleu : #C7EDFC
    Le gris : #F0F4F8

    Pour changer la couleur du cadre de fond pour les pseudo trouvez la ligne suivante
    Code:
    .cadrepseudo{width: 215px; height: 20px; border-radius: 20px; background:#C7EDFC; padding: 20px;}
    et remplacez le code couleur

    Pour changer la couleur des cadres de message gris trouvez la ligne suivante
    Code:
    .cadremessagegris{width: 360px; background:#F0F4F8; padding: 12px; display: inline-block;}
    et remplacez le code couleur

    N'oubliez pas de changer la couleur de la flèche qui va avec la ligne est la suivante :
    Code:
    .flechegauche{width:0; height:0; border-style: solid; border-width: 5px 8px 5px 0; border-color:transparent; border-right-color:#F0F4F8; margin-top: -10px;}

    Même opération pour les cadres de message bleu trouvez la ligne suivante
    Code:
    .cadremessagebleu{width: 360px; background:#C7EDFC; padding: 12px; display: inline-block;}
    et remplacez le code couleur

    Et pour la flèche trouvez la ligne suivante :
    Code:
    .flechedroite{width:0; height:0; border-style: solid; border-width: 5px 0 5px 8px; border-color:transparent; border-left-color:#C7EDFC; margin-top: -10px;}


    Pour rajouter des lignes de messages à présent.

    Pour rajouter un message gris avec image et flèche ajoutez une ligne comme celle là :
    Code:
    <table><tr><td><img src="https://l-userpic.livejournal.com/123566551/68620810" class="imagemessage"></td><td><div style="display: inline-block;"><div class="flechegauche"></div></div><div class="cadremessagegris"><span class="cadremessagespan">Message reçu</span></div></td><td><span class="heure">00:00</span></td></tr></table>

    Pour rajouter une message gris sans image et flèche ajoutez une ligne comme celle là:
    Code:
    <table><tr><td><div class="espace">b</div></td><td><div class="cadremessagegris"><span class="cadremessagespan">Message reçu</span></div></td><td><span class="heure">00:00</span></td></tr></table>

    Pour rajouter un message bleu avec image et flèche ajoutez une ligne comme celle là :
    Code:
    <table><tr><td><span class="heure">00:00</span></td><td><div class="cadremessagebleu"><span style="cadremessagespan">Message reçu</span></div><div style="display: inline-block;"><div class="flechedroite"></div></div></td><td><img src="https://l-userpic.livejournal.com/123566551/68620810" class="imagemessage"></td></tr></table>

    Pour rajouter une message bleu sans image et flèche ajoutez une ligne comme celle là:
    Code:
    <table><tr><td><span class="heure">00:00</span></td><td><div class="cadremessagebleu"><span class="cadremessagespan">Message reçu</span></div></td></tr></table>

    Attention il est important de "coller" les différentes balises table si ne vous ne voulez aucun espace indésirable entre les messages.


    Merci de votre attention et bon RPG à tous !
    Onyx
    Onyx
    FémininAge : 25Messages : 3288

    le Sam 23 Fév 2019 - 3:25

    C'est tout bon, je déplace dans le Libre Service !

    Merci de ton partage ♥



    Kelalin
    Kelalin
    FémininAge : 26Messages : 2075

    le Sam 23 Fév 2019 - 11:46

    Merci pour le partage :)
    Pandyakuza
    Pandyakuza
    FémininAge : 25Messages : 5

    le Lun 3 Juin 2019 - 2:46

    C'est parfait *_*
    Nasträlya
    Nasträlya
    FémininAge : 24Messages : 164

    le Mer 7 Aoû 2019 - 13:26

    Bonjour! J'utilise ton code actuellement, et c'est juste pour te dire que dans le premier message bleu, tu as marqué "span STYLE" alors qu'il fallait marquer "span CLASS" =) Je m'en suis rendu compte en changeant les couleurs!

    Voilà! sinon super ton code ♥



    :friends:
    Codage type Skype 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Contenu sponsorisé


      La date/heure actuelle est Sam 17 Aoû 2019 - 13:26