• Закругленные углы (метод раздвижных дверей)

    by  • 25.12.2009 • CSS & HTML • Комментарии [4]

    Очень часто верстая сайт, заказчик хочет, чтобы на нем были «резиновые» блоки с закругленными углами. Этот блок выглядит очень неплохо и в реализации не так это сложно, как может показаться на первый взгляд.

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

    Картинку я сделал размером 800 на 600 пикселей и вот как я ее порезал
    fullcut 300x294 Закругленные углы (метод раздвижных дверей)
    В результате чего у меня получилось 4 картинки, которые сейчас мы и будем использовать.
    Подготовим html-файл примерно такого содержания, css я засунул в тот же файл, чтобы было удобнее.
    Посмотреть на пример можно в исходном коде по ссылке закругленные углы css.
    Если вы внимательно посмотрите на код, то увидите в разметке лишние элементы, которые непосредственно нам помогают вставить фоновые изображения. При изменении размеров окна web-браузера, фоновые изображения остаются в соответствующих углах, что нам и нужно.
    Если у вас возникают вопросы, то смело их задавайте в комментариях, с удовольствием на них отвечу. Всего вам доброго и удачи во всех начинаниях.

    Метки:

    Комментарии к "Закругленные углы (метод раздвижных дверей)"

    1. 05.03.2010 at 00:26

      Не хотите продать свой vredniy.ru ?

    2. fork
      07.06.2010 at 22:48

      давно уже отказался от картинок, можно же генераторами вроде http://border-radius.narod.ru/ при помощи css даже без скриптов получить сглаженные углы

    3. 08.06.2010 at 10:23

      согласен, интересный сервис и так в разы быстрее, нежели нарезать кучу картинок

    4. 14.07.2010 at 09:07

      спасибо за способо

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

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