Tasarımın Adresi

CrystalX Teması

Şık ve estetik bir görünüme sahip tasarımdır.Kodların içeriği Türkçe'leştirilmiştir.Önizleme resmi kodlar ilk yazıldığında İngilizce olarak alınmıştır.Tasarım kodunun içinde "URL GİR" / "BAŞLIK GİR" gibi yaptığımız eklentilerle tasarımı sitenize uyarlamanız kolaylaştırılmıştır.Zaten biraz HTML bilenler hemen işi çözecektir.Herhangi bir bilgiye sahip olmayanların ise sitemizdeki "Tasarımı Siteme Nasıl Uygularım?" başlığını incelemelerini tavsiye ederiz.

Tasarım Kodları:

Tasarımın Üstündeki Metin:

<div id="main" class="box">           <div id="header">                   <h3 id="logo"><a href="./" _fcksavedurl="./" title="CrystalX [Go to homepage]">Crystal<strong>X</strong><span></span></a></h3>         <hr class="noscreen" />                             <div class="noscreen noprint">             <p><em>Quick links: <a href="#content" _fcksavedurl="#content">content</a>, <a href="#tabs" _fcksavedurl="#tabs">navigation</a>, <a href="#search" _fcksavedurl="#search">search</a>.</em></p>             <hr />         </div>                   <div id="search" class="noprint">             <form action="" method="get">                 <fieldset><legend>Search</legend>                     <label><span class="noscreen">Find:</span>                     <span id="search-input-out"><input type="text" name="" id="search-input" size="30" /></span></label>                     <input type="image" src="http://www.nuviotemplates.com/templates/crystalx-01/design/search_submit.gif" id="search-submit" value="OK" />                 </fieldset>             </form>         </div>       </div>              <div id="tabs" class="noprint">              <h5 class="noscreen">Navigation</h5>             <ul class="box">                 <li><a href="URL GİR" _fcksavedurl="URL GİR">Anasayfa<span class="tab-l"></span><span class="tab-r"></span></a></li>                 <li id="active"><a href="URL GİR" _fcksavedurl="URL GİR">İletişim<span class="tab-l"></span><span class="tab-r"></span></a></li>                  <li><a href="URL GİR" _fcksavedurl="URL GİR">Hakkımda<span class="tab-l"></span><span class="tab-r"></span></a></li>                 <li><a href="URL GİR" _fcksavedurl="URL GİR">Fotoğraflar<span class="tab-l"></span><span class="tab-r"></span></a></li>                 <li><a href="URL GİR" _fcksavedurl="URL GİR">Kategoriler<span class="tab-l"></span><span class="tab-r"></span></a></li>                 <li><a href="URL GİR" _fcksavedurl="URL GİR">Yazılarım<span class="tab-l"></span><span class="tab-r"></span></a></li>                 <li><a href="URL GİR" _fcksavedurl="URL GİR">Hizmetler<span class="tab-l"></span><span class="tab-r"></span></a></li>             </ul>          <hr class="noscreen" />      </div>            <div id="page" class="box">     <div id="page-in" class="box">          <div id="strip" class="box noprint">                           <p id="rss"><strong>RSS:</strong> <a href="URL GİR" _fcksavedurl="URL GİR">Yazılarım</a> / <a href="URL GİR" _fcksavedurl="URL GİR">Yorumlar</a></p>             <hr class="noscreen" />                           <p id="breadcrumbs">Menü: <a href="URL GİR" _fcksavedurl="URL GİR">Anasayfa</a> > <a href="URL GİR" _fcksavedurl="URL GİR">Kategoriler</a> >  <strong>Buradasınız...</strong></p>             <hr class="noscreen" />                      </div>                    <div id="conttent">       <div class="article">                 <h4>www.tr-gg-css-king.tr.gg</h4>                 <p class="</p><p>

Tasarımın Altndaki Yazı:

