CSS и закругленные углы (round corners)

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

Есть много способов данной верстки. Я же расскажу вам как сверстать закругленные углы с помощью абсолютного позиционирования. Этот способ позволит тянуться нашей области как по горизонтали, так и по вертикали.

Для начала определитесь с бекграундом на котором будет распологаться ваша форма, блок или кнопка с закругленными углами. Нарисуйте блок в каком либо графическом редакторе, например Photoshop. Вырезать уголки надо вместе с задним фоном. В итоге у вас должно получиться 4 картинки с закругленными углами.

<div class="roundblock">
<div class="corners"><s></s><b></b><u></u><i></i></div>
ROUND BLOCK
</div>

Внутрь элемента с классом 'corners' я поместил 4 элемента (s, b, u, i) которым позже поставлю background image.

И так начнем. Опишим стили для нашего контейнера (roundblock).

.roundblock {
   background:#ae2d00;
   padding:16px; width:300px;
   position:relative;
}

Цвет заднего фона ставим такой же как и цвет нашего закругленного блока. В моем случае размер картинок с уголками получился 16 на 16 пикселей. Поэтому ставим внутренний отсуп 16 пикселей. И конечно же ставим position:relative. Теперь элементы которые находяться внутри этого блока и позиционируются абсолютно(position:absolute) будут размещаться не относительно всего документа, а именно относительно нашего блока.

Подошла очередь к нашим углам.

Всем элементам ставим абсолютное позиционирование. Высоту и ширину утсанавливаем равную 16-ти пикселям, именно такие размеры у наших картинок.

.roundblock .corners * { position:absolute; height:16px; width:16px; display:block; }

Теперь на задний фон какждого из элементов устанавливаем наши картинки-уголки и расставляем их по углам нашего блока-контейнера.

.roundblock .corners s {
   background:url( "corner-tl.png" ) no-repeat;
   left:0;
   top:0;
}
.roundblock .corners b {
   background:url( "corner-tr.png" ) no-repeat;
   right:0;
   top:0;
}
.roundblock .corners u {
   background:url( "corner-br.png" ) no-repeat;
   right:0;
   bottom:0;
}
.roundblock .corners i {
    background:url( "corner-bl.png" ) no-repeat;
    left:0;
    bottom:0;
}

Вот собственно и все. Это работает во всех браузерах. Правда в IE6 возникают некоторые проблемы. Картинки не правильно отображаются. Чтобы этого избежать добавьте свойство overflow:hidden; для каждого уголка.

Но и это еще не все. Есть проблема посерьезнее. В свое время я потратил на ее решение около 3-х часов. Вернее на само решение проблемы у меня ушло около 20-ти минут. Сложность состояло в том чтобы выяснить в чем собственно дело. А проблема заключалась в следующем:

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




Чтобы решить эту проблему я воспользовался командой 'expression' которую прописал прямо в стилях. Expression позволяет назначить CSS-свойству Javascript-выражение. И так мы знаем что проблема в размере углов, если кратно 2-м - позиционировать надо ниже на один пиксель. Выглядить CSS в конечном итоге должен так:

.roundblock .corners * {
   position:absolute;
   height:16px;
   width:16px;
   overflow:hidden;
   display:block;
}
.roundblock .corners s {
   background:url( "corners-tl.png" ) no-repeat;
   left:0;
   top:0;
}
.roundblock .corners b {
   background:url( "corners-tr.png" ) no-repeat;
   right:0;
   top:0;
   _right: expression((this.offsetParent.clientWidth % 2) ? '-1px' : 0);
}
.roundblock .corners u {
   background:url( "corners-br.png" ) no-repeat;
   right:0;
   bottom:0;
   _bottom: expression((this.offsetParent.clientHeight % 2) ? '-1px' : 0);
   _right: expression((this.offsetParent.clientWidth % 2) ? '-1px' : 0);
}
.roundblock .corners i {
   background:url( "corners-bl.png" ) no-repeat;
   left:0;
   bottom:0;
   _bottom: expression((this.offsetParent.clientHeight % 2) ? '-1px' : 0);
}

Подчеркивание перед свойством (_right: ....) делает его активным только в IE6, поэтому он перекрывает предидущие стили.

Вот и все. Наслаждайтесь кроссбраузерными закругленными уголками которые растягиваются в зависимости от внутреннего контента.

Двухколоночный шаблон

Сейчас мы попробуем быстро и легко создать шаблон HTML документа с двумя колонками, хедером и футером. Левую колонку можно использовать для меню или для какой-нибудь рекламы(баннеров, ссылок и т.д.). Верстать будем с помощью элементов DIV.

Для начала создаем документ и наполняем его всем чем нужно:

<html>
<head>
  <title>2columnlayout</title>
  <link rel="stylesheet" type="text/css" href="page.css" />
</head>
<body>
<div id="page">
  <div id="header">Header</div>
  <div id="content">
      <div id="leftcol">Leftcol</div>
      <div id="rightcol">Rightcol</div>
  </div>
  <div id="footer">Footer</div>
</div>
</body>
</html>

Как вы видите, мы создали элемент DIV с идентификатором(id) 'page' который включает в себя 'header', 'footer' и 'content'. Последний из перечисленных содержит 'leftcol' и 'rightcol'.

Если мы заглянем в шапку нашего документа, то увидим там ссылку на .css файл в котором мы будем описывать все стили.

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

* {
margin:0;
padding:0;
}

Теперь опишем стили для нашей страницы. Сделаем так, чтобы она распологалась посередине и занимала 60% браузера по ширине.

#page { margin:0 20%;

С хедером все просто. Чтобы увидеть облась которую он занимает, ставим цвет фона и высоту 50 пикселей.

#header { background:darkcyan; height:50px; }

Контент оставляем такой какой есть.

#content { }

Вот мы и добрались до наших колонок. Поскольку мы верстаем элементами DIV которые являются блочными, (содержимое тега DIV всегда начинается с новой строки. После него также добавляется перенос строки.) следует выравнить левую колонку по левой стороне используя float.

#leftcol {
   background-color: blue;
    width:200px;
    float:left;
    height:300px;
}

Чтобы правая колонка встала на один и тот же уровень с левой, ставим ей левый внешний отсуп шириной равной ширине левой колонки - 200 пикселей.

#rightcol {
   background-color:
    blueviolet;
   margin-left:200px;
   height:200px;
}

А теперь завершающий шаг. С помощью свойства clear можно запретить обтекание другими элементами нашего футера. Конечно, если высота колонок будет явно указана и будет одинаковой, это необязательно. Но если она будет тянуться автоматически, стоит проделать этот шаг. Иначе получится что-то вроде этого:



Применяем свойство clear к нашему футеру:

#footer { clear:both; background:aqua; height:50px; }

Двухколоночный шаблон готов.