Bloc avec cadre, utiliser une image ou du CSS

Bonjour à tous,

j'aimerais avoir un rendu tel que cet info bulle :
(dans une couleur différente bref! et sans le visage, juste l'infobulle)

Ma question est : suis je obliger de créer une image qui ressemble à ça, ou alors en créant un bloc et avec du CSS le même rendu est possible ?

http://img832.imageshack.us/img832/1307/henrisaivetprofilparler.png


Je me pose la meme question pour ces petits blocs la :

http://img339.imageshack.us/img339/8939/snipymomoinfosconfrence.png

A savoir : j'aimerais que alors du passage de la souris le fond du bloc change de couleur (en utilisant une image, il faudrait donc que je fasse 2 images avec 2 fonds différents).

Si je pose cette question, c'est que ce qui m'embete en utilisant des images, ça serait de réussir à placer le texte à l'intérieur de l'image (en html) car j'ai peur que d'un navigateur à l'autre, le texte se place mal dans l'image/bulle.


Merci d'avance de vos conseils avisés.

Bonne soirée
Modifié par Snipy (22 Mar 2011 - 20:04)

Bonsoir,

Snipy a écrit :
Ma question est : suis je obliger de créer une image qui ressemble à ça, ou alors en créant un bloc et avec du CSS le même rendu est possible ?

Pour le deuxième exemple, tu dois pouvoir le faire intégralement en CSS. Pour le premier, tu pourras faire les coins arrondis, le dégradé et l'ombrage en CSS, mais à priori pas le triangle à gauche.
Attention: tu peux faire des arrondis, des dégradés et des ombres en CSS3, mais le support est loin d'être complet dans les navigateurs:
- Coins arrondis: à partir d'IE9 (ok dans les autres navigateurs depuis quelques versions déjà).
- Ombres: à partir d'IE9 (ok dans les autres navigateurs depuis quelques versions déjà).
- Dégradés: pas du tout dans IE (sauf à utiliser un filtre propriétaire), et deux syntaxes différentes à l'heure actuelle (trois si on compte le filtre IE).

Le deuxième exemple, je le ferais avec du CSS pour coins arrondis et ombres (tant pis pour ces effets dans IE 7-8), et une image + couleur de fond pour le dégradé.

Le premier exemple, je le ferais sans doute intégralement avec une image (largeur fixe, extensible en hauteur).

Snipy a écrit :
Si je pose cette question, c'est que ce qui m'embete en utilisant des images, ça serait de réussir à placer le texte à l'intérieur de l'image (en html) car j'ai peur que d'un navigateur à l'autre, le texte se place mal dans l'image/bulle.

Ce n'est pas spécialement un problème. Du moins si tu ne rames pas trop en positionnement CSS.