Horizontal reflectionMenu

Horizontal 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="http://mintik.com">Home</a>
	<a href="http://mintik.com/category/photoshop/">Photoshop</a>
	<a href="http://mintik.com/category/program/">Software</a>
	<a href="http://mintik.com/category/wordpress/">Wordpress</a>
	<a href="http://mintik.com/category/jquery/">jQuery</a>
	<a href="http://mintik.com/category/css/">Css3</a>
	<a href="http://mintik.com/category/webmaster/">Html5</a>
	<a href="http://mintik.com/?p=13641">Tutorial</a>
</div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-06-13 tarihinde yayınlandı,Toplam 2401 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...