cadre 3D d'une infobulle

[Mayu Higurachi]

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

[Invité]

Salut,

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

Je te remercie

[Mayu Higurachi]

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.

[Invité]

Ok. Donc je t'explique, tout ce passe dans le CSS 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

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.

[Mayu Higurachi]

Bonjour,
merci beaucoup ^^
sujet résolu.