Hazır Css Tasarımlar 2012-2013-2014 Sizlerle!

Süper bir tasarım

Denendi ve kullanışlı ufak oynamalarla çok eğlenceli bir tasarım yapabilirsiniz.

Tasarımı Ctrl+A olarak tüm kodları alabilirsin.

Önizleme:

Tasarım Üstü:

<center><div id="tstam"><div id="tasarimsepetihead"></div>  <div id="tasarimsepetihead2">  <a href="/" _fcksavedurl="/" class="tsmenu1">Ana Sayfa</a> <a href="http://tasarimsepeti.blogspot.com" _fcksavedurl="http://tasarimsepeti.blogspot.com" class="tsmenu1">Menü 2</a> <a href="http://tasarimsepeti.blogspot.com" _fcksavedurl="http://tasarimsepeti.blogspot.com" class="tsmenu1">Menü 3</a> <a href="http://tasarimsepeti.blogspot.com" _fcksavedurl="http://tasarimsepeti.blogspot.com" class="tsmenu1">Menü 3</a><a href="http://tasarimsepeti.blogspot.com" _fcksavedurl="http://tasarimsepeti.blogspot.com" class="tsmenu1">Menü 4</a>  <a class="tsmenu2">Duyuru: Yeni tasarımımız sonunda sizlerle!</a>    </div> <div id="tasarimsepetisol"> <a class="tsepetilili">Hakkımızda</a> <a class="menuitemt1"><img src="http://3.bp.blogspot.com/-3F6gUmeKsQ0/T-i6ZxXKUSI/AAAAAAAALhg/YDmWb7xF5Mg/s70/tasar%25C4%25B1m+sepeti.png" _fcksavedurl="http://3.bp.blogspot.com/-3F6gUmeKsQ0/T-i6ZxXKUSI/AAAAAAAALhg/YDmWb7xF5Mg/s70/tasar%25C4%25B1m+sepeti.png" style="border:none;float:left;"/>Biz çok şöyleyiz biz böyleyiz. Sitemiz şu amaçla şu tarihte kurulmuştur, falan filan. Bu gibi şeyleri buraya yazabilirsin.<br/><br/>  Unutma, sitene henüz yeni gelmiş pek çok kişi bu kısmı okuyacak!</a>    <a class="tsepetilili">Popüler Konular</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">En popüler yayın</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">2. popüler yayın</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">3. popüler yayın</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">4. popüler yayın</a>  <a class="tsepetilili">Tüm Sayfalar</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Sayfa Adı</a>     </div> <div id="tasarimsepetiorta" style="text-align:left;"> <a class="tsepetilili" style="width:563px;position:absolute;top:-9px;left:-3px;"></a>

Tasarım Altı:

</div> <div id="tasarimsepetisag">  <a class="tsepetilili">Arama</a> <div class="menuitemt1"> <input id="aramaformu" type="text" style="width:105px;"/><button onclick_fckprotectedatt="%20onclick%3D%22aramacibigi()%3B%22" style="background:#4c4c4c;border:1px solid #888;width:45px;height:22px;margin-left:4px;color:#f1f1f1;font-weight:bold;font-family:Calibri, sans-serif;font-size:15px;-webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">Ara</button>  <script>
function aramacibigi(){
var siteadresim = document.domain;
var terim = document.getElementById('aramaformu').value;
window.open('http://www.google.com.tr/#hl=tr&output=search&q=site:' + siteadresim + '+' + terim);
}
</script> </div>  <a class="tsepetilili">Dost Siteler</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Dost 1</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Dost 2</a>  <a class="tsepetilili">Ekstra İçerik</a> <div class="menuitemt1"> Buraya sonradan istediğin HTML kodu ekleyebilirsin. </div>   <a class="tsepetilili">Yayınlar</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a> <a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a><a class="menuitemts" href="http://www.koddostu.com" _fcksavedurl="http://www.koddostu.com">Link Adı</a>   </div> <div id="tasarimsepetifoot">  <p style="position:absolute;bottom:4px;left:12px;text-decoration:none;color:#666;">© Copyright 2012 Tüm Hakları Saklıdır.  |  <a style="text-decoration:none;color:#666;" href="http://tasarimsepeti.blogspot.com" _fcksavedurl="http://tasarimsepeti.blogspot.com"> Tasarım</a></p> <p style="position:absolute;bottom:4px;right:12px;text-decoration:none;color:#666;"><a style="text-decoration:none;color:#666;" href="#top" _fcksavedurl="#top"> Yukarı Çık</a></p> </div>   </div> </center>

Css Kodu:

