Tutoriel cadre en pointillait de couleurs différentes

Voir le sujet précédent Voir le sujet suivant Aller en bas

Tutoriel cadre en pointillait de couleurs différentes

Message par Admin le Mar 3 Juil - 15:09

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:
http://img11.hostingpics.net/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


Dernière édition par Admin le Ven 17 Aoû - 22:18, édité 1 fois

__________________________________________________





Clique ici et aussi là.
avatar
Admin
Admin

Messages : 869
Points : 3362
Date d'inscription : 22/08/2011
Localisation : Rousson (89)

http://ohmydollz.cultureforum.net

Revenir en haut Aller en bas

Re: Tutoriel cadre en pointillait de couleurs différentes

Message par histoire-2-fille le Mar 3 Juil - 18:30

Ouah merci admin es que l'on peut mettre des image à l'interieur au lieu de couleurs ?
avatar
histoire-2-fille
Petite padawan
Petite padawan

Messages : 79
Points : 1925
Date d'inscription : 12/05/2012
Localisation : languedoc roussilon

Revenir en haut Aller en bas

Re: Tutoriel cadre en pointillait de couleurs différentes

Message par Admin le Mar 3 Juil - 18:43

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 (;

__________________________________________________





Clique ici et aussi là.
avatar
Admin
Admin

Messages : 869
Points : 3362
Date d'inscription : 22/08/2011
Localisation : Rousson (89)

http://ohmydollz.cultureforum.net

Revenir en haut Aller en bas

Re: Tutoriel cadre en pointillait de couleurs différentes

Message par histoire-2-fille le Mar 3 Juil - 20:17

Ok merci mais enfaite comment tu fais pour trouver des codes htlm pour cadre ?
avatar
histoire-2-fille
Petite padawan
Petite padawan

Messages : 79
Points : 1925
Date d'inscription : 12/05/2012
Localisation : languedoc roussilon

Revenir en haut Aller en bas

Re: Tutoriel cadre en pointillait de couleurs différentes

Message par lilia9371 le Lun 23 Juil - 22:46

Oh merci cest un superbe forum.
avatar
lilia9371
Membre

Messages : 25
Points : 1856
Date d'inscription : 26/04/2012
Localisation : banlieu parisiene

Revenir en haut Aller en bas

Re: Tutoriel cadre en pointillait de couleurs différentes

Message par fati12345678953 le Jeu 16 Aoû - 14:18

c'est un peu dur a faire mais vraiment merci beacoup Very Happy
avatar
fati12345678953
Membre

Messages : 3
Points : 1716
Date d'inscription : 15/08/2012

Revenir en haut Aller en bas

Re: Tutoriel cadre en pointillait de couleurs différentes

Message par Alikse le Ven 23 Mai - 18:55

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:




INTERIEUR DU CADRE




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é ^^
avatar
Alikse
Modo ~ Graphiste ~ Codeuse

Messages : 10
Points : 1779
Date d'inscription : 26/06/2012

Revenir en haut Aller en bas

Re: Tutoriel cadre en pointillait de couleurs différentes

Message par Camilia45 le Sam 24 Mai - 10:09

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

__________________________________________________



Ta bouche est super belle quand elle est fermée ! Laisse la comme ça pour voir pour toujours
avatar
Camilia45
Modo à l'essaie

Messages : 28
Points : 1244
Date d'inscription : 05/01/2014
Localisation : Là où je suis.

http://entre-filles.forums-actifs.com

Revenir en haut Aller en bas

Re: Tutoriel cadre en pointillait de couleurs différentes

Message par Chathrina le Sam 24 Mai - 20:08

La vache XD dire que j'apprends seulement le codage

__________________________________________________



Tu ne peux pas me comprendre,c'est bien normal.
 
______________________________________________________________________




Katerina [Chathrina] pour vous servir.
avatar
Chathrina
Admin

Messages : 56
Points : 1821
Date d'inscription : 11/08/2012
Localisation : Xxx

Revenir en haut Aller en bas

Re: Tutoriel cadre en pointillait de couleurs différentes

Message par Alikse le Ven 20 Juin - 21:11

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
avatar
Alikse
Modo ~ Graphiste ~ Codeuse

Messages : 10
Points : 1779
Date d'inscription : 26/06/2012

Revenir en haut Aller en bas

Re: Tutoriel cadre en pointillait de couleurs différentes

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum