УрокСпособы закругления уголков. 2 способ.

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

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

Закругляем уголки с помощью :before и :after

Такие элементы, как :before и :after существуют в css начиная с версии 2.0, однако они почему-то мало кому известны.

В общем, лучше на примере. Допустим, у нас есть такой контейнер:

<div class="box">Контент</div>

плюс этого метода в том, что больше HTML не будет! В исходном коде будет записано только это!!

Теперь по css'y:

Задаем требуемый фон для нашего блока:

.box {
    background: #D27B24;
    padding: 15px;
}

Однако без картинок все же не обойтись, их все равно придется вырезать таким же образом как и в предыдущем уроке.

Четыре полученные картинки навешиваем на элементы :before и :after

.box:before{
    content:url(img/tl.gif);
    background: url(img/tr.gif) no-repeat top right;
    height: 10px;
    display: block;
    margin: -15px -15px 13px -15px;
}
 
.box:after{
    content:url(img/bl.gif);
    background: url(img/br.gif) no-repeat right bottom;
    height: 10px;
    display: block;
    margin: 13px -15px -15px -15px;
}

Принцип работы
атрибут content позволяет задавать содержимое контейнера. Само собой, слева на право. Поэтому если мы укажем content'у фон картинку и высоту этого :before или :after равную высоте картинки, то она автоматически станет слева, и, соответственно сверху. А атрибут background задаётся без повторений (что и понятно, нафига нам безмерное количество уголков?). Затем указывается, как располагать картинку. Для :before это сверху справа (top right), а для :after это справа снизу (right bottom).

Этот способ работает во всех современных браузерах, однако как всегда IE 6—7 стоят особняком, в них данный метод не работает. Но чтобы сделать уголки и для них, придётся написать немного javascript.

Данный код лучше помещать в отдельный файл ie.css, который будет подключаться специально для IE.

.incut{
    zoom:1;
    behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = ' &lt; span style="background: url(img/tr.gif) no-repeat 100% 0;height: 10px;display: block;margin: -15px -15px 13px -15px;"  &lt;   &lt; img src="img/tl.gif" alt="" /  &lt;   &lt; /span  &lt;  ' + this.innerHTML + ' &lt; span style="background: url(img/br.gif) no-repeat 100% 0;height: 10px;display: block;margin:13px -15px -15px -15px;"  &lt;   &lt; img src="img/bl.gif" alt="" /  &lt;   &lt; /span  &lt;  ') : '');
}

Если в браузере пользователя будет отключена поддержка JS он просто увидит фон который вы задали для блока, т.е. контент будет донесен до пользователя.

Кстати, в качестве фона можно задать картинку.

Плюсы:

  • мало кода
  • не сложен в использовании

Минусы:

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

Теперь вы знаете 2 способа закругления уголков у контейнеров. В следующем уроке я расскажу самый "крутой", но и самый тяжёлый для понимания способ закругления.

Комментарии

Аватар пользователя D.Choomc
D.Choomc написал:

Не понятен сам принцип. Как content и background раскинут картинки по разным углам?

25.08.2010 10:45
Аватар пользователя Spleshka
Spleshka написал:

дописал принцип

25.08.2010 13:53
Аватар пользователя D.Choomc
D.Choomc написал:

thanx)) что-то такое примерно и представлял. Часто пользуешься таким способом?

25.08.2010 17:22
Аватар пользователя Spleshka
Spleshka написал:

крайне редко)) я люблю кроссбраузерные методы =) этим пользуюсь если надо либо писать пхп код, изменять какие-то функции и дописывать хтмл, чтобы сделать кроссбраузерные уголки, НО ЛЕНЬ :)

25.08.2010 17:47
Аватар пользователя D.Choomc
D.Choomc написал:

я иногда делаю еще таким способом:

в css файлик добавляем следующее ↓

.b1, .b2, .b3, .b4 {
display:block; /* Задание отображения границ и углов */
overflow:hidden; /* Задание отображения границ и углов */
}

.b1, .b2, .b3 {
height:1px; /* Задание высоты границ и углов */
}

.b2, .b3, .b4 {
background:#ffedbe; /* Задание цвета фона в пределах закругления */
border-left:1px solid #00346e; /* Задание стилей левых углов */
border-right:1px solid #00346e; /* Задание стилей правых углов */
}

.b1 {
margin:0 5px; /* Задание отступов */
background:#00346e; /* Задание цвета верхней и нижней границ */
}

.b2 {
margin:0 3px; /* Задание отступов */
border-width:0 2px; /* Задание ширины границы */
}

.b3 {
margin:0 2px; /* Задание отступов */
}

.b4 {
height:2px; /* Задание высоты границ и углов */
margin:0 1px; /* Задание отступов */
}

.content {
background:#ffedbe; /* Задание общего фона */
border:0 solid #00346e; /* Задание стилей границ */
border-width:0 1px; /* Задание ширины границ */
}

А в хтмл оборачиваю блок в спаны:

див>

Добавь, плиз, кнопочку "код")) А то затрахался транслитить)) Или разреши))

25.08.2010 19:01
Аватар пользователя Spleshka
Spleshka написал:

Добавил кнопку цитирования. Будет время настрою вставку кода и подсветку его же) пока придётся пользоваться чем есть (:

25.08.2010 21:23

Комментировать