CSS закругленные углы на сайте

Закругленные углыЗакругленные углы на сайте - эта тема часто встречается на просторах Рунета. Вебмастера решают ее по разному. Один из возможных способов ее решения - это CSS. С помощью CSS вполне можно сформировать бордюрчики которые будут сдвинуты по горизонтали и вертикали на один пиксель. Правильно их расположив и задав нужные цвета можно сделать например симпатичную панель с закругленными углами для меню сайта.

В данной статье представлен один из возможных вариантов обрамления меню, которое будет находиться на панели с закругленными углами. Для этого нам понадобятся по крайней мере два контейнера DIV вложенных один в другой и несколько тегов B. Как выглядит сама такая .html страница и ее код показано ниже.

Меню с закругленными углами

<DIV class="outside">
<DIV class="inside">  
<B class="a"></B>  
<B class="b"></B>  
<B class="c"></B>  
<B class="d"></B>  
<UL class="nav">  
<LI class="nolink">
<U>Menu round</U>
</LI>   
<LI><a href="http://acvarif.net.ru/lrub3part2/lrub3part2page1.html"> Link 1</a></LI>
<LI><a href="http://acvarif.net.ru">Link 2</a></LI>   
<LI><a href="http://acvarif.net.ru">Link 3</a></LI>   
</UL>  
<B class="e"></B>  
<B class="f"></B>  
<B class="i"></B>  
<B class="j"></B>  
</DIV>  
</DIV>  

А ее CSS код еще ниже


/* Стиль для внешнего контейнера div */
.outside {
	position:relative;
	margin: 20px 0 0 20px;
	width:200px;
}
/* Стили для внутреннего контейнера div */
.inside {
	background:transporent;
	margin:10px 8px 10px 9px;
	padding:0;
}
.inside .a,.inside .j {
	background:#000;
	margin:0 5px;
}
.inside .a,.inside .b,.inside .c,.inside .d,.inside .e,
.inside .f,.inside .i,.inside .j {
	display:block;
	overflow:hidden;
	height:1px;
	font-size:1px;
}
.inside .b,.inside .i {
	border-width:0 2px;
	margin:0 3px;
}
.inside .c,.inside .f {margin:0 2px;}
.inside .e,.inside .d {margin:0 1px;height:2px;}
.inside .b,.inside .c,.inside .d,.inside .e,.inside .f,.inside .i,
.inside .nav,.inside .nav .nolink {
	border-left:#000 1px solid;
	border-right:#000 1px solid;
}
.inside .nav {
	text-align:left;
	font:bold 12px arial;
	margin:0;
	padding:0;
}
.inside .nav li {
	list-style-type:none;
	margin:0;
	padding:2px 0 0 11px;
}

.inside .nav a {
	color:#777;
	font:bold 11px verdana;
	text-decoration:none;
}
.inside .nav a:hover {
	color:blue;
	text-decoration:underline;
}
.inside .nav .nolink {
	border:0;
	border-bottom:#000 1px solid;
	padding:0 0 3px 5px;
	text-decoration:none;
}

Для большей наглядности можно скачать панель меню с закругленными углами в виде тестовой страницы и просмотреть ее в любом браузере.

Добавить комментарий:

Перейти и растаять в своей любимой социалке