siyah tasarim
tasarım üzerindeki yazı kodu
<div id="header">
<div id="logo">
<div class="logo"><span><a href="/" rel="start"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/dfhfgh.png" alt="" /></a></span></div>
<div class="search">
<form action="http://www.google.com/search" method="get">
<input type="text" value="" maxlength="230" size="20" name="q" /><input type="submit" value="ARA" /><input type="radio" checked="" value="css-tasarimdeneme.tr.gg" name="sitesearch" />
</form>
</div>
<div class="menu"><a href="#" rel="start" class="selected">Anasayfa</a> <a target="_blank" href="#">link</a> <a target="_blank" href="#">link</a> <a target="_blank" href="#">link</a></div>
</div>
<div class="center_content">
<div class="right_content">
<div class="title">Kategorilerim</div>
<strong>
<h2><strong><a href="#">link</a></strong></h2>
<h2><strong><a href="#">link</a></strong></h2>
<h2><strong><a href="#">link</a></strong></h2>
<h2><strong><a href="#">link</a></strong></h2>
<h2><strong><a href="#">link</a></strong></h2>
</strong></div>
<div class="left_content">
tasarım altındaki yazı kodu
</div>
</div>
<div class="clear"> </div>
<div class="footer">© 2013 <a href="#" title="acıklama" target="_blank">link</a> | <a href="#" title="acıklama" target="_blank">link</a></div>
</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;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin : 0;
padding : 0;
border : 0;
outline : 0;
font-size : 100%;
vertical-align : baseline;
background : transparent;
}
body {
line-height : 1;
}
ol, ul {
list-style : none;
}
blockquote, q {
quotes : none;
}
blockquote:before, blockquote:after, q:before, q:after {
content : '';
content : none;
}
:focus {
outline : 0;
}
ins {
text-decoration : none;
}
del {
text-decoration : line-through;
}
table {
border-collapse : collapse;
border-spacing : 0;
}
.clearfix:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}
.clearfix {
display : inline-block;
}
.clearfix {
display : block;
}
.none {
display : none;
}
body {
font-family : Tahoma, Geneva, sans-serif;
padding : 0;
font-size : 12px;
margin : 0 auto;
color : #FFF;
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/bg24.jpg) repeat #000;
}
.clear {
clear : both;
}
p {
padding : 10px 0 10px 0;
margin : 0;
text-align : left;
line-height : 20px;
}
a {
color : #FFF;
text-decoration : none;
}
a img {
border : none;
}
a:hover {
color : #CCC;
}
h1, h2, h3, h4 {
font-weight : normal;
padding : 0;
margin : 0;
}
h1 {
font-size : 24px;
width : 655px;
color : #FFF;
padding : 5px;
float : left;
}
h2 {
font-size : 12px;
color : #CCC;
padding : 0;
border-bottom : 2px dotted #373737;
width : 100%;
padding : 5px 0;
line-height : 18px;
}
h2 a {
color : #CCC;
}
h2 a:hover {
text-decoration : underline;
}
h3 {
font-size : 12px;
color : #CCC;
padding : 0;
border-bottom : 2px dotted #373737;
width : 100%;
padding : 5px 0;
line-height : 18px;
}
h3 a {
color : #CCC;
}
h3 a:hover {
text-decoration : underline;
}
h4 {
font-size : 22px;
color : #000;
padding : 20px 0 10px 0;
}
h5 {
color : #666;
font-size : 14px;
font-weight : normal;
padding : 0 0 0 0;
margin : 0 0 5px 0;
border-bottom : 1px dotted #999;
}
#main_container {
margin : 0 auto;
width : 100%;
padding : 0 0 40px 0;
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/headerbgg.jpg) repeat-x;
}
.center_content {
width : 960px;
height : auto;
margin : auto;
clear : both;
padding : 0;
}
#header {
width : 960px;
height : 110px;
margin : 0 auto;
}
.logo {
width : auto;
float : left;
padding : 40px 0 10px 0;
}
.logo span {
padding : 0;
margin : 0;
}
.logo span a {
float : left;
text-decoration : none;
font-size : 30px;
font-weight : normal;
padding : 0;
margin : 0;
color : #FFF;
outline : none;
text-align : center;
text-shadow : 0 1px 0 #000;
}
.menu {
float : right;
height : 35px;
font-size : 13px;
line-height : 30px;
margin-top : 40px;
}
.menu a {
text-align : center;
float : left;
width : 90px;
height : 30px;
margin-right : 5px;
color : #CCC;
text-shadow : 0 1px 0 #000;
border-radius : 8px;
background : #0F0F0F;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-right : 1px solid #373737;
border-bottom : 1px solid #373737;
text-transform : uppercase;
}
.menu a:hover, a.selected {
background : #5D2A23;
color : #FFF;
}
.search {
float : right;
width : 220px;
height : 30px;
margin-top : 40px;
color : #FFF;
text-shadow : 0 1px 0 #000;
border-radius : 8px;
background : #0F0F0F;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-right : 1px solid #373737;
border-bottom : 1px solid #373737;
}
input.search {
float : left;
border : none;
width : 164px;
height : 24px;
margin : 4px 0 0 0;
padding : 0 5px;
color : #fff;
}
input.submit-yorum {
float : right;
width : 60px;
height : 24px;
background : #0F0F0F;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-right : 1px solid #373737;
border-bottom : 1px solid #373737;
margin : 5px 0;
cursor : pointer;
color : #FFF;
}
textarea.yorum {
float : left;
width : 100%;
background : #0F0F0F;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-right : 1px solid #373737;
border-bottom : 1px solid #373737;
margin : 5px 0;
}
.fleft {
float : left;
}
.left_content {
border-top : 2px dotted #000;
position : relative;
float : left;
width : 660px;
padding : 5px;
margin : 20px 0 15px 0;
color : #FFF;
}
.left_content p {
margin : 0;
padding : 10px;
}
.left_content span a {
float : right;
font-style : italic;
color : #964033;
text-decoration : underline;
padding : 5px;
font-weight : bold;
}
.date {
position : absolute;
top : -2px;
right : 25px;
width : 59px;
height : 68px;
color : #FFF;
font-size : 24px;
background : url(https://img.webme.com/pic/c/css-tasarimdeneme/datebg.png) no-repeat;
text-align : center;
}
.date span {
font-size : 12px;
}
.content-photo {
clear : both;
width : 400px;
margin : 10px auto;
position : relative;
}
.content-photo img {
border : #0F0F0F solid 5px;
}
.photo {
background-position : 0 -32px;
}
.text {
background-position : -28px -32px;
}
.video {
background-position : 0 -56px;
}
.link {
background-position : -28px -56px;
}
.resource {
float : right;
width : 660px;
text-align : right;
color : #212121;
font-style : italic;
padding : 15px 15px 5px 0;
}
.resource span {
color : #9E9E9E;
}
.action-icons {
float : right;
width : 68px;
height : 28px;
margin : 0 5px;
padding : 0 5px;
border-radius : 5px;
background : #0F0F0F;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-right : 1px solid #373737;
border-bottom : 1px solid #373737;
color : #CCC;
line-height : 28px;
}
.like {
background-position : 0 -190px;
}
.like:hover {
background-position : -28px -190px;
}
.blogla {
background-position : 0 -210px;
}
.blogla:hover {
background-position : -28px -210px;
}
.view {
background-position : 0 -230px;
}
.view:hover {
background-position : -28px -230px;
}
.social-bar {
height : 38px;
width : 640px;
margin : 10px;
padding : 5px;
border-radius : 5px;
background : #0F0F0F;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-right : 1px solid #373737;
border-bottom : 1px solid #373737;
}
.social-link {
float : left;
margin : 7px;
}
.social-bar span a {
float : left;
width : 100%;
height : 24px;
}
.facebook-button {
width : 78px;
background-position : 0 -137px;
}
.facebook-button:hover {
width : 78px;
background-position : 0 -165px;
}
.blogla-button {
width : 68px;
background-position : 0 -84px;
}
.blogla-button:hover {
width : 68px;
background-position : 0 -110px;
}
.right_content {
position : relative;
float : right;
width : 250px;
padding : 5px;
margin : 20px 0 15px 0;
color : #FFF;
overflow : hidden;
}
.right_content span a {
float : right;
font-style : italic;
color : #964033;
text-shadow : 0 1px 0 #000;
text-decoration : underline;
padding : 10px;
}
.title {
padding : 5px 0;
background : #0F0F0F;
color : #FFF;
font-size : 15px;
font-style : italic;
font-weight : bold;
width : 100%;
margin-top : 10px;
text-align : center;
}
.title a {
color : #FFF;
}
.title a:hover {
color : #CCC;
}
.p10 {
padding : 10px 0;
}
.avatar {
width : 185px;
margin : 0 auto;
font-size : 11px;
font-style : italic;
color : #CCC;
text-shadow : 0 1px 0 #000;
text-align : center;
}
.avatar a img {
padding : 5px;
background : #0F0F0F;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-right : 1px solid #373737;
border-bottom : 1px solid #373737;
margin : 10px 4px;
}
.follow {
width : 149px;
height : 33px;
margin : 10px auto;
text-align : center;
font-size : 15px;
line-height : 32px;
background : #0F0F0F;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-right : 1px solid #373737;
border-bottom : 1px solid #373737;
}
.follow a {
float : left;
width : 149px;
height : 33px;
color : #FFF;
}
.follow a:hover {
color : #CCC;
}
.yorum {
width : 90%;
margin : 0 auto;
border-top : 2px solid #000;
padding : 10px 0;
}
.yorumlar {
float : left;
margin : 5px 0;
width : 100%;
background : #0F0F0F;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-right : 1px solid #373737;
border-bottom : 1px solid #373737;
}
.yorumlar a {
margin : 10px;
float : left;
}
.yorumlar p {
width : 85%;
float : right;
font-size : 11px;
}
.yorumlar span a {
float : right;
font-style : italic;
color : #CCC;
text-decoration : underline;
padding : 5px;
}
.pager {
width : 660px;
text-align : center;
}
.pager a {
padding : 5px;
border : #141414 solid 1px;
}
.pager a:hover, a.selected-pager {
background : #0F0F0F;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-right : 1px solid #373737;
border-bottom : 1px solid #373737;
color : #FFF;
}
.footer {
height : 40px;
margin : 0;
width : 100%;
border-top : 2px dotted #373737;
color : #CCC;
text-align : center;
line-height : 40px;
}
.footer a {
color : #CCC;
}
.footer a:hover {
color : #FFF;
}
.banner {
width : 728px;
height : 90px;
margin : 5px auto;
display : none;
}
.tagclouds {
float : left;
width : 96%;
text-align : center;
margin : 5px 0;
}
.tagclouds a {
line-height : 33px;
background : #0F0F0F;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-right : 1px solid #373737;
border-bottom : 1px solid #373737;
color : #FFF;
padding : 5px;
margin : 3px;
}
.tagclouds a:hover {
background : #000;
}
#logo a img:hover{
opacity: 0.80;
filter: alpha(opacity=80);
}
#logo a img, #logo a img:before, #logo a img:after{
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
blog kodu
<div class="left_content">
<div class="date">20 03 <span> 2013 </span></div>
<h1><a href="#">baslık</a></h1>
<div class="resource"> </div>
<div class="textcenter">
<div class="content-photo"><a href="#" title="acıkalama"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/resim1.jpg" alt="resim" width="296" height="400" /></a></div>
</div>
<p><span><a href="#" title="acıklama"><img src="https://img.webme.com/pic/c/css-tasarimdeneme/devami1.png" alt="Devamını Oku" /></a></span></p>
<div class="clear"> </div>
sayfalama kodu
<div class="pager"><a href="#">1</a> <a href="#">2</a> <a href="#">3</a></div>
Bugün 7 ziyaretçi (9 klik) kişi burdaydı!