Bonjour à vous ! Je viens de coder quelques petits trucs et j'avais envie de vous les faire partager alors je mets tout là ^^
Par contre, je tiens à ce que le copyright reste et si vous les utilisez sur un autre forum autre qu'Arcane merci de me le dire ^^

Fiche bleue pour les présentations, résumés de Rp, PNJs, ect...
Il y a un effet "slide" lorsqu'on passe la souris sur l'image. Les couleurs sont changeables, mp moi si vous comprennez pas le code je vous expliquerais comment faire ^^

Version 1:

Version 2:

Version RP:

Bwahaha je craque déjà, j'ai l'accès à un PC libre 8D

J'aime beaucoup tes créations Ephy, c'est simple et joli. Ce n'est pas trop chargé et c'est frais ^^
On voit un carré blanc derrière tes codes, c'est à cause du spoiler ou bien ce n'est pas transparent ?
Ton slide est fait avec "transition machin chose" ?

XD Craque, oui, craaaaaaaaque x)

Merci En fait, pour ce que je fais ça dépend, parfois c'est vraiment chargé x)
Alors en fait le "carré blanc" c'est le deuxième fond du codage ^^ Si tu ty connais un peux en code y te suffit juste d'enlever le: background-color:#F9F8F6

Oui, mon slide est fait avec cette partie de code:
.img1{opacity:1; transition:1s linear;-moz-transition:1s linear;-webkit-transition:1s linear;-o-transition:1s linear;} .img1:hover{;opacity:0;margin-right:50px;margin-top:400px;}

L'information "hover" indique ce qu'il se passe lorsqu'on passe la souris sur l'image

Oui je connais j'ai appris les bases ^^
Mais la dernière fois que j'ai fait un slide, il était tout fou ! j'ai l'impression qu'il faut tirer l'image avec la souris dans ton cas, ça évite qu'il fasse n'importe quoi au moins. Même si j'aimerai réussi à faire que quand on met la souris sur l'image, ça slide tout seul et surtout, cela reste "coincé" sur le côté/bas/haut x)

Je sais pas sur quel navigateur tu es mais pour moi il slide tout seul, sans problème. C'est pour ça que je comprends pas et que j'aimerais avoir des retours extérieurs pour voir où le code merde ^^

Faire en sorte qu'il ne revienne pas ? Je comprends pas trop ce que tu veux x) Mais tout est possible, suffit juste de creuser un peu en CSS ou même regarder vers le JS mais c'moins conseillé x)

EDIT: Mais je vois que les slides que tu as fais sont parfaitement correctes (dans ton résumé de Rp's ^^)

Dans le résumé de RP ce n'est pas mon code ^^
C'était surtout la signature de Adam je ne sais pas si c'est encore visible. Et le reste n'est pas sur le forum

Ah, ok ^^

Bah si tu veux je te détaillerais le code et je t'expliqueraisdu mieux que je peux comment ça fonctionne (du moins ce que j'en ai compris XD)

Fiche turquoise de Rp (couleurs changeables)

TITRE

> Texte 1
> Texte 2
> Texte 3
> Texte 4

Blabla

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolore eligendi et totam! Consequuntur doloremque enim et exercitationem illum ipsam iure molestias nesciunt porro provident, quaerat, rem similique soluta voluptas? Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab asperiores corporis delectus dignissimos, dolore hic illo minus neque officiis omnis praesentium quos reiciendis rem reprehenderit totam ullam ut veniam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab enim soluta tempora. A, corporis dignissimos dolor, eveniet ipsam maiores modi nostrum optio perspiciatis praesentium quisquam repudiandae saepe sequi totam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolor obcaecati quia reprehenderit, tempore tenetur? Corporis delectus deserunt harum inventore magnam quaerat recusandae, reiciendis temporibus voluptas. Ab culpa omnis suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias amet atque dolore exercitationem hic non officia quia reiciendis, rem tenetur veritatis voluptatem? Quod saepe sequi voluptas. Esse, sunt, tempora!

(c)Ephy

Code:

