Закруглённые уголки

Закруглённые уголки — наиболее часто встречающееся дизайнерское решение на сайтах.

Решение, предлагаемое данным фреймворком, довольно простое и гибкое.

К каждому элементу с классом corners следут добавить несколько html-тегов для уголков:

<em class="tl"></em><em class="tr"></em><em class="bl"></em><em class="br"></em>

Элементы позиционируются по углам контейнера, которому требуется скруглить углы.

Радиус уголков можно задавать через имя класса, допускаются значения от 2px до 10px.

Размер блока не ограничен.

Фоновое изображение, накладываемое на углы, сделано 1 картинкой по методу спрайтов. Картинка формата PNG-24, что позволяет задавать блоку любой фоновый цвет или изображение.

Пример HTML-кода для создания блока с закруглёнными уголками:

<div class="corners corners-10">
	Блок с закруглёнными уголками.
	<em class="tl"></em><em class="tr"></em><em class="bl"></em><em class="br"></em>
</div>

Класс corners-10 задаёт радиус закругления уголков 10px. Варианты значений corners-2, corners-3...corners-10.

Дополнительный пример использования. Создадим текстовый блок, с закруглёнными уголками радиусом 5px.

<div style="background: red;" class="corners corners-10">
	<div class="box content">
		<p>Система блоков с базовыми классами <code>class="layout-box lb-x"</code> позволяет создавать различные макеты страниц.</p>
	</div>
</div>

Дополнительную разметку можно добавлять динамически, пример на чистом JavaScript:

<script type="text/javascript">
function CornersInit() {
	var corners = getElementsByClass('corners');
	for (i = 0; i < corners.length; i++) {
		corners[i].innerHTML += '<em class="tl"></em><em class="tr"></em><em class="bl"></em><em class="br"></em>';
	}
}

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null ) node = document;
	if ( tag == null ) tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	for (i = 0, j = 0; i < elsLen; i++) {
		if (pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}
</script>

Вызываем функцию для динамического добавления уголков.

<script type="text/javascript">
	CornersInit();
</script>

Ссылки по теме: