Ninjaside

Кнопки в стиле GitHub.

Многим очень нравится дизайн гитхаба, один из элементов, на который стоит обратить внимание отдельно это – кнопки (сининькие такие). Такие динамические кнопки смотрятся очень круто и с легкостью впишутся в интерьер любого сайта. Вообщем ближе к делу: в основе github buttons лежат 3и технологии – CSS, HTML и jQuery. Архив с ксс стилями и js можно скачать CSS3 Buttons, посмотреть как это выглядит – github style кнопки.

Posted in Code, html & css, OpenSource | No Comments »

CSS: навигационное меню.

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

Неотъемлемая часть любого сайта – меню навигации. Сделать его логично с помощью таких тэгов как <ul> / <li>

Home
About
Contacts

получится примерно так :

• Home
• About
• Contacts

не очень похоже на меню, правда? И тут в дело вступает css :
убираем точки (на заморском это называется – bullets)

#nav-menu ul {
	list-style: none;
} 

• Home
• About
• Contacts

Уже лучше, теперь нужно расположить элементы списка в одну линию. Делается это следующим образом :

#nav-menu li {
	float: left;
	margin: 0 2px;
}

Результат :

• Home
• About
• Contacts

#nav-menu li a {
	background: url(background.gif) #fff bottom left repeat-x;
	height: 2em;
	line-height: 2em;
	float: left;
	width: 9em;
	display: block;
	border: 0.1em solid #dcdce9;
	color: #0d2474;
	text-decoration: none;
	text-align: center;
}

Так же не лишним будет задать ширину меню, чтобы избежать возможных наложений элементов дизайна.

#nav-menu {
	width:200px;
}

Всйо.

Posted in html & css | 4 Comments »