AccueilDernières imagesRechercherS'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.


3 résultats trouvés pour fiche_relation

Fiche de liens simple mais efficace - Jeu 10 Nov 2016 - 22:37



Bonjour à tous, aujourd'hui je vous propose une fiche de lien tout simple. En effet elle est de couleur blanche et écriture noire avec ombre. Si les couleurs ne vous plaise pas, il est toute à fait possible de les changer

Pour un aperçu en image clique ici
Si tu veux l'a voir en grandeur nature clique à cet endroit

L'image dans la fiche de lien fait 200*400px. Et comme je l'ai dis précédemment, les couleurs sont modifiables.


Code:
<link href='http://fonts.googleapis.com/css?family=Megrim|Tangerine' rel='stylesheet' type='text/css' /><div style="border: 1px solid #000000; width: 500px; height: 1100px; background: white; margin: auto;">
<div style="color:black; text-align:center; text-shadow: 0px 0px 3px black; letter-spacing: 3px; font-size: 45px; font-family: 'Megrim'; padding:60px">Nom du Perso</div>
<table><tbody><tr><td><span style="padding:20px"><img src="http://www.zupimages.net/up/16/45/uug2.png"; /></span></td><td><span style="color:black; text-align:center; text-shadow: 0px 0px 3px black; letter-spacing: 3px; font-size: 35px; font-family: 'Tangerine'; padding:60px">Informations </span><br />
<div style="text-shadow: 0px 0px 3px black; color:black; letter-spacing: 1px; text-align: justify; width: 250px; background-color:#E9E4DA"><div style="margin:5px;">
Clan : <i>D'où viens tu ?</i><br />
Rang : <i>A quoi sers - tu ?</i><br />
Age : <i>Quel est ton âge ?</i><br />
Sexe : <i>Fille ou garçon ?</i><br />
Qualités / Défauts : <i> J'ai telle, telle et telle qualités.</i><br /><br /><i> En revanche j'ai tel, tel ou tel défauts.</i></div></div></td></tr></tbody></table>
<div style="color:black; text-align:center; text-shadow: 0px 0px 3px black; letter-spacing: 3px; font-size: 35px; font-family: 'Tangerine'; padding:60px">Les Liens</div><table><tbody><tr><td><span style="color:black; text-align:left; text-shadow: 0px 0px 3px black; letter-spacing: 3px; font-size: 15px; font-family: 'arial'; padding:30px">Positifs</span></td><td><span style="color:black; text-align:right; text-shadow: 0px 0px 3px black; letter-spacing: 3px; font-size: 15px; font-family: 'arial'; padding:240px">Négatifs</span></td></tr></tbody></table>


<table style="margin: auto;"><tbody><tr><td><div style="width: 220px; height: 200px; overflow:auto; background-color:#E9E4DA;text-align:justify; font-family: font-size:12px; line-height:12px; color:black; border: 1px solid #000000; margin-left:8px;"><div style="margin:5px; ">  [b]Un "ami" :[/b] Quelqu'un qu'il pourrait considérer comme un ami même si le mot "ami" est légèrement trop fort pour cette relation. - Libre

[b]Un souffre - douleur :[/b] Une personne sur lequel il pourrait passer ses nerfs ou alors pour satisfaire son envie d'énerver les autres et de les manipuler. - Libre

[b]Un protégé :[/b] De préférence une jeune personne sur lequel il passerait son temps à lui enseigner comment être comme lui, comment manipuler, énerver, ou martyriser quelqu'un - Libre
[b]Autre :[/b] si vous avez d'autres idée d'éventuels liens.
</div></div></td><td><div style="width: 220px; height: 200px; overflow:auto;background-color:#E9E4DA;text-align:justify; font-family: arial; font-size:12px; line-height:12px; color:black; border: 1px solid #000000; margin-left:8px;"><div style="margin:5px; "> [b]Un meilleur ennemi :[/b] Une personne qu'il ne pourrait pas supporter et qu'il préfère éviter pour ne pas s'énerver avec. - Libre

[b]Des ennemis :[/b] Une ou des personne(s) qu'il n'apprécierait pas. Ou plutôt des félins qui en voudrait à mon perso pour son comportement ou ses agissements. - Libre

[b]Autre :[/b] si vous avez d'autres idée d'éventuels liens.
</div></div></td></tr></tbody></table><div style="text-align:center; font-family: arial; font-size:10px; color:black">fiche by Aily</div></div>


Vous vous doutez bien que j'y ai passé du temps, alors merci de bien vouloir laisser le crédit, j'insiste sur ce point.
J'accepte toutes critiques du moment qu'elle est constructive et permette de m'améliorer.

Un petit remerciement serait apprécié ^^

Frosty Blue

Fiche de lien - The Colour for Us - Dim 26 Juin 2016 - 17:27



Bonjour,

Me revoici avec un nouveau LS de fiche de lien, qui est cette fois-ci un peu expérimentale.



