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

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

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