Вы здесь: Главная > CSS > Необычные вкладки: схожу с ума от CSS

Необычные вкладки: схожу с ума от CSS

Опубликовано автором Просмотры: 15

Необычные стильные вкладки на CSS.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Fancy tabs | HTML Dog</title>
	<style>
		*, #content :first-child, #content :last-child {
			margin: 0;
		}

		body {
			font: 300 15px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
			background: #333;
			margin: 20px;
		}

		h1 {
			margin-bottom: 20px;
			color: #fff;
			text-transform: uppercase;
			font-size: 55px;
			font-weight: 100;
			letter-spacing: 30px;
			text-shadow: 3px 3px 5px #000;
		}

		nav ul {
			list-style: none;
			padding: 0 0 0 10px;
			min-width: 460px;
		}

		nav li {
			float: left;
			position: relative;
			height: 30px;
			border-radius: 10px 30px 0 0;
			margin-left: -10px;
			text-shadow: 1px 1px 0 #bbb;
			box-shadow: 0px 0px 10px rgba(0,0,0,.5);
			transition: .2s;
		}

		nav a {
			display: block;
			position: relative;
			width: 90px;
			height: 20px;
			padding: 6px 10px 20px 0;
			border-radius: 10px 30px 0 0;
			background: #999;
			color: #444;
			text-align: center;
			text-decoration: none;
			transition: .2s;
		}

		nav li:hover {
			z-index: 1;
		}

		nav li:hover a {
			background: #ccc;
			color: #000;
		}

		#selected {
			z-index: 2;
		}

		#selected a {
			z-index: 3;
			background: #fff;
			color: #000;
			text-shadow: none;
			font-weight: 500;
		}

		#content {
			position: relative;
			z-index: 1;
			clear: both;
			min-width: 420px;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0px 0px 10px rgba(0,0,0,.5);
			background: #fff;
		}

		#content p {
			margin: 20px 0;
		}
	</style>
	<!--[if lt IE 9]><script src="/r10/html5shiv.js"></script><![endif]-->
</head>
<body>
	<header>
		<h1>CSS Tabs</h1>
		<nav>
			<ul>
				<li><a href="">This</a></li>
				<li id="selected"><a href="">That</a></li>
				<li><a href="">The other</a></li>
				<li><a href="">Banana</a></li>
				<li><a href="">Kumquat</a></li>
			</ul>
		</nav>
	</header>
	
	<section id="content">
		<p>"Tabbed navigation", using floated list items.</p>
		<p>Read the <a href="/techniques/tabs/">CSS Tabs</a> HTML Dog Techniques article for more information.</p>
	</section>
</body>
</html>

Страницы в тему:

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