УрокСпособы закругления уголков. 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 = ' < span style="background: url(img/tr.gif) no-repeat 100% 0;height: 10px;display: block;margin: -15px -15px 13px -15px;" < < img src="img/tl.gif" alt="" / < < /span < ' + this.innerHTML + ' < span style="background: url(img/br.gif) no-repeat 100% 0;height: 10px;display: block;margin:13px -15px -15px -15px;" < < img src="img/bl.gif" alt="" / < < /span < ') : ''); }
Если в браузере пользователя будет отключена поддержка JS он просто увидит фон который вы задали для блока, т.е. контент будет донесен до пользователя.
Кстати, в качестве фона можно задать картинку.
Плюсы:
- мало кода
- не сложен в использовании
Минусы:
- для IE приходится писать дополнительный код
- если у пользователя в IE отключена поддержка скриптов то углы будут без закруглений
- иногда может потребоваться время, чтобы правильно настроить уголки
Теперь вы знаете 2 способа закругления уголков у контейнеров. В следующем уроке я расскажу самый "крутой", но и самый тяжёлый для понимания способ закругления.
- powerscin
- 25.08.2010
- 7904
Комментарии
Не понятен сам принцип. Как content и background раскинут картинки по разным углам?
дописал принцип
thanx)) что-то такое примерно и представлял. Часто пользуешься таким способом?
крайне редко)) я люблю кроссбраузерные методы =) этим пользуюсь если надо либо писать пхп код, изменять какие-то функции и дописывать хтмл, чтобы сделать кроссбраузерные уголки, НО ЛЕНЬ :)
я иногда делаю еще таким способом:
в 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; /* Задание ширины границ */
}
А в хтмл оборачиваю блок в спаны:
див>
Добавь, плиз, кнопочку "код")) А то затрахался транслитить)) Или разреши))
Добавил кнопку цитирования. Будет время настрою вставку кода и подсветку его же) пока придётся пользоваться чем есть (:
Комментировать