PORTFOLIO
RSS

Ben Tamer Yılmaz;

Türkiye'nin güneyinde, Antalya'da freelance çalışan bir tasarımcıyım. Bildiklerimi ve öğrendiklerimi paylaşmanın vakti gelmiştir diyerek bu blogu açtım. Umuyorum ki herkes için faydalı olacaktır. Hakkımda daha detaylı bilgi için buraya, irtibata geçmek içinse buraya tıklayın.

Sosyal Medya



Yazıları Takip Edin

E-Mail ile besle beni:

Son Bahsedilenler

  • tamer: Evet haklısın, ama belki "thumbnail" değerini önceden kullan...
  • tamer: Teklifiniz için teşekkürler, ancak şu dönemde yoğunluktan do...
  • sule akyuz: Hazır freelance calısmaktan acılmısken konu :) 10 sn lik kıs...
  • Oasis Club: Güzel paylaşım, teşekkürler......
  • vedat: s.a üstad çok güzel bi paylaşım olmş eline sağlık eğer müm...

Designicle: Tasarımcılar için..


Designicle.com | Tasarımcılar için ingilizce tasarım makaleleri ve ücretsiz kaynaklar sunan yeni tasarım blogu.. Devamı için tıklayın

Sponsor


Elektronik Müzik

 

  • Arkaplanı Transparan Menu Yapımı

    03 Ocak 2010tamercss-js-ajax , freesh , tasarim

    Blogumun üst kısmında (header) yer alan resim üzerine transparan menu yapımıyla ilgili bir çok soru alıyorum. Bunu yapmak aslında zor bir şey değil. Bu yazıdaki örnek anlatım işinize yarayacaktır.

    Yapılan örnek çalışmanın sonucu:

    Demo çalışmayı görmek için tıklayın

    Öncelikle çalışmada kullanılacak görselleri indirin: Arkaplan resimi ve transparan png menu arkaplanı. Bu çalışmada çerçeveli arkaplan resimi kullandım, dilerseniz siz kendi resminizi kullanabilirsiniz. Transparan menü arkaplanı içinde photoshopta hazırladığım png dosyasını kullanabilirsiniz. Ancak bu png dosyası IE6 tarafından desteklenmediği için unitpngfix adında ufak bir javascript kullanıyoruz. Çalışmanın tüm dosyalarını yazının sonunda topluca indirebilirsiniz.

    Çalışmanın html kodları:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Transparan Menu Yapımı - tameryilmaz.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stil.css" rel="stylesheet" type="text/css" media="screen" />
 
<!--[if lt IE 7]>
        		<script type="text/javascript" src="js/unitpngfix.js"></script>
	<![endif]-->
 
</head>
<body>
<div id="header">
	<ul>
		<li><a href="#" class="aktif">Ana Sayfa</a></li>
		<li><a href="#">Photoshop</a></li>
		<li><a href="#">Flash</a></li>
		<li><a href="#">Wordpress</a></li>
		<li><a href="#">Tasarım</a></li>
		<li>
			<span class="sosyal">
			<a href="#"><img src="facebook.png"/></a> 
			<a href="#"><img src="twitter.png"/></a> 
			<a href="#"><img src="rss.png"/></a>
			</span>
		</li>
	</ul>
</div>
<div style="margin:10px auto; width:900px; line-height:1; color:#333;">
Bu örnek çalışmanın orjinal yapımına dönmek için <a href="http://tameryilmaz.com/blog/arkaplani-transparan-menu-yapimi.html " style="text-decoration:underline;">tıklayın</a> - tameryilmaz.com
</div>
</body>
</html>

    Burada öncelikle head taglarının arasında, css stil dosyamızı ve png fix js dosyasına link verdik. Ardından arkaplan resminin yer alacağı header divinin içine transparan menüyü yerleştirdik.

    Çalışmanın CSS kodları:

    /*
CSS
*/
 
body{
margin:0;
padding:0;
font-family:Trebuchet MS, Arial;
font-size:12px;
color:#333;
background:#F8F3E0 url(bd-bg.jpg) repeat-x scroll 0 0;
}
 
img {border:0 none;}
 
#header{
background:url(header-bg.jpg) no-repeat scroll 0 0;
width:900px;
height:330px;
display:block;
margin:75px auto 0;
padding:12px 0 0;
}
 
#header ul{
background:url(transparan.png) repeat scroll 0 0;
list-style:none;
padding:10px 5px;
margin:0px 0 0 500px;
width:250px;
height:296px;
overflow:hidden;
}
#header ul li span.sosyal{
margin:22px auto 0;
width:90%;
display:block;
height:80px;
}
#header ul li span.sosyal a{
display:block;
float:left;
height:60px;
margin:2px;
overflow:hidden;
width:60px;
}
#header ul li a.aktif{
color:#ff0;
}
#header ul li a{
display:block;
background:url(transparan.png) repeat scroll 0 0;
width:90%;
color:#fff;
font-size:12px;
font-weight:bold;
text-decoration:none;
padding:5px;
margin:10px auto;
letter-spacing:1px;
}
#header ul li a:hover{
color:#ff0;
background:#362e1d;
}

    Bu kodlamada önemli olan header divinin özellikleri ve menü kodlaması. #header divinin yüksekliği ve genişliğini, yerleştireceğimiz resmin yüksekliği ve genişliğinde ayarlıyoruz. Menü için kullanacağımız transparan png dosyasını #header ul içinde örnekte gördüğünüz şekilde kodluyoruz. #header ul li kısmında yine aynı png dosyasını yerleştiriyoruz. Üst üste binen aynı transparan png dosyası, daha koyu bir transparanlık vereceğinden menü elemanları için ayırdedici bir görsellik yakalamış oluruz. Burası ufak ama önemli bir detay. Her menü elemanı için ayrı bir png dosyasına ihtiyaç duymuyoruz. Son olarak hover efekti içinde arkaplanda normal bir renk atayarak efekti tamamlıyoruz.

    Örnek çalışmanın dosyalarını buradan indirebilirsiniz.

    Çalışmayla ilgili görüş veya sorularınızı buradan iletirseniz sevinirim.

    Evet:
    • Facebook
    • Twitter
    • FriendFeed
    Siteyi Takip Edin:
    , , , , , , , , , , , , ,

2 Yorum “Arkaplanı Transparan Menu Yapımı”

  1. Mücahit 10 Ocak 2010 12:08

    eyvallah kardeş bununla ilgili okadar çözüm denedim hiçbiri istediğim şekilde deildi bu tam istediğim gibi. çok faydalı oldu :)

  2. tamer 10 Ocak 2010 12:19

    Sevindim. Bu örnekten yola çıkarak hazırladığın siteyi burada haber verirsen daha çok sevinirim :)

Görüşünüzü belirtin:

 
 
© 2009 | Bu site Tamer Yılmaz'ın tasarım blogudur. İçerikteki tüm materyalleri
kopyalamadan önce izin isterseniz, seve seve tüm kaynakları verebilirim.