CSS'de nth-child mantığını kullanarak yaptığım manşettir.
HTML Kodları :
Kod:
<div id="slider">
<div>
<a href="#">
<img src="http://i.hizliresim.com/4ZpqLq.jpg">
<div class="baslik">Sniper Ghost Warrior 2 inceleme #Bölüm 1<br>
</div>
</a>
</div>
<div>
<a href="#">
<img src="http://i.hizliresim.com/LYvgpV.jpg">
<div class="baslik">Call of Duty Ghosts inceleme #Bölüm 1<br>
</div>
</a>
</div>
<div>
<a href="#">
<img src="http://i.hizliresim.com/vQa85D.jpg">
<div class="baslik">Hitman Absolution inceleme #Bölüm 1<br>
</div>
</a>
</div>
<div>
<a href="#">
<img src="http://i.hizliresim.com/89621d.jpg">
<div class="baslik">Call of duty black ops inceleme #Bölüm<br>
</div>
</a>
</div>
<div>
<a href="#">
<img src="http://i.hizliresim.com/4Zpq10.jpg">
<div class="baslik">Battlefield 3 inceleme #Bölüm 1<br>
</div>
</a>
</div>
</div>Wordpress Kullananların Eklemesi Gereken Kod :
PHP Kod:
<div id="slider">
<?php query_posts('posts_per_page=5'); while(have_posts()) : the_post(); ?>
<div>
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} ?>
<div class="baslik"><?php the_title(); ?><br/></div>
</a>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
CSS Kodları :
Kod:
/* MANŞET KODLARI */
#slider{
margin-top: 49px;
}
#slider div a:hover{
opacity:0.6;
cursor:pointer;
transition: opacity .15s ease-in-out;
}
#slider div a{
transition: opacity .15s ease-in-out;
}
/* 1. SLİDER */
#slider div:nth-child(1){
width: 502px;
height: 317px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(1) img{
width: 100%;
height: 100%;
}
#slider div:nth-child(1) .baslik{
width: 100%;
margin-top: -50px;
padding: 13px;
height: 19px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 15px;
text-decoration: none;
border: medium none;
margin-left: 0px;
line-height: 21px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* 2. MANŞET */
#slider div:nth-child(2){
width: 235px;
height: 154px;
margin-left: 8px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(2) img{
width: 100%;
height: 100%;
overflow:hidden
}
#slider div:nth-child(2) .baslik{
width: 236px;
height: 18px;
margin-top: -49px;
padding: 13px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 12px;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* 3. MANŞET */
#slider div:nth-child(3){
width: 236px;
height: 154px;
margin-left: 9px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(3) img{
width: 100%;
height: 100%;
overflow:hidden
}
#slider div:nth-child(3) .baslik{
width: 236px;
height: 18px;
margin-top: -49px;
padding: 13px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 12px;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* 4. MANŞET */
#slider div:nth-child(4){
width: 236px;
height: 154px;
margin-top: 8px;
margin-left: 8px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(4) img{
width: 100%;
height: 100%;
overflow:hidden
}
#slider div:nth-child(4) .baslik{
width: 236px;
height: 18px;
margin-top: -49px;
padding: 13px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 12px;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* 5. MANŞET */
#slider div:nth-child(5){
width: 236px;
height: 154px;
margin-top: 8px;
margin-left: 8px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(5) img{
width: 100%;
height: 100%;
overflow:hidden
}
#slider div:nth-child(5) .baslik{
width: 235px;
height: 18px;
margin-top: -49px;
padding: 13px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 12px;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* MANŞET KODLARI BİTİŞ */Manşet'i indirmek isteyen alt taraftaki linkten indirebilir.
Slider Kodlarını İndir :
Kod:
http://s5.dosya.tc/server2/3touur/Sadece_CSS_ile_Kodlanmis_Manset.zip.htmlCanlı Demo :
Kod:
http://jsfiddle.net/KadirKC/s8cz4m2c/
