Меню с круглыми элементами на CSS

CSS можно использовать для создания круглых элементов интерфейса. Нужно установить для свойства CSS3 border-radius очень большое значение. Тогда при отрисовке рамки в четырех углах участки объединятся в одну непрерывную круглую границу. Данный трюк можно использовать для создания меню с круглыми элементами:

Круглое меню

Реальная демонстрация

 

 

 

 

Свойство border-radius должно иметь очень большое значение, как минимум 50% ширины и высоты элемента:

width:100px;
height:100px;
border-radius: 400px; /*большое значение для создания круглой границы элемента*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;

Данная техника работает во всех браузерах, поддерживающих свойство CSS3 border-radius (IE9+, FF3+, Safari, Chrome и Opera 9+).

HTML

<div class="circlemenu">
	<ul>
		<li><a href="http://ruseller.com" target="_blank"><span>Главная</span></a></li>
		<li><a href="http://ruseller.com" target="_blank"><span>DHTML</span></a></li>
		<li><a href="http://ruseller.com" target="_blank"><span>CSS</span></a></li>
		<li><a href="http://ruseller.com" target="_blank"><span>Форум</span></a></li>
		<li><a href="http://ruseller.com" target="_blank"><span>JavaScript</span></a></li>
	</ul>
</div>

CSS

.circlemenu{
	width: 100%;
	overflow:hidden;
}

.circlemenu ul{
	margin: 0;
	margin-left:50px; /*Отступ меню от левой границы*/
	padding: 0;
	font: bold 14px Verdana;
	list-style-type: none;
	text-align: center; /* Выравнивание меню */
}

.circlemenu li{
	display: inline;
	margin: 0;
}

.circlemenu li a{
	display:block;
	float:left;
	text-align:center;
	text-decoration: none;
	color: white;
	background:#b72d23;
	margin: 0;
	margin-right:5px; /*Поле справа для каждой ссылки */
	width:100px;
	height:100px;
	border-radius: 400px; /*Большое значение для создания кругллой рамки элемента*/
	-moz-border-radius: 400px;
	-webkit-border-radius: 400px;
}

.circlemenu a span{
	position:relative;
	top:40%;
}

.circlemenu li a:visited{
	color: white;
}

.circlemenu a:hover{
	background: #a71b15;
}
Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Полезное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 30 Августа 2011 17:17
    Leonheart
    Ух-ты, идея суперская! _СПАСИБО!_
  • 30 Августа 2011 22:40
    atnartur
    CSS3 делает многое!
  • 1 Сентября 2011 11:28
    Mobilcnt
    Поправьте заголовок, пожалуйста. "элемтами"
^ Наверх ^