Slide de postagens recentes - código CSS

Views:
/* Slide de postagens recentes */
#featuredpost {
margin:0 auto;
}
#slides *{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#slides ul,#slides li{
padding:0;
margin:0;
list-style:none;
border:5px solid #000000; /*--COR, TIPO E ESPESSURA DA BORDA DO SLIDE--*/
position:relative;
}
#slides ul{
height:320px;
}
#slides li{
width:50%;
height:100%;
position:absolute;
display:none;
}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:50%;height:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:50%}
#slides li:nth-child(4){display:none;}
#slides li:nth-child(1) h4 {
visibility:visible;opacity:1;
overflow:hidden;
font-size:16px; /*--TAMANHO DA FONTE DO SLIDE MAIOR--*/
bottom:0;
left:0;
color:#000000; /*--COR DA FONTE DO TEXTO DO SLIDE ATIVO--*/
width:100%;
padding:10px 10px 10px 90px;
text-align:left;
text-transform:uppercase;  /*--COLOCA O TEXTO EM CAPSLOCK--*/
background:#f0f0f0; /*--COR DE FUNDO DO TEXTO DO SLIDE ATIVO--*/
height:90px;
font-family:'Arial';  /*--DEFINE A FONTE--*/
line-height:26px;
z-index:3;
}
#slides li:nth-child(1) .label_text {
color:#fff;/*--COR DA FONTE DA DATA SLIDE ATIVO--*/
font-size:30px; /*--TAMANHO DA FONTE DA DATA SLIDE ATIVO--*/
display:block;
bottom:10px;
left:10px;
top:initial;
right:initial;
padding:0;
font-family:'Arial';
}
#slides li:nth-child(1) span.dd {
display:block;
font-size:30px; /*--TAMANHO DA FONTE DA DATA SLIDE ATIVO--*/
padding:12px 20px;
background:#F5547C; /*--COR DE FUNDO DA DATA SLIDE ATIVO--*/
margin:0;
}
#slides li:nth-child(1) span.dm {
display:block;
font-size:14px;
background:#000; /*--COR DE FUNDO DO MÊS SLIDE ATIVO--*/
color:#fff; /*--TAMANHO DA FONTE DO MÊS SLIDE ATIVO--*/
padding:5px 21px;
text-transform:uppercase;/*--TEXTO EM CAPSLOCK--*/
margin:0;
}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{
display:block;
width:100%;
height:auto;
border:0;
padding:0;
background-color:#F5547C; /*--COR DE FUNDO DO MÊS SLIDE ATIVO--*/
-moz-transform:scale(1.0) rotate(0);
-webkit-transform:scale(1.0) rotate(0);
-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;
}
#slides li a:hover img {
-moz-transform:scale(1.1) rotate(1deg);
-webkit-transform:scale(1.1) rotate(1deg);
-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;
}
#slides .overlayx{
width:100%;
height:100%;
position:absolute;
z-index:2;
background:#000;  /*--COR DE FUNDO DO MÊS SLIDES MENORES--*/
opacity:0.2;
}
#slides li:nth-child(2) .overlayx{
background:#F5547C;  /*--COR DE FUNDO HOVER DOS SLIDES MENORES--*/
opacity:0;}
#slides li:nth-child(3) .overlayx{
background:#F5547C;  /*--COR DE FUNDO DO MÊS SLIDE ATIVO--*/
opacity:0;
}
#slides li:hover .overlayx,#slides li:hover:nth-child(2) .overlayx,#slides li:hover:nth-child(3) .overlayx{opacity:0;}
#slides h4,#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{
z-index:3;
opacity:0.9;
position:absolute;
bottom:0;
right:0;
left:0;
margin:0;
font-size:14px; /*--TAMANHO DA FONTE DOS TÍTULOS--*/
font-family:'Arial'; /*--TIPO DE FONTE--*/
padding:10px 15px;
color:#fff; /*--COR DE FONTE--*/
line-height:20px;
font-weight:normal;
background:#000000; /*--COR DE FUNDO DOS TÍTULOS SLIDES MENORES--*/
text-align:left;
transition:all .4s ease-in-out;
}
#slides .label_text{
opacity:0.9;
font-size:12px;
color:#fff;
top:5px;
right:0;
z-index:3;
position:absolute;
background:transparent;
padding:5px 10px;
font-family:'Arial';
text-transform:uppercase; /*--COLOCA O TEXTO EM CAPSLOCK--*/
transition:all 0.3s ease-in-out;
}
#slides li:hover:nth-child(2) .label_text,#slides li:hover:nth-child(3) .label_text{
background:#fff; /*--COR DE FUNDO DATA SLIDE MENOR HOVER--*/
color:#000; /*--COR DE TEXTO DA DATA--*/
right:5px;
opacity:1;
}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover:nth-child(2) h4,#slides li:hover:nth-child(3) h4{
background:#F5547C;  /*--COR DE FUNDO HOVER DO SLIDE MENOR--*/
opacity:1;
z-index:4;
}
#featuredpost #buttons {
text-align:right;  /*--ALINHAMENTO DAS SETAS--*/
background:transparent;
margin:0 10px;
}
#featuredpost #buttons a {
font-size:20px;  /*--TAMANHO DAS SETAS--*/
padding:0 5px;
color:#fff; /*--COR DAS SETAS--*/
background:#000000; /*--COR DE FUNDO DAS SETAS--*/
}



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage