Horizontal reflectionMenu

Saf Css3  kullanılarak hazırlanmış olan bir  üst menü örneği. Menü örneğinde bulunan butonların alt kısmı sanki  arkaplana  biraz  uzakmış gibi  bir görüntüye  sahip ve bu görüntünün dahada gerçekçi olabilesi için her butonun altında  gölge bulunuyor. Butonlara tıkladığınızda  alt kısım üst kısmın olduğu seviyeye  gelerek  arkaplana daha yakın bir  seviyeye geliyor ve o sırada butonun altında bulunan gölgede kayboluyor.  Bu üst menü örneği bu özellikleri sayesinde çok gerçekçi bir görüntüye sahip. Zarifliğiyle  sitenize çok güzel bir  görüntü kazandıracak.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	background: linear-gradient(to top, #ddd, #eee);
	height: 100%;	
} 

.container {
	width: 984px;
	max-height: 40px;
	background: #bbb;
	box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 2px white;
	position: relative;
	z-index: 1;
	padding: 7px;
	margin: 100px auto;
	border-radius: 5px;
}

.container:before, 
.container:after { 
	content: ''; 
	display: table; 
} 

.container:after { 
	clear: both; 
}

a {
	float: left;
	position: relative;
	margin-right: 7px;
	text-decoration: none;

	height: 26px;
	width: 115px;

	color: #232323;
	font: 11px/26px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
	text-shadow: 1px 1px 1px white;
}

a:before { 
	pointer-events: none; /* Yo */
	content: '';
	position: absolute;
	z-index: -1;
	height: 200%;
	width: 100%;
	border-radius: 3px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));

	transition: all 0.2s ease;
	left: 0;
	top: 0;
}

a:after {
	z-index: -1;
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	background-color: #fafafa;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
	border-radius: 3px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), inset 0px 2px 2px white;
	left: 0;
	right: 0;
	transition: all 0.2s ease;
}

a:nth-child(8) {margin: 0}

a:hover::before {height: 220%;}
a:hover::after {background-color: #fff;}
a:active::before {height: 150%;}
a:active::after {
	background-color: #eee;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0px 1px 1px white;
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="container">
	<a href="https://www.mintik.com">Home</a>
	<a href="https://www.mintik.com/category/photoshop/">Photoshop</a>
	<a href="https://www.mintik.com/category/program/">Software</a>
	<a href="https://www.mintik.com/category/wordpress/">Wordpress</a>
	<a href="https://www.mintik.com/category/jquery/">jQuery</a>
	<a href="https://www.mintik.com/category/css/">Css3</a>
	<a href="https://www.mintik.com/category/webmaster/">Html5</a>
	<a href="https://www.mintik.com/?p=13641">Tutorial</a>
</div>