CSS - стилизация контейнера всплывающей подсказки

Question

У меня есть фоновое изображение, используемое в качестве фона контейнера всплывающей подсказки.Изображение показано ниже:

Используется так:

.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>

Однако все подсказки не имеют одинаковое количество текста, поэтомунужен способ сделать контейнер больше или меньше в зависимости от объема текста.Как мне это сделать?Разрешает ли техника раздвижных дверей как горизонтальное, так и вертикальное изменение размеров?Как?

Кроме того, могу ли я иметь такой же диагональный градиент, если я использую технику раздвижных дверей?Если нет, то какие альтернативы?

Answer 1

Обновление это можно сделать с помощью чистого CSS. Пример .

Хороший вопрос. Прямо сейчас, похоже, ваша тень является частью изображения в формате PNG, и это, как вы знаете, не изменяет размер. Вы можете использовать тени CSS3, которые будут адаптироваться к размеру контейнера. Проблема в том, что вы можете добавлять только те тени к тексту или прямоугольникам (а не стрелкам!).

Я думаю, что ваш лучший вариант - это добавить тень на поле с помощью CSS3, и иметь PNG-изображение ПРОСТО стрелки, вроде как:

Может потребоваться небольшая настройка, чтобы выровнять его идеально, но это позволит изменить размер окна в зависимости от содержимого.

.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>

Я не проверял это, но надеюсь, это даст хороший старт.

Answer 2

Попробуйте стрелки CSS: http://cssarrowplease.com/