Css ile Yuvarlak Köşeli Menü

 bcakir
 13 Aralık 2011
 Css

Merhaba arkadaşlar bu yazımda yuvarlak köşeli menünün nasıl yapılacağını anlatacağım. Bu menüyü yaparken herhangi bir resim falan kullanmayacağız. Ayrıca, bütün tarayıcılarda da aynı şekilde görünen yuvarlak köşelere sahip olacağız. Tarayıcılar arasında farklılıklar olduğu için bütün tarayıcıların anlayacağı css kodlarını ayrı ayrı yazacağız. Siz isterseniz bu uygulamanın kodlarında küçük değişiklikler yaparak, yuvarlak arkaplanlar ya da yuvarlak kutular da kolayca elde edebilirsiniz. Uygulamamızın içeriğini anlattığıma göre artık geliştirme işlemine başlayabiliriz.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-9" />
<title>Yavarlak Köşeli Menü</title>
<style>
ul {list-style: none}
li {float: left;
	width: 70px;
	padding: 7px;
	text-align: center}
a {text-decoration: none}
.secili{-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		background:#17adc3;
		-webkit-box-shadow: #b3b3b3 2px 2px 2px;
		-moz-box-shadow: #b3b3b3 2px 2px 2px;
		box-shadow: #b3b3b3 2px 2px 2px}
</style>
</head>
<body>
<ul>
    <li><a href="#">Ana Sayfa</a></li>
    <li class="secili"><a href="#">Hakkımda</a></li>
    <li><a href="#">İletişim</a></li>
    <li><a href="#">Facebook</a></li>
</ul>
</body>
</html>

Uygulamamızı yukarıda geliştirdik. Yuvarlak köşelere ilave olarak gölgelendirme (shadow) de ekledim. Siz bu menünün renklerini değiştirebilir, yuvarlaklığıyla oynayabilir, geliştirebilir ya da yuvarlak köşe olayını istediğiniz farklı amaçlar için kullanabilirsiniz. Uygulamamızın kullanım alanları hakkında bilgileri de vererek, bir yazımızın daha sonuna gelmiş olduk. Yararlı olması dileğiyle.

 1.422 Okunma

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Css
Kapat