Стили CSS — Создаем растяжимый по вертикали «Post-IT»

Автор: Крис Койер
Перевод: Всеволод Козлов

Уверен, что у Вас хоть раз, но возникала потребность в создании растяжимого по вертикали постика. Высота этого постика должна изменяться в зависимости от объема контента, впечатываемого в него .

Реализуется эта затея совсем нетрудно!

Сперва я покажу Вам, как это будет выгядеть, когда будет готово:

Стили CSS - Создаем растяжимый по вертикали “Post-IT”


Итак, как же добиться этого? На самом деле все предельно просто!

Ниже я привожу Вам фрагменты HTML и CSS-кодов, реализующих примеры, изображенные на скриншоте в самом начале статьи!

Фрагмент CSS-кода

div.expandable_note_box {
width: 210px;
min-height: 100px;
background-image: url("top.jpg");
background-position: top left;
background-repeat: no-repeat;
padding-top: 20px;
font-size: 80%;
}
div.expandable_note_box div.middle {
width: 210px;
background-image: url("middle.jpg");
background-position: center;
background-repeat: repeat-y;
}
div.expandable_note_box div.inside {
padding-left: 20px;
width: 167px;
}

Фрагмент HTML-кода

<div class="expandable_note_box">
<div class="middle">
<div class="inside">
<p>Hi Mom.</p>
</div>
<img src="bottom.jpg" alt="bottom" />
</div>
</div>

Ниже Вам ссылка на скачивание архива с проиллюстрированным выше примером. Также в архив приложен psd-файл.

[Скачать пример]

Оригинал статьи: Expandable CSS “Note” Box

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*