Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    Petite fiche toute en rondeur... mais "intéractive" cette fois !

    Partagez
    FémininAge : 25Message(s) : 113
    Azylis
    le Dim 28 Avr 2013 - 20:46
    Voici une fiche aux allures de tableau... et pourtant ! Aucune balise "table" n'a été utilisée pour la réaliser. Passez votre curseur sur les différentes cases pour les faire réagir ^^

    Comme toutes les autres fiches, n'enlevez pas le crédit s'il vous plait, quitte à ne laisser que le lien de N.U Wink (le code est assez long, sorry)




    Prénom




    Nom : blabla
    Prénom : Blabla
    Âge : Blabla
    Rang : Blabla
    Rôle : Blabla
    Pouvoir(s) : blablabla
    Élément : bliblibli
    Objet magique : Blobloblo
    familier : Blublublu
    Rune : Blebleble

    Apparence Physique
    Une petite description s'impose ? Okay, "I'm pumped !" comme dirait Piggeh (est-ce que quelqu'un comprendra la référence ?). Alors j'ai les cheveux couleurs arc-en-ciel, bouclés et raides à la fois, tellement longs que je passe le balai quand je me déplace (c'est un gain de temps considérable, croyez-moi !). Mes yeux sont à la fois rouges, bleus et violets, avec de longs cils. Mon regard est souvent décrit comme hypnotique, et c'est très pratique pour soutirer les réponses d'examens aux profs. Niveau corps, je fais du 95 Z et j'ai une taille de guêpe, je suis aussi grande, mais pas trop non plus, sans pour autant être petite. Bref, je suis parfaite ! :3 Mon nom ? Et bien comme je n'aime pas faire comme tout le monde, je ne l'ai pas mis dans la première case, mais je m'appelle Mary-Sue !

    Caractère
    Le texte ci-dessus est bien sûr totalement ironique, c'était pour montrer qu'on pouvais mettre un paragraphe assez consistant sans qu'il y ait de problèmes.
    Goûts
    Normalement, le coup des textes longs marche aussi ici, mais vérifions cela. Dans ma précédente proposition de fiches, je vous avais parlé des puces d'au d'Amazonie équatoriale n'est-ce pas ? Pardon ? C'était "centrale" ? Vous chipotez, c'est dingue ! Bref. Les puces d'eau, aussi appelées Daphnies, sont des petits crustacés mesurant de un à cinq millimètres, de la famille du genre Daphnia phyllopodes cladocères. Elles vivent dans les eaux douces et stagnantes, quelques espèces supportant des conditions légèrement saumâ-... *se fait kidnapper et enfermer dans un placard*
    Laissez-moi sortir bande d'incultes !!! >O<

    Autre
    Courage, c'est presque fini !

    © Azylis de Never-Utopia



    La encore, la taille du vava ne doit pas dépasser 220px de large, sauf si vous modifiez les dimensions de la fiche Wink

    Code:
    <style>div.MiniBoite1{Float: left; margin-left: 25px; margin-bottom: 25px; padding : 10px 10px; text-align : left; width : 220px; height : 90px; Overflow: Hidden; border-top-left-radius: 100px; -moz-border-radius-top-left: 100px; -webkit-border-radius-top-left: 100px; Border-width : 1px 1px 1px 5px; Border-style: solid dotted dotted solid; Border-color : #060e11; -webkit-transition: -webkit-border-radius  2s ease-out; -moz-transition: -moz-border-radius 2s ease-out; -o-transition: border-radius 2s ease-out; transition: border-radius 2s ease-out; }div.MiniBoite1:hover{-webkit-border-radius: 5px 40px; -moz-border-radius: 5px 40px; border-radius: 5px 40px; Overflow : auto;}div.MiniBoite2{Float: right; margin-right: 25px; margin-bottom: 25px; padding : 10px 10px; width : 220px; height : 90px; text-align : left; border-top-right-radius: 100px; -moz-border-radius-top-right: 100px; -webkit-border-radius-top-right: 100px; Border-width : 1px 5px 1px 1px; Border-style: solid solid dotted dotted; Border-color : #060e11; Overflow: Hidden; -webkit-transition: -webkit-border-radius  2s ease-out; -moz-transition: -moz-border-radius 2s ease-out; -o-transition: border-radius 2s ease-out; transition: border-radius 2s ease-out;
    }div.MiniBoite2:hover{-webkit-border-radius: 40px 5px; -moz-border-radius: 40px 5px; border-radius: 40px 5px; Overflow : auto;}.MiniBoite3{Float: right; margin-right: 25px; margin-top : -1px; margin-bottom : 10px; width : 500px; height : 100px; border-top-right-radius: 100px; -moz-border-radius-top-right: 100px; -webkit-border-radius-top-right: 100px; border-top-left-radius: 100px; -moz-border-radius-top-left: 100px; -webkit-border-radius-top-left: 100px; Border-width : 4px 1px 1px 1px; Border-style: solid solid dotted solid; Border-color : #060e11; -webkit-transition: -webkit-border-radius  2s ease-out; -moz-transition: -moz-border-radius 2s ease-out; -o-transition: border-radius 2s ease-out; transition: border-radius 2s ease-out; Overflow : hidden; }.MiniBoite3:hover{-webkit-border-radius: 5px 5px 40px 40px; -moz-border-radius: 5px 5px 40px 40px; border-radius: 5px 5px 40px 40px; Overflow : auto;}.MiniBoite4{Float: right; margin-right: 25px; margin-top : 2px; margin-bottom : 30px; width : 500px; height : 100px; border-bottom-right-radius: 100px; -moz-border-radius-bottom-right: 100px; -webkit-border-radius-bottom-right: 100px; border-bottom-left-radius: 100px; -moz-border-radius-bottom-left: 100px; -webkit-border-radius-bottom-left: 100px; Border-width : 1px 1px 4px 1px; Border-style: dotted solid solid solid; Border-color : #060e11; -webkit-transition: -webkit-border-radius  2s ease-out; -moz-transition: -moz-border-radius 2s ease-out; -o-transition: border-radius 2s ease-out; transition: border-radius 2s ease-out; Overflow : hidden;}.MiniBoite4:hover{-webkit-border-radius: 5px 40px; -moz-border-radius: 5px 40px; border-radius: 5px 40px; Overflow : auto;}.MiniBoite5{margin-left : 3px; margin-bottom :10px; width : 700px; padding : 10px; height : 70px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; Border-width: 1px 5px; border-style: dotted solid; border-color: #060e11; Overflow: Hidden;}.MiniBoite5:hover{Overflow : auto;}</style>

    <center>
    <div style="margin-bottom: -40px;"><div style=" font-size:40px; font-style:italic; font-family: monotype corsiva; letter-spacing:2px; text-shadow: -2px -2px 2px black; color: #b2b7ff; position: relative; z-index: 3;">Prénom</div>
    </div>
    <div style="width:800px; border-top: 20px solid #7c80b2; border-right: 2px solid #7c80b2; border-bottom: 20px solid #7c80b2; border-left: 2px solid #7c80b2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #d0d0d0; color: #5b5e81; font-family: georgia; font-size: 11px; box-shadow: 0px 0px 10px #000000; position: relative; z-index: 1;">
    <div style="Float: left; margin-left: 25px; margin-top: 70px; width : 220px; Overflow: Hidden; Border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;"><img src="http://i81.servimg.com/u/f81/13/93/32/39/n_poka10.jpg" /></div>
    <div class="MiniBoite1"><b><i>Nom</i></b> : blabla
    <b><i>Prénom</i></b> : Blabla
    <b><i>Âge</i></b> : Blabla
    <b><i>Rang</i></b> : Blabla
    <b><i>Rôle</i></b> : Blabla
    </div><div class="MiniBoite2"><b><i>Pouvoir(s)</i></b> : blablabla
    <b><i>Élément</i></b> : bliblibli
    <b><i>Objet magique</i></b> : Blobloblo
    <b><i>familier</i></b> : Blublublu
    <b><i>Rune</i></b> : Blebleble
    </div>
    <div style="font-size:18px; text-shadow: -2px -2px 2px black; color: #060e11;">Apparence Physique</div><div class="MiniBoite3">TEXTE
    </div>
    <div style="font-size:18px; text-shadow: -2px -2px 2px black; color: #060e11;">Caractère</div><div class="MiniBoite4">TEXTE
    </div><div style="clear: both;"></div><div style="display: block; font-size:18px; text-shadow: -2px -2px 2px black; color: #060e11;">Goûts</div><div class="MiniBoite5">TEXTE
    </div>
    <div style="display: block; font-size:18px; text-shadow: -2px -2px 2px black; color: #060e11;">Autre</div><div class="MiniBoite5">Courage, c'est presque fini !
    </div>
    <div style="font-size:9px; text-align: right; padding-right: 50px">© Azylis de [url=http://www.never-utopia.com/] Never-Utopia[/url]</div></div>
    </center>

    En espérant que ça vous serve ^^


    FémininAge : 25Message(s) : 20
    Serere
    le Dim 28 Avr 2013 - 23:47
    C'est vachement classe, merci beaucoup =)


    | ! | "Serere" est un vieux pseudo que je n'utilise plus, donc ne soyez pas étonnés de voir écrit "Luka" (ou LukaDolls) sur mon avatar. Je ne veux pas déranger l'équipe administrative, donc je ne demanderais pas un changement de pseudo par mp, cela dit si l'un de vous passe par là et voit cette petite annonce, si ça ne le dérange pas de procéder à un changement de pseudo, ce serait agréable et je vous en serai reconnaissante, merci =) | ! |
    FémininAge : 18Message(s) : 165
    Capouccino
    le Lun 29 Avr 2013 - 14:03
    J'adore !!!! <3 Merci ^^


    "Espérer l'inespérable c'est croire en l'impossible."
    FémininAge : 27Message(s) : 25
    Kiryuu02
    le Lun 29 Avr 2013 - 21:46
    Merci pour la fiche ^^
    FémininAge : 19Message(s) : 66
    Zooé
    le Sam 18 Mai 2013 - 14:50
    Merci!
    FémininAge : 18Message(s) : 34
    Miyun
    le Sam 13 Juil 2013 - 3:13
    Omg ♥


    FémininAge : 21Message(s) : 162
    Lestrange
    le Lun 15 Juil 2013 - 10:36
    Classe :)
    FémininAge : 23Message(s) : 11
    Low
    le Lun 19 Aoû 2013 - 16:30
    Ta fiche est juste : géniale !

    Très beau travail ! Bravo Very Happy
    MasculinAge : 22Message(s) : 1
    Djaafar Watson
    le Mar 20 Aoû 2013 - 21:33
    Magnifique , vraiment. Puis-je me servir du code pour une présentation sur un forum s'il te plait ?
    FémininAge : 25Message(s) : 113
    Azylis
    le Mer 11 Sep 2013 - 23:24
    Désolée Djaafar Watson, je n'avais pas accès à internet au moment de ta question, du coup je t'ai mis un gros vent T.T

    Tant que tu mets les crédit, bien sûr que tu peux l'utiliser, elle est faite pour ça ! ^^ (et ça me fait très plaisir ^^)

    De même, merci à tous pour vos commentaires !


    FémininAge : 17Message(s) : 7
    Libellule
    le Dim 24 Nov 2013 - 1:28
    Merci beaucoup pour cette fichounette, elle est géniale. :michi2: J'adore quand les cases ramollissent. xD Merci aussi pour avoir merveilleusement enrichi mes connaissances sur les puces d'eau. 8D

    J'te l'emprunte ! :innocent: 
    FémininAge : 19Message(s) : 32
    Dilun
    le Dim 8 Déc 2013 - 16:48
    Merci pour cette belle fiche, elle est très originale, bravo !
    FémininAge : 19Message(s) : 127
    Banpaia
    le Mar 25 Mar 2014 - 11:37
    Merci !
    FémininAge : 26Message(s) : 503
    Armie
    le Mar 25 Mar 2014 - 13:38
    Merci pour le partage. Il a l'air simple à utiliser en plus, comme j'aime. x)
    MasculinAge : 17Message(s) : 162
    Nal Souclade
    le Jeu 27 Mar 2014 - 22:53
    Excellent !! Merci beaucoup !
    FémininAge : 15Message(s) : 31
    Hanako-chan
    le Dim 2 Nov 2014 - 16:02
    Super beau merci !
    Invité
    le Dim 16 Nov 2014 - 17:20
    Simple et épuré, merci je la chipe !
    MasculinAge : 20Message(s) : 36
    Lyo Jen
    le Lun 16 Nov 2015 - 23:14
    Très belle fiche ! Merci !!
    FémininAge : 24Message(s) : 1399

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kelalin
    le Mar 17 Nov 2015 - 0:17
    Merci pour le partage !
    Contenu sponsorisé
    Aujourd'hui à 12:39

      La date/heure actuelle est Sam 3 Déc 2016 - 12:39