CSS - Stylisation d'un conteneur d'info-bulles

Question

J'ai une image d'arrière-plan utilisée comme arrière-plan du conteneur tooltip. L'image est présentée ci-dessous:

Il est utilisé comme ceci:

.tooltip { 
    display:none; 
    background:url(images/black_arrow_big.png); 
    height:163px; 
    padding:40px 30px 10px 30px; 
    width:310px; 
    font-size:11px; 
    color:#fff; 
} 

<div class="tooltip">Tolltip text goes here</div> 

Cependant, tous les infobulles n'ont pas la même quantité de texte, donc je besoin d'un moyen de rendre le récipient plus grand ou plus petit basé sur la quantité de texte. Comment dois-je faire cela? La technique de la porte coulissante permet-elle le redimensionnement horizontal et vertical? Comment?

De même, pourrais-je avoir le même gradient diagonal si j'utilise une technique de porte coulissante? Si non, des alternatives?

Answer 1

Mettre à jour cela peut être fait en utilisant du CSS pur. Example.

Bonne question. À l'heure actuelle, il semble que votre ombre portée fasse partie de l'image PNG, et ce n'est pas redimensionnable, comme vous le savez. Vous pouvez utiliser les ombres portées CSS3, qui s'adapteront à la taille du conteneur. Le problème avec cela, vous pouvez seulement ajouter ces ombres au texte, ou des boîtes (pas de flèches!).

Je pense que votre meilleure option est d'ajouter une ombre portée à la boîte avec CSS3, et une image PNG juste la flèche, un peu comme ceci:

Il peut prendre un peu ajustement pour l'aligner parfaitement, mais il permettra à la boîte de redimensionner en fonction du contenu.

.tooltip { 
    display:none; 
    padding:40px 30px 10px 30px; 
    font-size:11px; 
    color:#fff; 

    position: relative; 
    background: #000; 

    /* rounded corners */ 
    -webkit-border-radius: 2px; 
     -moz-border-radius: 2px; 
      border-radius: 2px; 

    /* box shadow */ 
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3); 
     -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3); 
      box-shadow: 0px 0px 10px rgba(0,0,0,0.3); 

    /* background gradient, see http://gradients.glrzad.com/ */ 
    background-image: -webkit-gradient(
     linear, 
     left bottom, 
     left top, 
     color-stop(0.08, rgb(0,0,0)), 
     color-stop(0.57, rgb(48,48,48)) 
    ); 
    background-image: -moz-linear-gradient(
     center bottom, 
     rgb(0,0,0) 8%, 
     rgb(48,48,48) 57% 
    ); 
} 

.tooltip_arrow { 
    position: absolute; 
    bottom: -37px; /* 37px is the height of the black_arrow.png */ 
    left: 45%; /* roughly centered... you can decide how to best do this */ 
} 

<div class="tooltip"> 
    Tolltip text goes here 
    <img src="images/black_arrow.png" class="tooltip_arrow" /> 
</div> 

Je n'ai pas testé cela, mais j'espère que ça donne un bon début.

Answer 2

Essayez CSS Flèches: http://cssarrowplease.com/