</p></div>              <hr class="noscreen" />                            </div>                    <div id="col" class="noprint">             <div id="col-in">                                   <h5><span><a href="URL GİR" _fcksavedurl="URL GİR">Hakkımda</a></span></h5>                  <div id="about-me">                     <p><img src="" _fcksavedurl="" id="HAKKINDA BİLGİ GİR" alt="!" />                     <strong></strong><br />                     HAKKINDA BİLGİ GİR<br />                     E-POSTA GİR<br />                     <a href="URL GİR" _fcksavedurl="URL GİR">Ben kimim?</a></p>                 </div>                   <hr class="noscreen" />                                   <h5 ><span>Kategoriler</span></h5>                  <ul id="category">                     <li id="category-active"><a href="URL GİR" _fcksavedurl="URL GİR">Kategoriler</a></li>                      <li><a href="URL GİR" _fcksavedurl="URL GİR">KATEGORİ GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">KATEGORİ GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">KATEGORİ GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">KATEGORİ GİR</a></li>                 </ul>                  <hr class="noscreen" />                                   <h5><span>Arşiv</span></h5>                  <ul id="archive">                    <li><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                     <li id="archive-active"><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                      <li><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">TARİH GİR</a></li>                 </ul>                  <hr class="noscreen" />                                   <h5><span>Links</span></h5>                  <ul id="Fotoğraflar">                     <li><a href="URL GİR" _fcksavedurl="URL GİR">Fotoğraf Gir</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">Fotoğraf Gir</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">Fotoğraf Gir</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">Fotoğraf Gir</a></li>                     <li><a href="URL GİR" _fcksavedurl="URL GİR">Fotoğraf Gir</a></li>                 </ul>                  <hr class="noscreen" />                          </div>          </div>       </div>      </div>            <div id="footer">         <div id="top" class="noprint"><p><span class="noscreen">Back on top</span> <a href="#header" _fcksavedurl="#header" title="Back on top ^">^<span></span></a></p></div>         <hr class="noscreen" /> http://www.tr-gg-css-king.tr.gg -->                 <p id="createdby"><a href="http://www.tr-gg-css-king.tr.gg" _fcksavedurl="http://www.tr-gg-css-king.tr.gg">Tasarımı Yapan</a></p>                           <p id="Coprigt By MHD © 2013 Her Hakkı Saklıdır...">© 2013 <a href="http://www.tr-gg-css-king.tr.gg" _fcksavedurl="http://www.tr-gg-css-king.tr.gg">Tasarm Yapılır</a></p>     </div>   </div>

