cadre 3D d'une infobulle

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

Résolu cadre 3D d'une infobulle

Message par Mayu Higurachi le Jeu 23 Juin 2011 - 21:53

Bonjour/bonsoir,

N'ayant pas trouvé ce que je cherchai je m'adresse à vous dans l'espoir d'avoir un petit peu d'aide et qu'une âme charitable vienne à mon secours.

J'ai installé récément un code infobulle sur mon forum, tout marche parfaitement, j'aimerai seulement que l'infobulle ai un cadre qui fait 3D
comme le fichier image suivant:



Je pense que c'est dans le css avec les contour et tout ça mais je n'en suis pas certaine.

Je vous remercie par avance & bonne soirée/journée.
May'
Fichiers joints
ffff.png modèle de ce que je veuxVous n'avez pas la permission de télécharger les fichiers joints.(17 Ko) Téléchargé 1 fois

Mayu Higurachi
**

Féminin
Messages : 70
Inscrit(e) le : 01/09/2009

http://tigrayasha.coolbb.net
Mayu Higurachi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: cadre 3D d'une infobulle

Message par Invité le Jeu 23 Juin 2011 - 22:01

Salut,

Afin de pouvoir t'aider, puis-je avoir ton code HTML et CSS de tes infobulles actuels ?

Je te remercie Wink

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: cadre 3D d'une infobulle

Message par Mayu Higurachi le Jeu 23 Juin 2011 - 22:10

salut ^^
le css est:
Code:
.lock  {
  position: relative;
}
.lock .lock-hidden {
  /* center */
  display: none;
  position: absolute;
  padding-left : 5px;
  padding-right : 5px;
  padding-top  : 2px;
  padding-bottom : 2px;
    top: 35px;
    left: 0px;
  /* style du bloc qui apparait */
  border: 2px groove #305875;
  border-radius: 5px;
  background-image: url('http://i26.servimg.com/u/f26/11/66/17/91/fond10.png');
  -moz-border-radius: 1px;
  text-align: center;
    visibility: visible;
width: 85px;
height: 60px;
}
.lock:hover .lock-hidden {
  display: block;
}

