Есть много способов делать в верстке скругленные углы. И пока все браузеры поголовно не начнут поддерживать свойство border-radius, надо будет каждый раз думать о том, какой метод использовать в том или ином проекте.
Есть множество разнообразных методов — от использования подложек блоков фиксированных размеров и до создания уголков с помощью vml или svg. В этом топике я не буду рассматривать известные методы, так как информации по данному поводу предостаточно. Я попробовал создать yet another метод.
Сразу оговорюсь — мой метод не панацея, и ему свойственны несколько минусов, которые я опишу подробнее.
Я постараюсь быть кратким.
Допустим, нам надо создать блок со скругленными углами.
По моему (говорю «моему», так как еще не встречал данного метода — если-что — поправьте) методу нам понадобится 3 дива и 1 изображение, на котором и будут наши уголки.
Для примера нарисуем простенькую картинку:
и назовем ее corners.png
На ней мы имеем 4 уголка, засунутых в 1 спрайт.
В данном случае я взял ширину картинки равную 16 пикселям — в обычном случае равных 1em.
Эту величину надо запомнить — так как это будет ширина одного «кванта», и все другие размеры будут кратны ему или уменьшены в парное колличество раз — 0.5, 0.25, 0.125…
Теперь представим, что у нас есть блок фиксированого размера — например 20em на 3em.
Если мы поставим ему стиль
то в итоге получим такой результат:
Следующим шагом будет добавление контейнера внутрь данного. Показываю, пока-что, схематически:
Как мы видим, ширина данного контейнера равна 100% от родительского — по горизонтали и 100%−1квант — по вертикали — чтобы нормально перекрыть фон родительского контейнера.
По такому-же методу создаем еще один контейнер в том, что мы только-что создали:
Как мы видим высота такого блока равна 100%+1квант от родительского и ширина 100%−1квант
Вот и весь метод.
Сама разметка в данном случае выглядит так, как и говорилось — не больше и не меньше 3-х дивов
Css файл тоже не особо сложный. Стоит только учесть, что css в данном случае — для динамической высоты контента (высота кратная кванту), хотя можно сделать и с фиксированной высотой
Я думаю — тут все просто и дополнительных объяснений не надо.
В итоге мы видим, что прекрасный сервис browsershots.org говорит нам, что мы добились одинакового результата во всех браузерах, который выглядит так:
К минусам такого метода можно отнести:
Может показаться, что минусов больше чем плюсов, но решать вам. При использовании сеточных дизайнов данный метод (на мой взгляд) подойдет как нельзя лучше.
UPD: Тут можно посмотреть демо
Есть множество разнообразных методов — от использования подложек блоков фиксированных размеров и до создания уголков с помощью vml или svg. В этом топике я не буду рассматривать известные методы, так как информации по данному поводу предостаточно. Я попробовал создать yet another метод.
Сразу оговорюсь — мой метод не панацея, и ему свойственны несколько минусов, которые я опишу подробнее.
Я постараюсь быть кратким.
Теория
Допустим, нам надо создать блок со скругленными углами.
По моему (говорю «моему», так как еще не встречал данного метода — если-что — поправьте) методу нам понадобится 3 дива и 1 изображение, на котором и будут наши уголки.
Для примера нарисуем простенькую картинку:
и назовем ее corners.png
На ней мы имеем 4 уголка, засунутых в 1 спрайт.
В данном случае я взял ширину картинки равную 16 пикселям — в обычном случае равных 1em.
Эту величину надо запомнить — так как это будет ширина одного «кванта», и все другие размеры будут кратны ему или уменьшены в парное колличество раз — 0.5, 0.25, 0.125…
Теперь представим, что у нас есть блок фиксированого размера — например 20em на 3em.
Если мы поставим ему стиль
background:url(corners.png) repeat;
то в итоге получим такой результат:
Следующим шагом будет добавление контейнера внутрь данного. Показываю, пока-что, схематически:
Как мы видим, ширина данного контейнера равна 100% от родительского — по горизонтали и 100%−1квант — по вертикали — чтобы нормально перекрыть фон родительского контейнера.
По такому-же методу создаем еще один контейнер в том, что мы только-что создали:
Как мы видим высота такого блока равна 100%+1квант от родительского и ширина 100%−1квант
Вот и весь метод.
Реализация
Сама разметка в данном случае выглядит так, как и говорилось — не больше и не меньше 3-х дивов
<div class="panel">
<div class="h">
<div class="v">Hello world, i'm a beautifull man that likes apples and plums</div>
</div>
</div>
Css файл тоже не особо сложный. Стоит только учесть, что css в данном случае — для динамической высоты контента (высота кратная кванту), хотя можно сделать и с фиксированной высотой
.panel{
position:relative;
float:left;
width:19em !important;
width:20em; /* для ИА 6 */
background:url(corners.png) repeat;
padding:0.5em 1em 0.5em 0 !important;
padding:0.5em 0; /* для ИА 6 */
}
.v{
background:#0f0;
position:relative;
float:left;
font:1em/1em Arial, Helvetica, sans-serif normal;
margin:-0.5em 0;
padding:0.5em 0;
width:100%;
}
.h{
background:#00f;
position:relative;
float:left;
width:100%;
padding:0 0.5em 0 0.5em;
}
Я думаю — тут все просто и дополнительных объяснений не надо.
В итоге мы видим, что прекрасный сервис browsershots.org говорит нам, что мы добились одинакового результата во всех браузерах, который выглядит так:
Минусы
К минусам такого метода можно отнести:
- Метод нельзя использовать при плавающей ширине
- Пока-что не проработан вариант использрвания свойства border
- Надо изображение
- Иногда можно потеряться во внутренних и внешних отступах, что не упрощает верстки
- Метод не является панацеей, а всего-лишь пища для ума и будет компилироваться для каждого случая отдельно
Плюсы
- 3 div-a
- Минимум css
- Без javascript
Может показаться, что минусов больше чем плюсов, но решать вам. При использовании сеточных дизайнов данный метод (на мой взгляд) подойдет как нельзя лучше.
UPD: Тут можно посмотреть демо