Les couleurs du dégradé sont modifiables (si vous arrivez à vous  y retrouver dans ce capharnaüm) tout comme le reste. Le crédit quant à lui est indélébile.

Code:
<div class="color-topbox">
<div class="center-box"><div class="color-code"><div class="cube1"></div><div class="desc"><b>Lover</b> - Love is when the other person's happiness is more important than your own. <i>H. Jackson Brown, Jr.</i></div></div><div class="color-code"><div class="cube2"></div><div class="desc"><b>Good Friend</b> - A real friend is one who walks in when the rest of the world walks out. <i>Walter Winchell</i></div></div><div class="color-code"><div class="cube3"></div><div class="desc"><b>Friend</b> - One loyal friend is worth ten thousand relatives. <i>Euripide</i></div></div><div class="color-code"><div class="cube4"></div><div class="desc"><b>Acquaintance</b> - The beginning of an acquaintance whether with persons or things is to get a definite outline of our ignorance. <i>George Eliot</i></div></div><div class="color-code"><div class="cube5"></div><div class="desc"><b>Indifferent</b> - At the bottom of enmity between strangers lies indifference. <i>Soren Kierkegaard</i></div></div><div class="color-code"><div class="cube6"></div><div class="desc"><b>Rival</b> - I embrace my rival, but only to strangle him. <i>Jean Racine</i></div></div><div class="color-code"><div class="cube7"></div><div class="desc"><b>Frenemy</b> - An enemy to whom you show kindness becomes your friend, excepting lust, the indulgence of which increases its enmity. <i>Saadi</i></div></div><div class="color-code"><div class="cube8"></div><div class="desc"><b>Enemy</b> - You have enemies? Good. That means you've stood up for something, sometime in your life. <i>Winston Churchill</i></div></div><div class="color-code"><div class="cube9"></div><div class="desc"><b>Mortal Enemy</b> -  Know thy self, know thy enemy. A thousand battles, a thousand victories. <i>Sun Tzu</i></div></div></div>
<div class="color-name">Nom Prénom</div></div>

<div class="color-body">
<div class="color-linkbox" style="background-color: #f93974;"><div class="color-linkname">Nom Prénom</div><div class="color-reminder">Rival</div></div>
<div class="color-descbox"><div class="linkdesc">description du lien</div><img src="..."/><img src="..."/><img src="..."/></div>

<div class="color-linkbox" style="background-color: #6b39f9"><div class="color-linkname">Nom Prénom</div><div class="color-reminder">Mortal Enemy</div></div>
<div class="color-descbox"><div class="linkdesc">description du lien</div><img src="..."/><img src="..."/><img src="..."/></div>

<div class="color-linkbox" style="background-color: #05f598"><div class="color-linkname">Nom Prénom</div><div class="color-reminder">Lover</div></div>
<div class="color-descbox"><div class="linkdesc">description du lien</div><img src="..."/><img src="..."/><img src="..."/></div>

