Tutoriel cadre en pointillait de couleurs différentes

Bonjour ou bonsoir,

Je viens de trouver ce code HTML en parcourent des doll sur OhMyDollz.com, il est super mignon sa change des cadres simples ou doubles que l'on peux voir souvent.

Prévisualisation:
https://2img.net/r/hpimg11/pics/275970testqsj.png

Spoiler:

Le code HTML:

Code:

<p><span style="color: #ffffff; font-family: 'Trebuchet MS', Verdana, Arial; font-size: 14px;"> </span></p>
<p style="text-align: center;">
<div style="width: 585px; position: relative; left: 5px;">
<div class="tableblocoff" style="text-align: left;">
<div style="text-align: center;">
<div class="portrait" style="margin: 5px; padding: 10px; border: 1px dashed #cfcfcf; background-color: white; position: relative; overflow: auto; text-align: left;">
<div style="margin: auto; padding: 0px; border: 1px dotted #bd8d46; background-color: #f6e497; text-align: center; box-shadow: #f7f2b2 1px 1px 1px; overflow: auto; position: relative; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: auto;">
<div style="color: #333333; margin: auto; padding: 0px; box-shadow: #f7f2b2 1px 1px 1px; overflow: auto; border: 1px dotted #bd8d46; position: relative; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: auto;">
<p style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 14px;"> </p>
<p><span style="font-family: 'courier new', courier; font-size: small;"><strong><br /></strong></span></p>
<p style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 14px;"> </p>
</div>
<p style="color: #333333; font-family: 'Trebuchet MS', Verdana, Arial; font-size: 14px;"> </p>
<p><span style="color: #000033; font-family: tahoma, arial, helvetica, sans-serif; font-size: xx-small;"><br /></span></p>
<p style="color: #333333; font-family: 'Trebuchet MS', Verdana, Arial; font-size: 14px; text-align: justify;"><span style="font-family: Georgia, serif;"><span style="font-size: 12px;"><strong><br /></strong></span></span></p>
</div>
</div>
</div>
<p style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 14px;"> </p>
</div>
</div>
</p>
<p> </p>

Vous pouvez changer toutes les couleurs du cadre:
•#ffffff et le blanc du contour du cadre
•#cfcfcf et la couleur des pointillées autour du contour blanc
•#bd8d46 et la couleur des pointillés dans le cadre jaune
•#f6e69b et la couleur du cadre qui est jaune
•#f7f2b2 et la couleur du trait jaune clair
•#333333 et la couleur de l'écriture (pas la peine de la modifier)
Les autres valeurs il ne faut pas les modifier. Elles ne servent en quelque sorte à rien dans le contexte sur OhMyDollz.com.

RAPPEL:
•Sur ce type de cadre je vous déconseille d'essayer de changer les dimensions qui sont bien plus complexes que les autres cadres. Mais vous pouvez toujours essayer !
• Validé plusieurs fois votre qui suis-je, cela évite les bugs de votre qui-suis-je.
•Comme d'habitude l'écriture se met au milieu du cadre, donc plus vous allez écrire dans votre cadre plus votre texte va monter vers le haut.

À bientôt,
Admin

Ouah merci admin es que l'on peut mettre des image à l'interieur au lieu de couleurs ?

Bonjour ou bonsoir,

Je suis en train de chercher pour mettre une image à la place je cherche et dès que j'ai trouvé je publie l'astuce (;

Ok merci mais enfaite comment tu fais pour trouver des codes htlm pour cadre ?

Oh merci cest un superbe forum.

c'est un peu dur a faire mais vraiment merci beacoup

Ouh là là heureusement que je passe par là ton code est hyper long et il y a des petites bêtises, je te refais un code tout propre:

Code:


<div style="margin: 5px; padding: 10px; border: 1px dashed #cfcfcf; background-color: #ffffff; position: relative; overflow: auto; text-align: left;">
<div style="margin: 5px; padding: 10px; border: 1px dotted #bd8d46; background-color: #f6e497; text-align: center; box-shadow: #f7f2b2 1px 1px 1px; overflow: auto; position: relative; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: auto;">
<div style="color: #333333; margin: auto; padding: 0px; box-shadow: #f7f2b2 1px 1px 1px; overflow: auto; border: 1px dotted #EFECCA; position: relative; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: auto; background-color: #F7F2B2;">
INTERIEUR DU CADRE
</div>
</div>
</div>


J'ai effectuer quelques petites modifications (afin d'alléger le code et donc la rapidité des pages), pour que ce soit encore plus clair ! Et encore plus esthétique, je ré-explique donc le "code couleur":
#cfcfcf : couleur de la bordure du premier cadre
#ffffff : couleur du fond du premier cadre
#bd8d46 : couleur de la bordure du second cadre
#f6e497 : couleur du fond du second cadre
#EFECCA : couleur de la bordure du troisième cadre
#F7F2B2 : couleur du fond du troisième cadre
#333333 : couleur de l'écriture
Je vous conseille de changer les couleurs pour "personnaliser" votre cadre, vous pouvez trouver tous les "codes" des couleurs ici : http://www.code-couleur.com/
Si le cadre vous parait "petit" ne vous en faites pas il s'allonge en fonction de la longueur de votre texte.


Aperçu:

Spoiler:

Ca m'intéresserais de savoir où tu as pris ces codes ? Ou si tu les as créé toi même car il y a du CSS, et je n'en vois pas l'utilité ^^

Bonjour,
OULALALA t'es trop forte alix O.O

La vache XD dire que j'apprends seulement le codage

C'est pas très compliqué, il suffit d'être habituer à quel balise sert à quoi et rapidement tu vois que y'a 500000 balise pour mettre en forme du texte (qui n'existe pas en plus mdrr)

Mais merci ca me touche bcp :p