Kendiminde bir zamanlar aradığım sonrada css nth-child ile kodladığım bir manşet kodunu sizlerle paylaşmak istedim.
HTML KODLARI :
CSS KODLARI :
/* SLİDER KODLARI */
#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: 536px;
height: 317px;
overflow:hidden;
float:left;
background:#019CF1;
}
#slider div:nth-child(1) img{
width: 536px;
height: 317px;
}
#slider div:nth-child(1) .baslik{
width: 100%;
margin-top: -49px;
padding: 13px;
height: 18px;
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. SLİDER */
#slider div:nth-child(2){
width: 235px;
height: 154px;
margin-left: 8px;
overflow:hidden;
float:left;
background:#019CF1;
}
#slider div:nth-child(2) img{
width: 236px;
height: 154px;
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. SLİDER */
#slider div:nth-child(3){
width: 236px;
height: 154px;
margin-left: 9px;
overflow:hidden;
float:left;
background:#019CF1;
}
#slider div:nth-child(3) img{
width: 236px;
height: 154px;
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. SLİDER */
#slider div:nth-child(4){
width: 236px;
height: 154px;
margin-top: 8px;
margin-left: 8px;
overflow:hidden;
float:left;
background:#019CF1;
}
#slider div:nth-child(4) img{
width: 236px;
height: 154px;
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. SLİDER */
#slider div:nth-child(5){
width: 236px;
height: 154px;
margin-top: 8px;
margin-left: 8px;
overflow:hidden;
float:left;
background:#019CF1;
}
#slider div:nth-child(5) img{
width: 236px;
height: 154px;
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;
}
/* SLİDER KODLARI BİTİŞ */
