• 22-03-2013, 18:50:54
    #1
    Sizler için internetten bulduğum ve beğendiğim bir psd dosyasını CSS’e dökerek paylaşıyorum. İnternette ararken bulduğum 3D psd arama formunu çok beğendim arkadaşlar ve bende OGZHN.COM için bayadır yazı yazmadığım için bir paylaşım yapmak istedim. Bu arama formu öncelikle yabancı bir site tarafından psd olarak çizilmiştir adını tam olarak hatırlayamıyorum. Css dökümü tamamen ogzhn.com’a aittir. İçinde 3 renk olarak bulunmaktaydı. Bu birbirinden güzel resimlerden hiç biri arasında ayrım yapmadım ve hepsini döktüm. Neyse linki verelim.

    Demo link: http://www.ogzhn.com/demo/searchbar/
    İndirme linki : http://www.ogzhn.com/css-paylasim/cs...rmu-indir.html

    Yorumlarınızı beklemekteyim
  • 22-03-2013, 20:39:55
    #2
    Tasarım güzel ama CSS ve HTML başarısız. Aynı arama çubuğunun sayfada birden fazla yerde kullanılabileceğini de düşünerek, her element'e tek tek id vermek yerine class kullanmalısınız.
  • 23-03-2013, 20:41:05
    #3
    Hkan adlı üyeden alıntı: mesajı görüntüle
    Tasarım güzel ama CSS ve HTML başarısız. Aynı arama çubuğunun sayfada birden fazla yerde kullanılabileceğini de düşünerek, her element'e tek tek id vermek yerine class kullanmalısınız.
    Kardeş dosya gayet güzel şekilde çalışıyor hepsine aynı değerler vermememin sebebi margin-top vs değerler farklı yani anlayacağınız resimleri aynı boyutta kesmediğim için bu şekilde farklı atadım
  • 23-03-2013, 23:12:31
    #4
    Yine de id şart değil. #yesilara yerine .yesilara, #yesilaratext yerine .yesilara .text kullanılması gerekirdi. Buyrun uygulanmış hali:

            <!-- YEŞİL ARAMA FORM --->
    	<form action="ara.php" method="POST">
    		<div class="yesilara">
    			<input type="text" name="ara" class="text" value="Aramak için birşeyler yazın." />
    			<input type="submit" class="buton" />
    		</div>
    	</form>
    /* YEŞİL ARAMA FORMU CSS KODLARI*/
    .yesilara {
       width:588px;
       height:57px;
       background-image:url(../images/yesil.png);
    }
    
    .yesilara .buton {
       width:120px;
       float:right;
       height:43px;
       margin-right:10px;
       margin-top:3px;
       text-indent:-999px;
       background:none;
       border:none;
    }
    
    .yesilara .text {
       width:350px;
       margin-left:30px;
       height:25px;
       margin-top:8px;
       font:13px arial;
       color:#656c13;
       text-shadow:1px 0px #e4ec90;
       border:none;
       background:none;
    }
    Ekleme: Dosyanın çalışmadığını belirtmedim. Kodların yanlış yoldan yazıldığını söyledim.
  • 24-04-2013, 21:56:48
    #5
    Üyeliği durduruldu
    güzelmis sagol
  • 25-04-2013, 17:35:30
    #6
    Rica ederim