Ali @mintik
24 Haziran 2020 12:22

0

Cubic bezier

Linklerin sıralanışına bakıldığında sadece linkleri olan ve hiç bir özelliği bulunmayan bir örneğe benzetebilirsiniz ilk bakışta. Aslında menü örneği demeyede bin şahit lazım. Linklerin arkaplanında da zaten buton yok. Yinede görüntüsü gayet güzel görünüyor Css3 efektimizle birlikte.

Mouse ile linklerin üzerinde gezindiğinizde resimdede gördüğünüz mavi, gri ve beyaz renkten oluşan çember yavaşça büyüyüp netleşiyor. Mouseyi geri çektiğinizde ise küçülüp saydamlaşıp kayboluyor. Dilerseniz olduğu gibi menü olarak kullanın yada sayfadaki linklerinize efekt olarak kullanın. Yazı efekti olarakta güzel bir görüntü oluşturuyor.

Microsoft bilgisayarlarda belki görmüşsünüzdür denetim masasından mouse ayarlarında mousenin yerini tespit etmek için buna benzer bir uyarı ayarlayabiliyorsunuz. Mouseyi kıpırdattığınızda mousenin etrafında bunun gibi sarı bir çember belirip kayboluyor.

Download Css3 üst menü örneği

Demo Css3 üst menü örneği

Kullanım

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

Css :

.cerceve {
	margin: 100px auto;
	width:900px;
}

.cerceve a {
	position: relative;
	display: inline-block;
	margin: 15px 10px;
	outline: none;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.35em;
}

.cerceve a::after {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 2px solid rgba(0,0,0,0.1);
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 1s cubic-bezier(0.680, 0, 0.265, 1), opacity 1s;
	-moz-transition: -moz-transform 1s cubic-bezier(0.680, 0, 0.265, 1), opacity 1s;
	transition: transform 1s cubic-bezier(0.680, 0, 0.265, 1), opacity 1s;
	background: #d6d4d4; 
	border-radius: 50%;
	height: 14px;
	width: 14px;
	z-index: -2;
}

.cerceve a::after {
	border-width: 30px;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.1, 0.1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.1, 0.1);
	transform: translateX(-50%) translateY(-50%) scale(0.1, 0.1);
	height: 30px;
	width: 30px;
	position: absolute;
	margin: 0px 0 0 0px;
	opacity: 0;
	box-shadow: 0 0 1px 2px #00cae9;
}
.cerceve a:hover::after,
.cerceve a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1.2, 1.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1.2, 1.2);
	transform: translateX(-50%) translateY(-50%) scale(1.2, 1.2);
}

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

Html :

  <div class="cerceve">
	<a href="http://mintik.com/">Anasayfa</a>
	<a href="http://mintik.com/category/photoshop/">Photoshop</a>
	<a href="http://mintik.com/category/webmaster/">Webmaster</a>
	<a href="http://mintik.com/category/wordpress/">Wordpress</a>
	<a href="http://mintik.com/?p=13783">Tutorial</a>
  </div>