Site icon Vavik96

Как реализовать закругление углов не используя при этом изображения?

admin

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

Сделать закруглённые углы можна двумя способами:

Чтобы лучше разобраться, как говорится Who is Who(кто есть кто), я приведу в таблице ниже преимущества и недостатки этих двух способов:

Таблица 1. Преимущества и недостатки способов закругления углов
HTML и CSS HTML, CSS и изображения
    Преимущества:
  • кроссбраузерность (тестировался в IE6, IE7, Opera 9, FireFox 2-3)
  • никаких дополнительных запросов к серверу
  • просто реализуется и проще поддержка, чем при работе с изображениями (например, можно поменять цвет блока, изменив только одно
    значение в CSS, правда это работает и с уголками в виде полупрозрачных изображений)
    Недостатки:
  • невозможность создания сложных эффектов
  • несемантические элементы при верстке
    Преимущества:
  • можно закруглять, что угодно и как угодно
    Недостатки:
  • несемантические элементы при верстке
  • дополнительная нагрузка на сервер в виде запросов множества уголков различного цвета и размера (в лучшем случае уголки
    группируются по 4 в одном изображении)
  • не лучший вид страницы, если у пользователя отключена загрузка изображений (особенно если используются img, а не свойство background)

И так, Вы посмотрели все за и против. Но, исходя из названия данной статьи, мы рассмотрим только первый способ закругления уголков, т.е.
основанный только на HTML и CSS. Второй способ будет рассмотрен в соответствующей статье.

Для начала определимся, с помощью какого тега будем делать скругляющие блоки. Не долго думая, воспользуемся тегом
b. Почему? Да потому, что он хоть и устаревший, но зато коротко пишется. А краткость написания, будет иметь для нас большое значение,
так как этот тег придется часто повторять. Вообще, правильней было бы использовать тег div, так как он по сути своей как раз и является
контейнером(блоком) и предназначен для использования в CSS.

Наконец-то, приступим к практике. Для начала создадим html-разметку, которая и будет у нас выглядеть как блок с закруглёнными углами.

HTML-код формы:

<!-- rounded - закруглённый, box - контейнер -->
<div id="rounded-box">
  <b class="r3"></b>
  <b class="r1"></b><b class="r1"></b>
  <div class="inner-box">
    <h3>Я контейнер, у которого закругленные углы с радиусом R=3px</h3>
  </div>
  <b class="r1"></b><b class="r1"></b>
  <b class="r3"></b>
</div>

CSS-код формы:

.r1, .r2, .r3 {
  display: block;
  height: 1px;
}
.r3 {
  margin: 0 3px;
}
.r2 {
  margin: 0 2px;
}
.r1 {
  margin: 0 1px;
}
/* указываем цвет фона и отступы */

#rounded-box .inner-box, #rounded-box  b {
  background-color: #d3d3d3;
}
.inner-box {
  padding:1em;
}
.r1, .r2, .r3 {overflow: hidden; font-size:1px;}

/* Для старых версий IE */
.r1, .r2, .r3 {overflow: hidden; font-size:1px;}

HTML-код разбирать не будем, думаю там ничего сложного. А вот к CSS присмотремся внимательней. Мы сделали b блочным элементом
высотой 1px и задали ему соответствующие поля.

Обратите внимание на этот css-код:

.r1, .r2, .r3 {overflow: hidden; font-size:1px;}

В IE6 есть своя заморочка по поводу пустых блоков — если для них задана высота 1px, то он растягивает их до 2px, что не способствует
закруглению уголков. Какой выход? Проблема решается указанием overflow:hidden и добавлением правила font-size:1px.
Как с другими браузерами? В принципе, браузерам отличным от IE6 это свойство ничем не мешает, поэтому нет необходимости использовать
хаки или условные комментарии.

Для закрепления материала сделаем углы радиусом 5 и 10px. Сложности особой нет, просто в коде у нас добавятся дополнительные пустые блоки.

Новый CSS-код формы:

.r1, .r2, .r3, .r4, .r5, .r7, .r10 {
  display: block;
  height: 1px;
}
.r10 {
  margin: 0 10px;
}
.r7 {
  margin: 0 7px;
}
.r5 {
  margin: 0 5px;
}
.r4 {
  margin: 0 4px;
}
.r3 {
  margin: 0 3px;
}
.r2 {
  margin: 0 2px;
}
.r1 {
  margin: 0 1px;
}
#rounded-box .inner-box, #rounded-box  b, #rounded-box1 .inner-box, 
#rounded-box1  b, #rounded-box2 .inner-box, #rounded-box2  b {
  background-color: #d3d3d3;
}
.inner-box {
  padding:1em;
}
.r1, .r2, .r3, .r4, .r5, .r7, .r10 {overflow: hidden; font-size:1px;}

HTML-код формы:

<div id="rounded-box1">
    <b class="r5"></b>
    <b class="r3"></b>
    <b class="r2"></b>
    <b class="r1"></b><b class="r1"></b>  
  <div class="inner-box">
    <h3>Я контейнер, у которого закругленные углы с радиусом R=5px</h3>
  </div>
    <b class="r1"></b><b class="r1"></b>
    <b class="r2"></b>
    <b class="r3"></b>
    <b class="r5"></b>
</div> 
<p></p>
<div id="rounded-box2">
    <b class="r10"></b>
    <b class="r7"></b>
    <b class="r5"></b>
    <b class="r4"></b>
    <b class="r3"></b>
    <b class="r2"></b><b class="r2"></b>
    <b class="r1"></b><b class="r1"></b><b class="r1"></b>  
  <div class="inner-box">
    <h3>Я контейнер, у которого закругленные углы с радиусом R=10px</h3>
  </div>
    <b class="r1"></b><b class="r1"></b><b class="r1"></b> 
    <b class="r2"></b><b class="r2"></b>
    <b class="r3"></b>
    <b class="r4"></b>
    <b class="r5"></b>
    <b class="r7"></b>
    <b class="r10"></b>
</div>

Надеюсь, вы уловили суть как делаются закруглённые уголки без изображений. Можете поиграть с цветом фона(
background-color) и посмотреть, что получается.

comxa.com

Exit mobile version