<style>.rptout{width:93%;font-family:calibri;}.rptitre{background:#3d919c; color:#fff;  font-variant: small-caps; letter-spacing:2px; font-size:18px; padding:5px; text-align:center;border: 1px solid #fff}.rpcadre{background:#d8e3e5; color:#256770; margin-top:-13px;display: block;text-align: justify; padding:5px;border: 1px solid #fff}.rpinfos{background:#76bfc9; color:#fff; text-align:left;margin-top:-13px;letter-spacing:2px;padding:5px; display: block; float:left; width:40%;min-height:77px;border: 1px solid #fff}.rpimage{background:#5aacb7; overflow:hidden;min-height:77px;margin-top:-13px;padding:5px 5px 2px 5px;display: block; float:right; width:55%;border: 1px solid #fff}.rpfin{background:#f3f6f6; color:#3d919c; letter-spacing:2px; padding:5px; text-align:center;margin-top:-13px;border: 1px solid #fff}.rpblabla{color:#fff;font-size:10px;margin-top:-3px}</style>

<center><div class="rptout"><div class="rptitre">TITRE</div>
<div class="rpinfos"><img src="URL 77*77px" style="margin-right:5px;float:left"/>> Texte 1
> Texte 2
> Texte 3
> Texte 4</div><div class="rpimage"><img src="URL 77*400px" style="width:99%;border: 1px solid #fff"/>
<div class="rpblabla">Blabla</div></div><div style="clear: both;"></div>
<div class="rpcadre">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolore eligendi et totam! Consequuntur doloremque enim et exercitationem illum ipsam iure molestias nesciunt porro provident, quaerat, rem similique soluta voluptas? Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab asperiores corporis delectus dignissimos, dolore hic illo minus neque officiis omnis praesentium quos reiciendis rem reprehenderit totam ullam ut veniam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab enim soluta tempora. A, corporis dignissimos dolor, eveniet ipsam maiores modi nostrum optio perspiciatis praesentium quisquam repudiandae saepe sequi totam vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolor obcaecati quia reprehenderit, tempore tenetur? Corporis delectus deserunt harum inventore magnam quaerat recusandae, reiciendis temporibus voluptas. Ab culpa omnis suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias amet atque dolore exercitationem hic non officia quia reiciendis, rem tenetur veritatis voluptatem? Quod saepe sequi voluptas. Esse, sunt, tempora! </div>
<div class="rpfin">(c)Ephy</div></div></center>

Les Tutos à Ephy ♥

Bonjour bande de moules de la plage Lilyn ! Voici un petit tuto qui vous sera bien utile pour comprendre mes codes et surtout ne pas avoir de problème avec ^^

1. Le CSS c'est quoi ?


2. Pourquoi tu nous parles de ça, on s'en fou ton code y marche !


3. Autre chose ?

Les tutos à Ephy ♥

Bonjour à vous. Comme vous le savez (ou peut-être pas) forumactif permet aux utilisateurs d'utiliser le HTML ce langage qui permet de faire de belles choses.

Tout d'abord pour pouvoir utiliser le HTML, il faut activer l'option dans votre profil: "Toujours autoriser le HTML" qui se trouve dans "préférences".
Maintenant on va pouvoir commencer.



1.Aussi bête que cela puisse paraitre toute balise doit être fermée (comme les portes). Un exemple:

Code:

<div style="border: 1px solid #000000;background-color:#006699">Une balise ouverte doit être fermée. Un </div> permet de la fermer.

Vous pouvez voir qu'après le div et le style se trouvent un = et des " après le égal et avant le >
Ce qui se trouve entre ces guillemets sont toutes les informations qui mettrons en forme votre code, aussi il ne faut pas oublier de les mettre car sinon ce dit code ne marchera pas et croyez moi c'est fréquent de les oublier (et ça donne des migraines T.T)

2.Les balises sont comme des boîtes. Tout ce qui se trouve entre deux balises est concerné par les informations que le codeur a voulu apporter. J'explique, dans mon code ci-dessus se trouvent les informations border qui indique le style des bordures, background-color qui indique la couleur du fond de la 'case'. Donc selon les informations que j'ai donné à ma balise tout ce qui se trouve avant la fermeture de cette dite balise sera dans un cadre noir au fond bleu. Voici ce que ça donne en copiant/collant le code ci-dessus.

Citation :

Une balise ouverte doit être fermée. Un

permet de la fermer.

3.On peut regrouper un très grand nombre d'informations dans les balises "span" ou "div" mais ces informations devrons obligatoirement être séparées d'un point virgule sinon bah ça marche pas.



Utiliser une balise « div style="..." » ou « span style="..." » revient exactement au même sauf que le rendu ne sera pas le même. Oui c'est un peu brouillon voilà pourquoi je m'explique.

Mais avant un petit exemple:

Code:

<div style="border: 1px solid #000000;background-color:#006699">J'utilise une DIV</div>

Code:

<span style="border: 1px solid #000000;background-color:#006699">J'utilise un SPAN</span>

Voilà, les informations ne sont pas différente, mais pourtant:

Citation :

J'utilise une DIV

J'utilise un SPAN

vous remarquez que la div est plus générale: si vous ne précisez pas les dimensions ça risque de "déborder", pas très utile dans un texte où l'on ne veut que changer un mot.
Voilà pourquoi le span existe. Le span s'ajuste au contenu de la balise alors que la div, sauf si indiqué contraire, prendra toute la longueur de la page.



Voilà, après tout ce blabla on passe aux choses sérieuses ! Les bordures ! Tout un art :3

Tout d'abord les bordures sont définies par l'information border.
Ce border contient plusieurs autres informations qui ne sont pas séparées par les points virgules sinon ça marche pas.

Il y a le style de la bordure: solid, dashed, dotted et double
L'épaisseur de la bordure qui est un nombre suivit de px
Ensuite il y a sa couleur. vous pouvez utiliser le nom de cette couleur comme dark ou bien le code hexacimal. C'est ça: #code de la couleur; exemple: #000000 qui donnera un noir.

Voilà un exemple concret de comment est l'information:

Code:

border: (nombre)px (solid/dashed/dotted/double/groove/ridge/inset/outset) (couleur);

Et voici une image des différents type de bordure:


Il est aussi tout à fait possible de faire un cadre avec plusieurs bordures différentes. Compliqué vous allez me dire. Et non, le code est juste un peu plus long et se présentera sous cette forme:

Code:

border-top: Xpx TYPE BORDURE #XXXXXX; border-bottom: Xpx TYPE BORDURE #XXXXXX; border-left: Xpx TYPE BORDURE #XXXXXX; border-right: Xpx TYPE BORDURE #XXXXXX;

Une explication: Border-top, border-bottom, border-left, border-right désignent l'endroit où sera le trait de la bordure, top étant le haut, bottom le bas, left la gauche et right la droite.
Le reste de l'information contenu après ne change pas de ce que nous avons vu plus haut.

Voici un exemple:

Citation :

C'est pas beau je sais ^^'

Mais ce n'est pas tout ! On peut aussi arrondir les coins des bordures (et le background mais nous le verrons plus tard).
Cela sera défini par l'information border-radius. On mettra une valeur en pixel. Il est possible de définir de plusieurs façon les coins arrondis:

Border-radius: Xpx => arrondira l'ensemble des coins.

Exemple a écrit:

Code:

<div style="border: 2px solid #000000; border-radius: 50px"></div>

Border-radius: Xpx Xpx =>  la première valeur s'applique aux coins top-left et bottom-right, la seconde valeur s'applique aux coins top-right et bottom-left.

Exemple a écrit:

Code:

<div style="border: 2px solid #000000; border-radius: 50px 10px"></div>

Border-radius: Xpx Xpx Xpx Xpx => s'appliquent dans l'ordre suivant aux coins top-left, top-right, bottom-right, bottom-left.

Exemple a écrit:

Code:

<div style="border: 2px solid #000000; border-radius: 50px 10px 5px 35px"></div>

La suite, au prochain épisode (ou quand j'aurais la motive de l'écrire. Vous pouvez retrouver toutes ces informations sur le site du Zéro ^^)

Marre de faire des lettres sous photoshop ? Ephy vous offre votre papier à lettre entièrement codé !
Attention cependant, la hauteur de votre texte ne doit pas dépasser les 630px. Si ça dépasse, prenez un nouveau codage et continuez dessous, comme pour une vraie lettre

Aperçu:

Code:

<center><div class="fond_lettre" style="background: url('http://img15.hostingpics.net/pics/931830vieuxpapier.png'); ">  
<div class="cadre_lettre">  
Texte

</div></div></center>

Vous pouvez mettre un sceau personnel en guise de signature. Attention, toute fois, l'image devra impérativement faire 100px*100px !

Aperçu:

Code:

<center><div class="fond_lettre" style="background: url('http://img15.hostingpics.net/pics/931830vieuxpapier.png'); ">  
<div class="cadre_lettre"><div style="height:500px">
TEXTE</div>

<div style="height:100px; text-align: right;"><div style="padding-right:110px">FORMULE DE POLITESSE
NOM</div>
<img src="URL DE LIMAGE 100*100PX" class="sceau_lettre"/></div>
</div></div></center>

Et voilà des petites fichettes pour illustrer vos Rp's lorsque vous utilisez le système d'endurance o/ (l'image du crâne je l'ai piquée à Elea ♥ )

Ephylix ♦ Endurance: 61/61 Détail: ♦ Etat:  Sous forme humaine ♦ Arme: Temet: Dague (2):	Dulcius ♦ Endurance: 0/5 ♦ Etat:   ♦ Rang: 1A
Titre ♦ Endurance: ♦ Etat:   ♦ Arme:

Code:

<div class="fond_endu"><div class="titre_endu">Titre</div>
[b]♦ Endurance:[/b]
[b]♦ Etat: [/b] <img title="mort" src="http://img4.hostingpics.net/pics/191001mort.png"/>
[b]♦ Arme:[/b]
</div>

Nouveau petit codage pour la fichette de stats

Code:

<div style="float:right; padding:10px"><div class="fond_endu"><div class="nameprofil titre_endu">Pseudo</div><img style="border: 1px solid #332D26" src="URL IMAGE 200*77px"/>
[b] Mana:[/b]
[b] Endurance:[/b]  
[b] Etat: [/b] 
[b] Attaque physique: [/b] 
</div></div>
[justify]TEXTE DU RP[/justify]

Les beaux coins envahissent Arcane !

La liste sera mise à jour au fur et à mesure de mes créations o/

Envie d'avoir de beaux coins pour vos Rp's ? Pas de soucis, j'ai trouvé LA solution ! (En plus, votre texte est tout bien rangé o/)
Démonstration:

Code:

<div class="coin_1">TEXTE</div>

Code:

<div class="coin_2">TEXTE</div>