Как создать "резиновый" блок с закругленными углами с помощью одного изображения.

Видеоуроки

Как создать тянущийся блок с закругленными углами с помощью одного изображения
Выпуск #7 от 25.11.2008

На днях я нашла подборку ссылок на статьи, посвященные созданию блоков с закругленными углами. Любознательные натуры, увлеченые технологией CSS , найдут здесь для себя много интересного. Так же надо заметить, что многие способы требуют применения множества вложенных друг в друга div-ных блоков с различными классами.

Таким образом, желая придать приятные закругления блокам на наших страницах, мы будем вынуждены добавлять в HTML-структуру десятки элементов, которые делают ее такой непонятной, непрозрачной для нас. Поэтому я предлагаю вам познакомиться со способом, который, как мне кажется, прост для понимания, не требует каких-то невероятных хитростей и премудростей в CSS, а главное — применяется только один div-ный блок.

На уроке создается нефиксированный блок (тянущийся, «резиновый»): при уменьшении окна браузера блок уменьшается по ширине, на больших мониторах — увеличивается (если в таблице стилей указать ширину блока не в процентах, а в пикселях, то блок станет фиксированным по ширине); высота блока зависит от наполнения контента. Обычно при загрузке страниц с такими блоками мы видим, как сначала появляются обычные прямоугольники, а затем последовательно подгружаются уголки. В данном случае подгружается форма целиком, так как я не делила ее на части.

Если рассуждать логически, то для создания такого блока нам требуется, как минимум, 4 контейнера, каждый из которых будет связан с одним углом. Но давайте оставим в покое div-ы.

Эту задачу я предлагаю решить с помощью списка определений.

Необходимые теоретические сведения

Как известно, в HTML есть два способа создания списков: маркированные списки создаются с помощью UL, нумерованные — с помощью OL. Отдельные элементы списков определяются в обоих случаях тегом LI.

Менее распространен третий способ создания списков, который получил название списка определений (Definition List), создаваемый с помощью DL. Любой список определений должен иметь, как минимум, одно понятие или термин (Definition Term, буквально определяемый термин), который создается с помощью DT. В свою очередь этот термин соответственно должен иметь определение (definition description, буквально описание определения), которое создается с помощью DD.

Синтаксис списка определения:

<dl>
<dt>Термин 1</dt>
<dd>Определение термина 1</dd>
<dt>Термин 2</dt>
<dd>Определение термина 2</dd>
</dl>

Согласно стандартам XHTML закрывающие теги </dt>, </dd> обязательны. Но кодеры-минималисты, для которых чем меньше кода, тем лучше (к тому же если им рекомендации валидатора не указ), могут оставлять теги <dt>, <dd> незакрытыми. О наиболее распространенном использовании списков определений.

Давайте представим наш блок как список определений. В этом списке один термин, название — Закругленные углы — и одно определение — содержание блока:

<dl>
<dt>Закругленные углы </dt>
<dd><p>У всеобщей любви к закругленным углам есть причина, они улучшают читабельность и упрощают восприятие информации. Закругленные углы используются многими новыми сайтами. Все больше элементов страницы становятся закругленными — меню, кнопки, поля ввода, таблицы и колонки текста.</p>
<p>Типичными примерами использования закругленных углов могут быть <a href="http://www.ioutliner.com/">Ioutliner</a>,
<a href="http://www.netsquared.org/">Netsquared</a> и <a href="http://www.springdoo.com/">Springdoo</a>.</p></dd>
</dl>

Такой список мы включаем в div-ный блок. Таким образом, следующие элементы мы можем связать с углами формы: DIV, DL, DD . С каким элементом можно связать четвертый угол формы? Я это сделала с помощью пустого тега P с классом.

Окончательный вариант HTML-структуры:

Такой список мы включаем в div-ный блок. Таким образом, следующие элементы мы можем связать с углами формы: DIV, DL, DD . С каким элементом можно связать четвертый угол формы? Я это сделала с помощью пустого тега P с классом.

<div class="formbox">
<dl>
<dt>Закругленные углы</dt>
<dd><p>У всеобщей любви к закругленным углам есть причина, они улучшают читабельность и упрощают восприятие информации. Закругленные углы используются многими новыми сайтами. Все больше элементов страницы становятся закругленными — меню, кнопки, поля ввода, таблицы и колонки текста.</p>
<p>Типичными примерами использования закругленных углов могут быть <a href="http://www.ioutliner.com/">Ioutliner</a>,
<a href="http://www.netsquared.org/">Netsquared</a> и <a href="http://www.springdoo.com/">Springdoo</a>.</p>
<p class="bot"></p></dd>
</dl>
</div>

На видеоуроке демонстрируется:
  1. как создать данную HTML-структуру блока в среде Dreamweaver;
  2. как оформить блок с помощью CSS, используя одно изображение;
  3. как создать форму с закругленными углами в Adobe Photoshop.

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

Преимущества способа и границы применения

1. Понятный, компактный код.

2. Можно использовать неограниченное количество блоков на одной странице. Ширина блоков может быть разной: все зависит от ширины блоков, в которых будут размещаться блоки с формами (в этом случае нужно установить ширину блока с формой в 100%). Независимо от количества блоков с формами их оформление при загрузке страницы произойдет практически мгновенно, так как картинка весит мало (в моем примере — 4.33 КБ).

3. Максимальная ширина растяжения блока зависит от размера картинки по ширине. Если предполагаются более широкие блоки, то размер картинки должен быть больше. Максимальная высота блока зависит от размера картинки по высоте (в моем примере — 1143px), т.е. этот способ не подходит для создания блока, неограниченного по высоте.

4. Блок может иметь несколько заголовков, но остальные заголовки должны быть размещены в теге DD. В любом случае пустой тег p class="bot" должен находиться в самом низу тега DD.

5. Если использовать форму без тени и других эффектов, то можно создать блок, закругленный с двух сторон (например, сверху слева и снизу справа). Таким образом, одна форма может использоваться в блоках, отличающихся по оформлению.

Технические характеристики

1. Длительность видеоурока — 21мин. 32 сек. Размер ролика — 830 х 740. Упакован в rar архив lessons7.rar (19.7 мб).

Просматривать можно в проигрывателях Windows Media, Media Player Classic. Не забывайте о полноэкранном режиме.

В архиве есть так же папка creation_ forms_ rounded_corners с исходными файлами. Не забывайте извлекать и эту папку тоже.

Статьи
Блочная верстка сайтов
Контент для сайта