Главная » Уроки » Делаем блоки с закругленными углами без использования изображений

Делаем блоки с закругленными углами без использования изображений

Давайте рассмотрим способ создания и вывода блока на страницах сайта, не прибегая к использованию ни одного графического изображения.
В этом варианте каждый пиксель угла прорисовывается с помощью .Тем самым уменьшается время загрузки страницы, да и редактировать параметры выводимого блока довольно просто.
 
Закругленные углы блоков

 
Посмотрите как будет выглядеть выводимый блок на примере:

Теперь как всегда, разберем за счет чего достигается такой результат.
Вопервых, непосредственно на странице между тегами <head></head> или в файле ваших стилей CSS, как в демо, пропишите следующий код:
 

.block_br {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 15px;
    border: 1px solid #B0BCC2;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
.block_br h2 {
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    color: #00b400
}

Как видно из приведённого выше кода, настроить можно практически любой параметр создаваемого блока, размеры, цветовую палитру элементов блока, ну, и конечно же скругление углов, используя свойство .
Для вывода блока непосредственно на странице HTML, необходимо прописать следующее:
 

<div class="block_br">
<div class="block_br">
    <h2>Сглаженное закругление углов с помощью CSS</h2>
    <p>Этот способ не использует ни одного графического файла. 
    <p>В этом варианте используется новое свойство из обоймы CSS. В результате углы выглядят плавно скруглёнными.</p>
</div>

 
После всех этих нехитрых манипуляций, с чувством полного удовлетворения, можно полюбоваться на результат. Надеюсь всё у вас получится.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

6 комментариев
  1. Виктория:

    Все браузеры отображают такой блок?

    Ответить
    • driver:

      Здравствуйте Виктория.

      Спасибо за интерес к статье и комментарий. Поправил исходный код приведенный в статье и исправил битые ссылки на демо — страницу.

      Все современные браузеры включая IE 8 + корректно отображают блоки выполненные на CSS3. За дремучие версии IEшки отвечать не берусь, так как давно на них забил, ну а вы можете легко проверить, как отображается в различных браузерах, с помощью онлайн — сервиса Browsershots.

      Удачи.

      Ответить
  2. Виктория:

    Спасибо за ответ и отдельное спасибо за полезную ссылочку!

    Ответить
  3. Almat_kz:

    Спасибо!Driver!

    Ответить
  4. Спасибо! То что искал поставлю чат в этот блок!

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru