Закругленные углы (метод раздвижных дверей)
Очень часто верстая сайт, заказчик хочет, чтобы на нем были «резиновые» блоки с закругленными углами. Этот блок выглядит очень неплохо и в реализации не так это сложно, как может показаться на первый взгляд.
Итак, наша задача: сделать динамичный блок с закругленными углами на CSS. Для реализации этого нам потребуется 4 картинки. Мы можем взять одну и нарезать ее в Photoshop, как показано на картинке ниже.

Картинку я сделал размером 800 на 600 пикселей и вот как я ее порезал

В результате чего у меня получилось 4 картинки, которые сейчас мы и будем использовать.
Подготовим html-файл примерно такого содержания, css я засунул в тот же файл, чтобы было удобнее.
Посмотреть на пример можно в исходном коде по ссылке закругленные углы css.
Если вы внимательно посмотрите на код, то увидите в разметке лишние элементы, которые непосредственно нам помогают вставить фоновые изображения. При изменении размеров окна web-браузера, фоновые изображения остаются в соответствующих углах, что нам и нужно.
Если у вас возникают вопросы, то смело их задавайте в комментариях, с удовольствием на них отвечу. Всего вам доброго и удачи во всех начинаниях.
| Print article | This entry was posted by admin on 25.12.2009 at 6:11 пп, and is filed under CSS & HTML. Follow any responses to this post through RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |
6 дней назад
Не хотите продать свой vredniy.ru ?