Pull to refresh

Скругленные углы в 3 div-a

Reading time 3 min
Views 4.3K
Есть много способов делать в верстке скругленные углы. И пока все браузеры поголовно не начнут поддерживать свойство border-radius, надо будет каждый раз думать о том, какой метод использовать в том или ином проекте.

Есть множество разнообразных методов — от использования подложек блоков фиксированных размеров и до создания уголков с помощью 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;

то в итоге получим такой результат:

Multicorners

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

Вставляем первый блок

Как мы видим, ширина данного контейнера равна 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: Тут можно посмотреть демо
Tags:
Hubs:
+58
Comments 109
Comments Comments 109

Articles