728x90 AdSpace

  • Latest News

    2/28/2013

    HTML5 / CSS3 Website Yapımı? #2 Üst Header ve Menü

    HTML5 ve CSS3 kodlarını kullanarak websitemize devam ediyoruz. Sıra üst bölümün kodlanmasında. Burada da yeni html tagları ve css özelliklerini kullanacağız.. Şimdi öncelikle bu bölgenin kodlanması eski html kodları ile şöyle olabilirdi:


    <div id="ust">
      <a href="#" id="logo"><h1>Firefox</h1></a>
     
     <div id="ustmenu">
      <ul>
       <li><a href="#">MASAÜSTÜ</a></li>
       <li><a href="#">MOBİL</a></li>
       <li><a href="#">EKLENTİLER</a></li>
       <li><a href="#">DESTEK</a></li> 
       <li><a href="#">HAKKIMIZDA</a></li> 
      </ul>
     </div>
    </div>

    Şimdi html5 ile belirli alanlara gelen özel isimler var. Üst başlık alanını için header. makale alanları  için article, alt alan için footer, menü ve listeler için nav vb…

    HTML5 ile aynı kodlar şu hale geliyor...

     <header id="ust">
      <a href="#" id="logo"><h1>Firefox</h1></a>
     
        <nav id="ustmenu">
       <ul>
        <li><a href="#">MASA�ST�</a></li>
        <li><a href="#">MOBÄ°L</a></li>
        <li><a href="#">EKLENTÄ°LER</a></li>
        <li><a href="#">DESTEK</a></li> 
        <li><a href="#">HAKKIMIZDA</a></li> 
       </ul>
        </nav>
     </header>
    

    html dosyamız bu kadar:
    şimdi bize gerekli dosyalar:
    css dosyamıza geçiyoruz:
    genel bir tanımla sıfırlama yapıyoruz ve üst tarafta gördüğünüz resmi yerleştirelim:

    * {margin:0;padding:0;}
    body{
    background:url(../bgpromo-fxandroid.jpg) no-repeat right 0;
    }
    

    #ust{height:150px;}
    #logo{
    float:left;
    width:340px;
    height:181px;
    background:url(../resim/logo.png) no-repeat;
    opacity: .50;
    -moz-transition:opacity .3s ease-in-out;
    text-indent:-999px;
    }
    
    #logo:hover{
    opacity:1;
    -moz-transition:opacity .3s ease-in-out;
    }
    

    kalın alanlara dikkat edin, opacity ile firefox logomuzun saydamlık değerini düşürdük,  fare üzerine geldiğinde(hover özelliği) opacity 1 diyerek saydamlığı sıfırladık bu etkiyi yavaş bir şekilde gerçekleştirmek için ise transition özelliğini kullandık.

    bkz.(CSS3 Transitions Özelliği için hazırladığım videoya bakın: http://vimeo.com/38809772)
    şimdi menü kısmına geldik: burada farklı bir css kodu: box-shadow yer alıyor. bu alanımız etrafında belirli etkiye sahip gölgeler oluşturmak için: konu hakkında daha önce yazdığımız text-shadow a benzer: letter-spacing harfler arasındaki mesafeyi ayarlar. border-radius: oval kenarlar oluşturmak için:

    #ustmenu{
    clear:both;
    width:100%;
    height:28px;
    background-color:#f2f2f2;
    padding-top:15px;
    font:bold 13px Arial, Verdana,sans-serif;
    letter-spacing:1px;
    box-shadow:0px 1px  2px #ccc;}
    
    #ustmenu ul li{
    display:inline;
    padding-left:30px;}
    
    #ustmenu li a{
    padding:5px 15px;
    color:#64645d;
    text-decoration:none;
    text-shadow:1px 1px  1px #fff;
    border-radius:5px;transition: all 0.2s ease 0s; }
    
    #ustmenu li a:hover{
    color:#dc692e;
    background-color:#FFF;
    transition: all 0.3s ease 0s; }

    Bir şey anlamadım kaynak dosyaları istiyorum diyenler buradan download edebilir.
    • Blogger Yorumları
    • Facebook Yorumları

    0 yorum:

    Yorum Gönder

    Item Reviewed: HTML5 / CSS3 Website Yapımı? #2 Üst Header ve Menü Rating: 5 Reviewed By: Mehmet Ali
    Scroll to Top