CSS Kodu:

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;}  /* ----------------------------------------------------------------------------------------------------------      www.tr-gg-css-king.tr.gg / Daha çok tasarım için takipte kalın...      Structure:     display; position; float; z-index; overflow; width; height; margin; padding; border; background; align; font;  ---------------------------------------------------------------------------------------------------------- */   * {min-height:1px;} body {border:0; margin:0; padding:0; background:#F2F5FE url("http://www.nuviotemplates.com/templates/crystalx-01/design/bg.gif") 0 0 repeat-x; font:70%/160% "verdana",sans-serif; color:#192666; text-align:center;}  a {color:#192666;} a:hover {color:#4F6AD7;}  p {border:0; margin:15px 0; padding:0;}  div {display:block; border:0; margin:0; padding:0;}  h3, h4, h5, h4, h5 {border:0; margin:15px 0 10px 0; padding:0; font-weight:bold;} h3 {font-size:260%; line-height:100%; font-family:"georgia",serif; font-weight:normal;} h4 {font-size:180%; line-height:100%; font-family:"georgia",serif; font-weight:normal;} h5 {font-size:120%; line-height:100%; font-weight:bold;} h4 {font-size:120%;} h5 {font-size:100%;}  table {display:table; border-collapse:collapse; margin:15px 0; padding:0; border:1px solid #B7CAF6; font-size:100%;} tr {display:table-row;} th, td {display: table-cell; border:1px solid #B7CAF6; margin:0; padding:5px; vertical-align:top; text-align:left;} th {background:#E7ECFD; text-align:center; color:#192666; font-weight:bold;}  ul, ol {display:block; border:0; margin:15px 0 15px 40px; padding:0;} ol {list-style-type:decimal;} li {display:list-item; border:0; margin:0; padding:0;} ul ul, ul ol, ol ol, ol ul {margin: 0 0 0 20px;}  dl {border:0; margin:15px 0; padding:0;} dt {border:0; margin:0; padding:0; font-weight:bold;} dd {border:0; margin:0 0 0 30px; padding:0;}  form {border:0; margin:0; padding:0;} fieldset {border:1px solid #ccc; margin:15px 0; padding:10px;} legend {margin-left:10px; font-size:100%; font-weight:bold; color:#008;}  hr {display:block; height:1px; margin:10px 0; padding:0; background:#CCC; border:0 solid #CCC; color:#CCC;}  a, img, span {border:0; margin:0; padding:0;} abbr, acronym {border-bottom:1px dotted #CCC; cursor:help;}  del, .through {text-decoration:line-through;} strong, .strong {font-weight:bold;} cite, em, q, var {font-style:italic;} code, kbd, samp {font-family:monospace; font-size:110%;}  .f-left {float:left;} .f-right {float:right;}  .t-left {text-align:left;} .t-center {text-align:center;} .t-right {text-align:right;}  .va-middle {vertical-align:middle;}  .clear {clear:both;} .box {min-height:1px;} .box:after {content:"."; display:block; line-height:0px; font-size:0px; visibility:hidden; clear:both;}  .nom {margin:0;} .noscreen {display:none;}  /* -----------------...........--------------------------------------------------------------------------------------- */  #main {width:770px; margin:50px auto 0 auto; text-align:left;}  #header {position:relative; width:770px; height:100px; margin:0; padding:0; background:#233C9B url("http://www.nuviotemplates.com/templates/crystalx-01/design/header.jpg") 0 0 no-repeat; color:#FFF;}      #header #logo {position:absolute; top:35px; left:35px; margin:0;}     #header #logo a {color:#FFF;}     #header #logo a:hover {color:#B5C4E3; text-decoration:underline;}          #header #search {position:absolute; top:35px; right:20px;}     #header #search form {position:relative;}     #header #search #search-input-out {position:absolute; top:0; right:45px; width:155px; height:28px; margin:0; padding:0; border:0; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/search_input.gif") 0 0 no-repeat; font:bold 90%/100% "verdana",sans-serif; color:#192666;}     #header #search #search-input {width:140px; margin:5px 8px; padding:3px 0; border:0; background:#FFF; font:bold 100%/100% "verdana",sans-serif; color:#192666;}     #header #search #search-submit {position:absolute; top:0; right:0px;}     #header #search fieldset {margin:0; padding:0; border:0;}     #header #search fieldset {width:200px;}     #header #search legend {display:none;}  #tabs {background:#192666; margin:0 5px; padding:10px 0 0 0; _height:1px;}      #tabs ul {margin:0 10px; padding:0; list-style:none;}     #tabs ul li {margin:0 5px 0 0; padding:0; float:left;}     #tabs ul li a {display:block; position:relative; padding:7px 15px; border:0; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_link.gif") 0 0 repeat-x; color:#B5C4E3; font-weight:bold; text-decoration:none; cursor:pointer;}          #tabs ul li a span.tab-l, #tabs ul li a:hover span.tab-l {position:absolute; top:0; left:0; _left:-15px; width:8px; height:8px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_link_l.gif") 0 0 no-repeat;}     #tabs ul li a span.tab-r, #tabs ul li a:hover span.tab-r {position:absolute; top:0; right:0; _right:-1px; width:8px; height:8px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_link_r.gif") 100% 0 no-repeat;}          #tabs ul li a:hover {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_hover.gif") 0 0 repeat-x; color:#FFF;}     #tabs ul li a:hover span.tab-l {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_hover_l.gif") 0 0 no-repeat;}     #tabs ul li a:hover span.tab-r {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_hover_r.gif") 100% 0 no-repeat;}      #tabs ul li#active a {background:#FFF; color:#FF9000;}     #tabs ul li#active a span.tab-l {position:absolute; top:0; left:0; _left:-15px; width:8px; height:8px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_active_l.gif") 0 0 no-repeat;}     #tabs ul li#active a span.tab-r {position:absolute; top:0; right:0; width:8px; height:8px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/tab_active_r.gif") 100% 0 no-repeat;}  #page {width:770px; min-height:1px; background:#FFF url("http://www.nuviotemplates.com/templates/crystalx-01/design/bg_page.gif") 0 0 repeat-y; _height:1px;} #page-in {min-height:1px; padding:10px 0; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/bg_page_in.jpg") 0 0 no-repeat; _height:1px;}  #strip {position:relative; clear:both; padding:3px 20px 10px 20px; color:#6182D1;} #strip p {margin:0;} #strip a {color:#6182D1;} #strip a:hover {color:#192666;}      #strip #breadcrumbs {width:520px; margin:0; padding:0;}          #strip #rss {float:right; width:175px; _width:200px; margin:0; padding-left:25px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_rss.gif") 0 50% no-repeat}  #conttent {float:left; width:530px; _width:550px; margin:0; padding:0 0 0 20px;}      #conttent .article {clear:both; margin:0; padding:20px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/content_article_bg.jpg") 0 0 no-repeat;}     #conttent .article h4 {margin:0 -20px; padding:10px; background:#DEE5FD url("http://www.nuviotemplates.com/templates/crystalx-01/design/content_title_bg.gif") 0 0 repeat-y; color:#192666;}     #conttent .article h4 span {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_list.gif") 0 50% no-repeat; padding-left:25px;}          #conttent .article p {text-align:justify;}     #conttent .info {margin:10px 0; padding-bottom:8px; border-bottom:1px solid #DEE5FD; color:#6685CC;}     #conttent .info a {color:#6685CC;}     #conttent .info a:hover {color:#FF9000;}          #conttent .info span.date, #conttent .info span.cat, #conttent .info span.user, #conttent .info span.comments {padding-left:15px;}     #conttent .info span.date {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_date.gif") 0 50% no-repeat;}     #conttent .info span.cat {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_cat.gif") 0 50% no-repeat; margin-left:8px;}     #conttent .info span.user {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_user.gif") 0 50% no-repeat; margin-left:8px;}     #conttent .info span.comments {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_comments.gif") 0 50% no-repeat; margin-left:8px;}      #conttent .btn-more {margin:0 0 15px 0; padding:0; border:0; position:relative;}     #conttent .btn-more a {display:block; position:absolute; top:0; right:0; width:67px; _width:95px; height:21px; margin:0; padding:0 0 0 28px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/btn_more.gif") 0 0 no-repeat; color:#FFF; text-decoration:none;}     #conttent .btn-more a:hover {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/btn_more.gif") -95px 0 no-repeat;}  #col {float:left; width:200px; margin:0; padding:0; background:#CEDBF9 url("http://www.nuviotemplates.com/templates/crystalx-01/design/col_bg.gif") 0 0 repeat-y;} #col-in {padding:20px 10px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/col_top.gif") 0 0 no-repeat;} #col h5 {padding:13px 15px 14px 15px; margin:0 -10px 15px -10px; background:#A0B9F3 url("http://www.nuviotemplates.com/templates/crystalx-01/design/col_title_bg.gif") 0 0 repeat-y; color:#192666;}      #col #about-me {margin-bottom:15px; line-height:130%;}     #col #about-me p {margin:0;}     #col #about-me #me {float:left; width:54px; height:58px; margin-right:7px;}      #col ul#category {margin:15px 0; padding:0; list-style:none;}     #col ul#category li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}     #col ul#category li a {display:block; padding:3px 0 3px 22px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_archive.gif") 5px 6px no-repeat; text-decoration:none;}     #col ul#category li a:hover {background-color:#D3DFF8; color:#192666;}     #col ul#category li#category-active a {background:#E0E8FA url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_archive2.gif") 5px 50% no-repeat; font-weight:bold;}          #col ul#archive {margin:15px 0; padding:0; list-style:none;}     #col ul#archive li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}     #col ul#archive li a {display:block; padding:3px 0 3px 22px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_archive.gif") 5px 50% no-repeat; text-decoration:none;}     #col ul#archive li a:hover {background-color:#D3DFF8; color:#192666;}     #col ul#archive li#archive-active a {background:#E0E8FA url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_archive2.gif") 5px 6px no-repeat; font-weight:bold;}          #col ul#links {margin:15px 0; padding:0; list-style:none;}     #col ul#links li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}     #col ul#links li a {display:block; padding:3px 0 3px 22px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_links.gif") 5px 6px no-repeat; text-decoration:none;}     #col ul#links li a:hover {background-color:#D3DFF8; color:#192666;}  #footer {position:obvious; clear:both; width:770px; height:60px; margin-bottom:50px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/footer.jpg") 0 0 no-repeat; color:#6685CC;} #footer a {color:#6685CC;} #footer a:hover {color:#192666;}      #top {position:absolute; top:55px; left:550px;}     #top p {position:relative; width:30px; height:25px; margin:0; overflow:hidden;}     #top p span {display:block; position:absolute; left:0; top:0; z-index:1; width:30px; height:25px; background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_top.gif") 0 0 no-repeat; cursor:pointer;}     #top a:hover span {background:url("http://www.nuviotemplates.com/templates/crystalx-01/design/ico_top.gif") -30px 0 no-repeat;}      #footer p#copyright {position:absolute; top:10px; left:40px; margin:0;}      #createdby {position:absolute; top:10px; left:562px; margin:0; color:#8CA3D8;}     #createdby a {color:#8CA3D8;}

CSS Tasarımın Adresi / www.tr-gg-css-king.tr.gg

CrystalX Teması

Tasarımlar

Diğer Başlıklar