web-touristЗаоблени ъгли за вашият сайт
Автор: maxvolum
Понеже виждам че много хора искат заоблени ъгли в сайтовете си и постоянно гледам заглавия от типа: „Заоблени ъгли с CSS“. Реших да направя урок който позволява да имате заоблени ъгли в сайта ви.
Изгледа е гарантиран през повечето версии на браузърите: Internet Explorer, Mozilla Firefox, Opera и др.
Това както знаете е CSS:
.rtop, .rbottom{display: block; background: #fff;}
.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4
{ display: block;
height: 1px;
overflow: hidden;
background: #ccc;
}
.r1{margin: 0 5px;}
.r2{margin: 0 3px;}
.r3{margin: 0 2px;}
.rtop .r4, .rbottom .r4
{ margin: 0 1px;
height: 2px;
}
.xx{
background: #ccc
}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}Разбира се той е като пример. Трябва да го преработите за желания изглед.
Ако има някои по-начинаещи ето и примерен код за страницата:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
<head>
<title>Заоблени ъгли във вашият сайт</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style>
.rtop, .rbottom{display: block; background: #fff;}
.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4
{ display: block;
height: 1px;
overflow: hidden;
background: #ccc;
}
.r1{margin: 0 5px;}
.r2{margin: 0 3px;}
.r3{margin: 0 2px;}
.rtop .r4, .rbottom .r4
{ margin: 0 1px;
height: 2px;
}
.xx{
background: #ccc
}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}
</style>
</head>
<body>
<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
<div class="xx"><p>Текст...</p></div>
<div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</body>
</html>
