| Главная « Уроки Web-мастерства « Прямоугольники с закругленными углами на основе CSS |  |
 |
Способы закругления углов прямоугольника … |
Закругленные углы весьма модны в современном Web-дизайне. Из-за того, что Web-дизайн в основе своей - прямоугольный, закругленные углы с помощью графики, которая имеется в составе структурной разметки получить нельзя.
Однако до появления CSS единственным способом создания расширяемого прямоугольника с закругленными углами являлось создание таблицы с девятью ячейками.
Тот же эффект можно получить при помощи CSS-стилей и логической разметки (и конечно, без всяких таблиц).
Как и для большинства других проблем Web-дизайна, здесь существует много решений, самые простые из которых я представляю в этой статье.
 |
Простой прямоугольник с закругленными углами … |
В этом примере создается прямоугольник с закругленными углами, заполненный сплошным цветовым фоном, как показано на (рис. 1).
|
| (рис. 1) Простой прямоугольник с закругленными углами. |
При этом методе используется четыре файла-изображения углов (по одному на каждый угол), и применяются в качестве фоновых изображений к четырем элементам разметки.
Такие отдельные изображения можно объединять в один файл изображения и применять в разных местах к разным углам прямоугольников. Преимущество здесь в том, что вам нужно загружать только одно изображение, а не четыре.
На (рис. 2) показаны файлы изображений, используемые в примере:
top_left.gif
|
top_right.gif
|
 bottom_left.gif |
 bottom_right.gif |
| (рис. 2) Графические изображения углов для простого прямоугольника. | |
Хитрость в том, чтобы в разметке были четыре элемента, к которым можно было бы применить эти фоновые изображения. Именно это CSS-дизайнеры обычно называют поиском «зацепок» в разметке, к которым можно применить стили.
Если в структуре вашего документа меньше четырех элементов, возможно, вам потребуется добавить один-два элемента div для получения нужного числа «зацепок». Универсальный пример, который я привожу в статье, создан полностью на основе элементов div, но лучше использовать реальные элементы семантической разметки.
| Код: |
|
/* Логическая разметка */
<div class="box"> <div class="top"> <div></div> </div> <div class="content"> <p>Простой прямоугольник с закругленными углами</p> </div> <div class="bottom"> <div></div> </div> </div> |
Добавление бессмысленных пустых элементов нарушает семантическую целостность исходного документа и, как правило, не поощряется. И все же они могут быть необходимы для создания определенных визуальных эффектов.
Вам, как дизайнеру и разработчику, нужно учесть все «за» и «против» и реализовать решение на основе своих собственных приоритетов и особенностей проекта.
Ниже я привожу код таблицы стилей, в котором применяются фоновые изображения к элементам div классов top и bottom, а также ко всем элементам div, которые в них содержатся. В качестве фона всего изображения в данном примере указывается шестнадцатеричное значение соответствующего цвета.
| Код: |
|
/* Таблица стилей */
.box { background: #c6351c; /* указываем фоновые изображения для углов */ } .top div { background: url(top_left.gif) no-repeat top left; } .top { background: url(top_right.gif) no-repeat top right; } .bottom div { background: url(bottom_left.gif) no-repeat bottom left; } .bottom { background: url(bottom_right.gif) no-repeat bottom right; } /* подробно указываем высоту и ширину */ /* каждый div с изображением будет шириной во весь контейнер */ .top div, .top, .bottom div, .bottom { width: 100%; height: 22px; /* соответствует ширине изображений углов */ } .content { margin: 0 22px; /* соответствует ширине изображений углов */ } .box { width: 30em; /* прямоугольник может быть любой ширины * / } |
|
Более красивые прямоугольники … |
Если для вашего дизайна требуются дополнительные графические украшения краев прямоугольника и при этом прямоугольник должен по-прежнему расширяться, то лучше использовать несколько иной подход.
Ниже я привожу пример, который формирует расширяющийся прямоугольник, показанный на (рис. 3).
|
| (рис. 3) Красивые изображения углов прямоугольника. |
top_left.gif
|
top_right.gif
 right_side.gif  bottom_right.gif |
 bottom_left.gif |
|
| (рис. 4) Графические изображения углов для красивого прямоугольника. | |
В данном примере разметка должна содержать пять зацепок для стилей фоновых изображений. На этот раз вместо нескольких элементов div я использую имеющиеся в разметке элементы P, а элементы DIV будут добавляться только по необходимости.
Вот разметка, используемая в данном примере:
| Код: |
|
/* Логическая разметка */
<div class="sidebar"> <p>ЗАГОЛОВОК</p> <div class="content"> <p>Красивые изображения углов прямоугольника</p> </div> <div class="footer"> <p>ПОДВАЛ</p> </div> </div> |
Таблица стилей, которая сводит все это вместе, применяет изображения к элементам div и элементу-абзацу р.
Также в таблице стилей используется вертикальное поле размером 2em для компенсации разрыва, вносимого возвратом каретки в абзацах.
Это значение вам, возможно, нужно будет изменить, в зависимости от размера вашего шрифта и высоты строки, так что обязательно протестируйте несколько браузеров, особенно Internet Explorer.
Обратите внимание, что этот метод не поддерживается браузером Netscape 4.
| Код: |
|
/* Таблица стилей */
div.sidebar { background: url(top_left.gif) top left no-repeat; width: 35%; } div.sidebar p { background: url(top_right.gif) top right no-repeat; padding: 20px; margin: 0; } div.content p { background: url(right_side.gif) top right repeat-y; margin: 0; margin-top: -2em; padding: 20px; } div.footer { background: url(bottom_left.gif) bottom left no-repeat; } div.footer p { background: url(bottom_right.gif) bottom right no-repeat; display: block; padding: 20px; padding-bottom: 30px; margin: -2em 0 0 0; } |
Этот пример приводится в статье «CSS Design: Creating Custom Corners & Borders», автор Сорен Мэдсен (Soren Madsen), опубликованной на «A List Apart».
Я рекомендую прочитать оригинальный текст, где приводятся пошаговые инструкции, объясняющие, как была написана таблица стилей.
Там же, на сайте «A List Apart», посмотрите также статью Дэна Цедерхолма (Dan Cederholm), посвященную расширяющимся прямоугольникам с закругленными углами, которая озаглавлена «Mountaintop Corners».
| Урок № 11: | Дата: 22.01.2008 | Автор: Коровенков Юрий |  |