<div class="frost">Code de <a href="http://www.never-utopia.com/">Frosty Blue</a></div></div><style type="text/css">.color-topbox {width: 500px; margin: auto; position: relative;} .color-code {height: 20px; width: 20px; display: inline-block; vertical-align: top; margin-right: 15px; opacity: 0.5; transition: 1s; -webkit-transition: 1s;} .desc {background: black; color: lightgrey; text-align: justify; position: absolute; z-index: 2; opacity: 0; transition: 1s; -webkit-transition: 1s; width: 0px; box-sizing:border-box; padding: 10px; height: 50px; overflow: auto; position: absolute; left: 0px; top: 45px;} .cube1:hover {-webkit-transition: 1s; transition: 1s; box-shadow: 0px 0px 3px lightgrey;} .color-code:hover {opacity: 1; transition: 1s; -webkit-transition: 1s;} .color-code:hover .desc {width: 500px; opacity: 1; -webkit-transition: 1s; transition: 1s;} .cube1 {height: 20px; width: 20px; background: #05f598; position: relative; -webkit-transition: 1s; transition: 1s;} .cube2 {height: 20px; width: 20px; background: #81f939; position: relative; transition: 1s; -webkit-transition: 1s;} .cube3 {height: 20px; width: 20px; background: #f9f639; position: relative; transition: 1s; -webkit-transition: 1s;} .cube4 {height: 20px; width: 20px; background: #f99c39; position: relative; transition: 1s; -webkit-transition: 1s;} .cube5 {height: 20px; width: 20px; background: #f93939; position: relative; -webkit-transition: 1s; transition: 1s;} .cube6 {height: 20px; width: 20px; background: #f93974; position: relative; transition: 1s; -webkit-transition: 1s;} .cube7 {height: 20px; width: 20px; background: #ed39f9; position: relative; transition: 1s; -webkit-transition: 1s;} .cube8 {height: 20px; width: 20px; background: #b63bf7; position: relative; transition: 1s; -webkit-transition: 1s;} .cube9 {height: 20px; width: 20px; background: #6b39f9; position: relative; transition: 1s; -webkit-transition: 1s;} .color-name {font-size: 30px; position: relative; z-index: 1; color: black; text-align: center; letter-spacing: 15px; text-transform: uppercase; font-family:'Cantarell'; font-weight: bold; line-height: 30px;} .color-body {width: 500px; margin: auto;} .color-linkbox {width: 500px; margin: auto; text-align: center; font-family: 'Cantarell'; text-transform: uppercase; letter-spacing: 5px; color: black; font-size: 18px; padding: 7px; box-sizing: border-box; height: 30px;} .color-linkname {position: relative; transition: 1s; -webkit-transition: 1s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s;} .color-linkbox:hover .color-linkname {-webkit-filter: blur(25px); filter: blur(25px); opacity: 0; transition: 1s; -webkit-transition: 1s;} .color-reminder {opacity: 0; transition: 1s; -webkit-transition: 1s; position: relative; top: -18px; color: white;} .color-linkbox:hover .color-reminder {opacity: 1; transition-delay: 1s; -webkit-transition-delay: 1s; -webkit-transition: 1s; transition: 1s;} .color-descbox {width: 500px; height: 70px; margin: auto; box-sizing: border-box; padding: 10px; background: black;} .linkdesc {box-sizing: border-box; padding: 10px; height: 50px; width: 300px; float: left; overflow: auto; background: lightgrey; color: black; font-family: 'Cantarell'; text-align: justify; position: relative; z-index: 1;} .color-descbox img {height: 50px; width: 50px; background: white; overflow: hidden; margin-left: 8px;} .frost {opacity: 0.5; color: lightgrey; font-size: 10px; text-align: center;} .center-box {margin: auto; text-align: center;}

</style><link href='https://fonts.googleapis.com/css?family=Cantarell:400,700' rel='stylesheet' type='text/css' />

Zuiichi

Fiche de liens - Dim 3 Jan 2016 - 15:02



Bonjour, bonsoir Wink

Alors voilà un code que j'ai fais il n'y as pas si longtemps !
Donc voilà, image et couleurs changeable a volonté Wink

Aperçu
Spoiler:



Code d'en tête (avec le nom, prénom et les deux images)
Code:
<link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css' /><div style="width: 400px; font-family: 'Sacramento', cursive; font-size: 50px; text-transform: lowercase; line-height: 100%; text-align: center; margin: auto; margin-top: -20px; margin-bottom: -10px; color: #fff; text-shadow: -1px 0 #96be36, 0 1px #96be36, 1px 0 #96be36, 0 -1px #96be36;">NOM & PRENOM</div><div style="margin: auto; width: 400px; height: 5px; background-color: #96be36"></div><div style="margin: auto; height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><table cellpadding="0" cellspacing="0" style="margin: auto; width: 400px;"><tr><td><div style="width: 249px; height: 250px; background-image: url(IMAGE 249*250)" /></div></td><td><div style="width: 1px"></div></td><td><div style="width: 150px; height: 250px; background-image: url(IMAGE 150*250)" /></div></td></tr></table><div style="margin: auto; height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="margin: auto; width: 400px; height: 5px; background-color: #96be36"></div><div style="margin: auto; height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="margin: auto; width: 400px; height: 60px; text-align: center; background-image: url(http://www.shizoo-design.de/stuff/patterns/335.jpg)" />
<a href="http://www.never-utopia.com/" style="font-size: 10px;">Zuiichi (c) Never Utopia</a></div>


Code de fiche de lien
Code:
<link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css' />
<div style="text-align: center;"><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style=" height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
<img src="GIF OU IMAGE 500*200" style="border: 1px solid #96be36" />
<div style="margin: auto; width: 400px; font-family: 'Sacramento', cursive; font-size: 50px; text-transform: lowercase; line-height: 100%; text-align: center; margin-top: -20px; margin-bottom: -10px; color: #fff; text-shadow: -1px 0 #96be36, 0 1px #96be36, 1px 0 #96be36, 0 -1px #96be36; text-align: center;">TITRE</div><div style="margin: auto; width: 400px; height: 5px; background-color: #96be36"></div>


<div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px; text-align: left;"><span style="font-family: 'times new roman'; color: black;">NOM PRENOM</span>
<div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
citation ou titre de lien
Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
</div></td></tr></table></div>

<div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px; text-align: left;"><span style="font-family: 'times new roman'; color: black;">NOM PRENOM</span>
<div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
citation ou titre de lien
Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
</div></td></tr></table></div>

<div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
</div>


Code du cadre du lien
Code:
<div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px; text-align: left;"><span style="font-family: 'times new roman'; color: black;">NOM PRENOM</span>
<div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
citation ou titre de lien
Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
</div></td></tr></table></div>


Prenez le temps de regarder le contenu du codage, des fois, ce n'est pas très évident de voir ou il faut placer les textes et les images.

Le fond du codage est transparent (sur le screen le fond du forum est noir)
Pour changer la couleur "verte" chercher le code couleur "#96be36"
Pour rajouter des cadres de liens, rajoutez le code avant ce code là
Code:
<div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
</div>


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 9:58