le code html est:
Code:
<DIV class=lock>
<DIV align=center><FONT face=Arial><IMG border=0 alt="" src="http://img11.hostingpics.net/pics/300114lilice.png" width=100 height=100></FONT></DIV>
<DIV class=lock-hidden>
<DIV align=center><FONT size=1 face=Arial>Alice White</FONT></DIV>
<DIV style="TEXT-ALIGN: center" arial=""><FONT size=1>Fondatrice</FONT></DIV>
<DIV align=center><FONT color=#000000 size=1 face=Arial><A href="http://pandora-hearts.bbfr.net/u1">Profil</A></FONT><FONT face=Arial><FONT size=1> - </FONT><FONT color=#000000 size=1><A href="http://pandora-hearts.bbfr.net/privmsg?mode=post&amp;u=1">MP</A></FONT></FONT></DIV><FONT face=Arial><FONT color=#000000 size=1><A href="http://pandora-hearts.bbfr.net/privmsg?mode=post&amp;u=1"></A></FONT></FONT></DIV></DIV><BR></TD>
<TD>
<DIV class=lock>
<DIV align=center><FONT face=Arial><IMG border=0 src="http://img4.hostingpics.net/pics/483792Sanstitre5.png" width=100 height=100></FONT></DIV>
<DIV class=lock-hidden>
<DIV align=center><FONT size=1 face=Arial>Lacky Rainth</FONT></DIV>
<DIV align=center><FONT size=1>Administr- </FONT></DIV>
<DIV align=center><FONT size=1>-atrice</FONT></DIV>
<DIV align=center><FONT color=#000000 size=1 face=Arial><A href="http://pandora-hearts.bbfr.net/u4">Profil</A></FONT><FONT face=Arial><FONT size=1> - </FONT><FONT color=#000000 size=1><A href="http://pandora-hearts.bbfr.net/privmsg?mode=post&amp;u=4">MP</A></FONT></FONT></DIV></DIV></DIV><BR></TD></TR>
<TR>
<TD>
<DIV class=lock>
<DIV align=center><FONT face=Arial><IMG style="WIDTH: 100px; HEIGHT: 100px" border=0 alt="" src="http://img11.hostingpics.net/pics/916295gio.png" width=100 height=100><BR></FONT></DIV>
<DIV class=lock-hidden>
<DIV align=center>
<DIV align=center><FONT size=1 face=Arial>Giovanni Rockafeller </FONT></DIV><FONT size=1><FONT face=Arial>Graph' &amp; Admin<BR></FONT><FONT color=#000000 face=Arial><A href="http://pandora-hearts.bbfr.net/u6">Profil</A></FONT><FONT face=Arial> -</FONT></FONT><A href="http://pandora-hearts.bbfr.net/privmsg?mode=post&amp;u=6"><FONT size=1 face=Arial> </FONT></A><FONT color=#000000 size=1 face=Arial><A href="http://pandora-hearts.bbfr.net/privmsg?mode=post&amp;u=6">MP</A></FONT></DIV></DIV></DIV><BR></TD>
<TD>
<DIV class=lock>
<DIV align=center><FONT size=1 face=Arial><IMG style="WIDTH: 100px; HEIGHT: 100px" src="http://img4.hostingpics.net/pics/332390ochida.png" width=100 height=100><BR></FONT></DIV>
<DIV class=lock-hidden>
<DIV align=center><FONT size=1 face=Arial>Ochida Daisuke<BR></FONT><FONT size=1 face=Arial>Modo chatbox &amp; Admin provisoire<BR></FONT>
<DIV align=center><A href="http://pandora-hearts.bbfr.net/u3"><FONT size=1 face=Arial>Profil</FONT></A><FONT size=1 face=Arial> - </FONT><A href="http://pandora-hearts.bbfr.net/privmsg?mode=post&amp;u=3"><FONT size=1 face=Arial>MP</FONT></A></DIV></DIV></DIV>

Je souhaiterai également savoir comment avoir des pointillés pour le contour si le 3D n'est pas possible car je suis aussi interéssée.
bonne soirée.

Mayu Higurachi
**

Féminin
Messages : 70
Inscrit(e) le : 01/09/2009

http://tigrayasha.coolbb.net
Mayu Higurachi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: cadre 3D d'une infobulle

Message par Invité le Jeu 23 Juin 2011 - 22:50

Ok. Donc je t'explique, tout ce passe dans le CSS Wink Surtout sur cette ligne :

Code:
border: 2px groove #305875;
Donc pour avoir des pointillés il faut changer le mot "groove" en "dotted".
Pour la 3D, tu dois changer "groove" en "outset". Mais pour avoir un effet comme sur l'image, tu dois effacer les contours arrondit et augmenter la taille des bordures. Donc tu dois augmenter les 2px qui sont dans le code ci-dessus et effacé dans le code CSS complet, ces codes là :

Code:
border-radius: 5px;
et
Code:
-moz-border-radius: 1px;

Il existe beaucoup de style de bordure. Je te conseille par exemple ce site-là : Clik ! où il y a marqué quelques bordures ainsi que ses exemples. Les noms des bordure sont dans les bordures, c'est le premier mot, donc il faut mettre l'un de ces mots, a la place de celui dans le code là :

Code:
border: 2px groove #305875;
Voilà, si tu as une question sur cela, pose là, aucun problème Wink

Bonne soirée.

Édit Sasuke : si tu utilises Google Chrome sur le site que je t'ai donné, ne traduit surtout pas la page, sinon, les noms seront en français et ça fonctionnera plus. Wink

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: cadre 3D d'une infobulle

Message par Mayu Higurachi le Dim 26 Juin 2011 - 9:48

Bonjour,
merci beaucoup ^^
sujet résolu.

Mayu Higurachi
**

Féminin
Messages : 70
Inscrit(e) le : 01/09/2009

http://tigrayasha.coolbb.net
Mayu Higurachi a été remercié(e) par l'auteur de ce sujet.

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


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