Раз уже пошла такая пьянка бурное обсуждение, то предложу и свой метод скругления углов, с характеристиками, которые можно увидеть в названии топика.
Хочу заметить, что это не улучшение какого-то из существующих методов, а совершенно новый (по крайней мере, я нигде не смог найти — наверное, плохо искал ;) метод. В статье 38 статей о создании закругленных углов на сайтах данный метод также не был упомянут.
Итак, что же мы имеем: чистый CSS, без единой картинки, без JavaScript (хотя и с ним, для демонстрации, тоже сделаем), с анти-аллиасингом (то есть плавные переходы), прозрачные углы (то есть в фоне может быть что угодно), тянущийся по высоте и ширине и, конечно же, кроссбраузерный метод.
Здесь класс box используется чисто в эстетических целях (к примеру js цепляется именно к нему, то есть это означает, что блок будет со скругленными углами), никаких css-свойств на него не навешивается.
Пожалуйста:
Знающие уже, наверное, проанализировали код, и поняли — что вся суть в использовании &bull — обычного буллита, он у нас и круглый и сглаженный. Соответственно, в каждом из углов показываем нужную его часть, остальную скрывая.
При таких плюсах, можно забить на любые минусы :)
Кому метод придется по душе, пользуйтесь на здоровье.
Хочу заметить, что это не улучшение какого-то из существующих методов, а совершенно новый (по крайней мере, я нигде не смог найти — наверное, плохо искал ;) метод. В статье 38 статей о создании закругленных углов на сайтах данный метод также не был упомянут.
Итак, что же мы имеем: чистый CSS, без единой картинки, без JavaScript (хотя и с ним, для демонстрации, тоже сделаем), с анти-аллиасингом (то есть плавные переходы), прозрачные углы (то есть в фоне может быть что угодно), тянущийся по высоте и ширине и, конечно же, кроссбраузерный метод.
HTML:
<div class="box w60"> <div class="box-c"> <em class="ctl"><b>•</b></em> <em class="ctr"><b>•</b></em> </div> <div class="box-inner"> Текст </div> <div class="box-c"> <em class="cbl"><b>•</b></em> <em class="cbr"><b>•</b></em> </div> </div>
Здесь класс box используется чисто в эстетических целях (к примеру js цепляется именно к нему, то есть это означает, что блок будет со скругленными углами), никаких css-свойств на него не навешивается.
CSS:
div.w60 { width: 60%; margin: 0 auto; } div.box-c { height:20px; margin: 0 20px; position: relative; background: #C32300; } div.box-c em b { position:absolute; font:150px Arial; line-height:40px; font-weight:normal; } .ctl, .cbl, .ctr, .cbr { z-index:11; width:20px; height:20px; color:#C32300; overflow:hidden; position:absolute; background:transparent; } .ctl {top:0; left:-20px;} .cbl {bottom:0; left:-20px;} .ctr {top:0; right:-20px;} .cbr {bottom:0; right:-20px;} .ctl b {left:-8px;} .ctr b {left:-25px;} .cbl b {left:-8px; top:-17px;} .cbr b {left:-25px; top:-17px;} div.box-inner { padding: 0 20px; background: #C32300; }
Пример давай
Пожалуйста:
- Пример №1 (зеркало) — обычный html+css, резиновый по высоте-ширине
- Пример №2 (зеркало) — лишняя разметка убрана в ненавязчивый js
- Пример №3 (зеркало) — чтобы изменить цвет бокса, вам не нужно рисовать картинки, делать спрайты, либо просто подбирать полутона для сглаживания — достаточно поменять 1(!) цвет
- Пример №4 (зеркало) — что из этого можно сделать
Где подвох?
Знающие уже, наверное, проанализировали код, и поняли — что вся суть в использовании &bull — обычного буллита, он у нас и круглый и сглаженный. Соответственно, в каждом из углов показываем нужную его часть, остальную скрывая.
Плюсы
- чистый CSS
- Без картинок
- Без Javascript
- Сглаженность
- Прозрачность углов
- Резиновость
Минусы
При таких плюсах, можно забить на любые минусы :)
- изменение радиуса углов тянет за собой «подгадывание» радиуса буллита и его координат
Кому метод придется по душе, пользуйтесь на здоровье.