#header_container{display:none;} #nav_container{display:none;} #title{position:absolute;top:-22px;left:-2px;font-size:17px;font-family:Calibri, sans-serif;color:#222;line-height:30px;font-weight:bold;text-align:left;text-indent:10px; text-shadow: 0px 0px 0.2em #888;} .menuitemt1{display:block;width:174px;background:#f1f1f1;-webkit-border-bottom-right-radius: 8px;-webkit-border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;margin-bottom:8px;padding:4px 8px 12px 8px;border:1px solid #888;border-top:none;font-size:12px;font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;text-shadow: 0px 0px 0.1em #888;color:#444;text-align:justify;text-indent:5px;} .tsmenu1{float:left;display:block;width:125px;height:30px;border:1px solid #ccc;background:#ebebeb url(http://destekforum.org/images/unova/thead.png) repeat-x top left;-webkit-border-radius: 4px;border-radius: 4px;font-family:Calibri, sans serif;font-size:16px;font-weight:bold;color:#333;line-height:28px;margin-left:4px;margin-top:4px;text-decoration:none;} .tsmenu1:hover{border:1px solid #aaa;background-image:none;background-color:#ddd;-webkit-border-radius: 4px;border-radius: 4px;font-family:Calibri, sans serif;font-size:16px;font-weight:bold;color:#333;line-height:28px;margin-left:4px;margin-top:4px;text-decoration:none;} .tsmenu2{float:left;display:block;width:300px;height:30px;border:1px solid #ddd;background:#aaa;-webkit-border-radius: 4px;border-radius: 4px;font-family:Calibri, sans serif;font-size:14px;font-weight:normal;color:#f1f1f1;line-height:28px;margin-left:4px;margin-top:4px;text-decoration:none;text-shadow: 0px 0px 0.3em #444;}   .menuitemts{display:block;width:180px;padding-top:9px;padding-bottom:9px;border-top:1px solid #888;background:#1c1c1c url(http://3.bp.blogspot.com/-G5PJABsTGGQ/UGGECT0E7_I/AAAAAAAAODI/3Vli_3D67Tc/s36/Besiktas+JK.png) no-repeat top left;line-height:18px;font-size:12px;font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;text-shadow: 0px 0px 0.3em #fff;color:#fff;margin-top:4px;margin-bottom:4px;-webkit-border-radius: 3px;border-radius: 3px;text-decoration:none;}  .menuitemts:hover{background:#3c3c3c url(http://3.bp.blogspot.com/-G5PJABsTGGQ/UGGECT0E7_I/AAAAAAAAODI/3Vli_3D67Tc/s36/Besiktas+JK.png) no-repeat top left;}    .tsepetilili{display:block;width:196px;margin-left:0px;height:30px;background:transparent url(http://newwpthemes.com/themedemo/wp-content/themes/Hostia/images/widgettitle-bg.png) repeat-x;border:1px solid #aaa;font-size:17px;font-family:Calibri, sans-serif;color:#222;line-height:30px;font-weight:bold;text-align:left;text-indent:10px; text-shadow: 0px 0px 0.2em #888;-webkit-border-radius: 4px; border-radius: 4px;} #tstam{width:980px;position:relative;} #tasarimsepetihead{width:978px;height:120px;background:transparent url(http://2.bp.blogspot.com/-O5U_cL26t3s/UGF37LnfAwI/AAAAAAAAOCw/6GvyqWs6TtM/s1600/black-heauder.png);border:1px solid #ccc;-webkit-border-top-left-radius: 14px;-webkit-border-top-right-radius: 14px;border-top-left-radius: 14px;border-top-right-radius: 14px;border-bottom:none;} #tasarimsepetihead2{width:978px;height:42px;background:#e3e3e3;border:1px solid #ccc;margin-bottom:8px;} #tasarimsepetisol{vertical-align:top;display:inline-block;width:200px;padding-bottom:40px;margin-right:0px;} #tasarimsepetiorta{display:inline-block;background:#f1f1f1;border:1px solid #e3e3e3;width:539px;padding-bottom:40px;padding-top:40px;vertical-align:top;margin-top:8px;position:relative;padding-left:10px;padding-right:10px;-webkit-border-bottom-right-radius: 12px;-webkit-border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;border-bottom-left-radius: 12px;min-height:400px;} #tasarimsepetisag{vertical-align:top;display:inline-block;width:200px;padding-bottom:40px;} #tasarimsepetifoot{width:976px;height:60px;background:#333;margin-top:20px;margin-left:0px;border:2px solid #0c0c0c;} body{background:url(http://2.bp.blogspot.com/-6s4lW4cT1Vg/UGFtC3Ge19I/AAAAAAAAOCY/MdfaOUgzrgU/s1600/thumb_big_wide_8a5b699856dc70b48c71ac16d07a82be+-+Kopya.jpg)}

Bu tasarımı beğendiyseniz yorum bırakın +5 yorumda yeni bir tasarım daha sizlerle