MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
KadirKC avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

Sadece CSS ile Kodlanmış Manşet


Sponsor Reklam

Çevrimdışı KadirKC
 Tarih: 17-04-2015, Saat:16:53
(Son Düzenleme: 18-04-2015, Saat:16:34, Düzenleyen: KadirKC.)
#1
resim

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.html


Canlı Demo :

Kod:
http://jsfiddle.net/KadirKC/s8cz4m2c/
Cevapla
Bunu Beğenenler: SefaKaya , usameavci , eatik , EmreKRMN , Red0x , MelihAtasever
Sponsor Reklam
Sponsor Reklam

Çevrimdışı MelihAtasever
 Tarih: 18-04-2015, Saat:12:34
#2
Böylede çok güzel ancak otomatik son konuları çekecek şekilde ayarlansa fena olmaz.  Melek - Masum

Elinize sağlık  Melek - Masum

Dileyenlere http://jsfiddle.net/cgrclk/y3aPC/1/
Cevapla
Bunu Beğenenler:

Çevrimdışı KadirKC
 Tarih: 18-04-2015, Saat:13:03
#3
(18-04-2015, Saat:12:34)KaptaN_38 Adlı Kullanıcıdan Alıntı: Böylede çok güzel ancak otomatik son konuları çekecek şekilde ayarlansa fena olmaz.  Melek - Masum

Elinize sağlık  Melek - Masum

Dileyenlere http://jsfiddle.net/cgrclk/y3aPC/1/

tabikide ayarlayabilirim ayarlayıp konuya ekliyorum.
Cevapla
Bunu Beğenenler:

 




Konuyu Okuyanlar: 2 Ziyaretçi