yansıma
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>

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla