Веб-мастеру. Закруглённые углы рамок

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

Закруглённые углы рамок являются в современное время модной тенденцией в сайтостроительстве. Согласитесь, что страница с закруглёнными углами выглядит, как бы, теплее и уютнее, действуют успокаивающе на психику. Существует несколько способов закругления углов. Я привожу наиболее простой, только с помощью CSS. Пример использования этого способа можно увидеть на страницах сайта, на котором Вы сейчас находитесь. Сам скрипт выглядит следующим одразом:
<style type="text/css">
* {margin:0;padding:0;}
body {font:12px/1.18 verdana,arial;text-align:center;}
h3 {font:bold italic 12px/2 arial,helvetica,sans-serif;padding:2px 0;}
.r1,.r2,.r3,.r4 {display:block;overflow:hidden;height:1px;}
.r1 {margin:0 1px;}
.r2 {margin:0 2px;}
.r3 {margin:0 3px;}
.r4 {margin:0 5px;}
.radius_a,.radius_b,.radius_c {background:#fff;margin:10px auto;width:170px;}
.radius_a .txt,.radius_a b {background:url(http://Ваш сайт/Ваш фон.jpg) repeat-y #eee;}
.radius_b .txt,.radius_b b {background:url(http://Ваш сайт/Ваш фон.jpg) repeat-y #eee;}
.radius_c span b,.radius_c h3 {background:url(http://Ваш сайт/Ваш фон.jpg) repeat-y #eee;}
.radius_c .txt,.radius_c b {background:url(http://Ваш сайт/Ваш фон.jpg) repeat-y #eee;}
.radius_d span b,.radius_d h3 {background:url(http://Ваш сайт/Ваш фон.jpg) repeat-y #eee;}
.radius_d .txt,.radius_d b {background:url(http://Ваш сайт/Ваш фон.jpg) repeat-y #eee;}
.txt {padding:3px 10px;text-align:left;}
</style>

Вариант 1
<body>
<div class="radius_c">
<span>
<b class=r4></b><b class=r3></b><b class=r2></b><b class=r1></b><b class=r1></b>
</span>
<font color="#000000"><h3>Первая</h3></font>
<div class="txt">

Ваш текст или что нибудь ешё.

</div>
<b class=r1></b><b class=r1></b><b class=r2></b><b class=r3></b><b class=r4></b>
</div></div></body>

Вариант 2
<body>
<div class="radius_а">
<span>
<b class=r4></b><b class=r3></b><b class=r2></b><b class=r1></b><b class=r1></b>
</span>
<font color="#000000"><h3>Закруглённые углы рамок</h3></font>
<div class="txt">

И ещё ещё ещё ещё ещё чего-нибудь.

</div>
<b class=r1></b><b class=r1></b><b class=r2></b><b class=r3></b><b class=r4></b>
</div></body>

Где ширину рамки Вы задаёте в этой строке:
.radius_a,.radius_b,.radius_c {background:#fff;margin:10px auto;width:170px;}
Высота рамки определяется сама, в зависимости от объёма в ней информации.
Цветовой фон рамки выбираете сами и его адрес вставляете в скрипт на место выделенное красным шрифтом. Стоит отметить, что ширина картинки фона должна соответствовать ширине рамки, а высота должна приблизительно соответствовать высоте рамки, иначе фон будет отображаться не корректно. Принеобходимости высота картинки фона карректируется.
Ну вот и всё, удачи Вам.
По материалам сайта,http://trifler.ru/blog/post_1186080378.html

Меню

Отдохни на нашем сайте

Странички на заметку

Анекдот в студию!!!

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

Сайт своими руками

Веб-мастеру

Поиск

Странички истории