1 [TUTORIAL CSS] Spoiler elegante personalizado. 30/09/12, 05:04 pm
HenRyqUéè
Administrador
Avaliador
Helper
>>[TUTORIAL CSS] Spoiler elegante personalizado<<
Olá pessoal, nesta aula estarei disponibilizando um código css que deixa o spoiler bem elegante, é claro q se você não gostar deste estilo, você poderá personalizar do seu gosto, e se quiser pode pedir ajuda aqui (mas crie um tópico de ajuda!).
>>Prévia:
- Clique aqui para abrir:
CSS PUNBB/PHPBB3:
Aceda em: Painel de Controle>>Visualização>>Imagens e Cores>>Cores>>Folha de Estilo CSS
- Clique aqui para abrir:
- Código:
.codebox.spoiler {
padding: 0px;
border-radius: 0px 50px 0px 50px;
background: url('http://cdn2.iconfinder.com/data/icons/scrap/Folder%20Closed%20Silver.png') no-repeat 8px #F8EF86;
background-size: 31px;
box-shadow: 0px 0px 10px #ABB300;
border: 2px solid #B4B402;
}
.codebox.spoiler:hover {
background: url('http://cdn2.iconfinder.com/data/icons/scrap/Folder%20Closed%20Silver.png') no-repeat 8px #F8EF86;
box-shadow: 0px 0px 20px #C1D108;
-moz-transition: all .1s linear;
-o-transition: all .1s linear;
-webkit-transition: all .1s linear;
background-size: 41px;
}
.codebox.spoiler dd {
border-radius: 20px;
margin: 1.5em;
padding: 0.5em;
margin-left: 45px;
border: 3px dotted #B6B600;
background-color: rgba(252, 255, 228, 0.84);
}
.codebox.spoiler dt {
border: none;
font-weight: bold;
font-family: Arial;
font-size: 13px;
padding-left: 11px;
padding-top: 7px;
color: rgb(170, 170, 2);
text-shadow: 1px 1px 3px rgb(255, 255, 150);
}
.codebox dt:before {
content: "Você está Visualizando um ";
}
.spoiler_content.hidden {
display: none;
}
.spoiler:hover .spoiler_content {
display:block;
}
PHPBB2:
- Clique aqui para abrir:
- Código:
.spoiler_content {
border: 3px dotted #B6B600;
background-color: rgba(252, 255, 228, 0.84);
}
.spoiler_closed {
border: 3px dotted #B6B600;
background-color: rgba(252, 255, 228, 0.84);
padding:10px;
margin-left:40px;
}
.spoiler {
background: url('http://cdn2.iconfinder.com/data/icons/scrap/Folder%20Closed%20Silver.png') no-repeat 8px #F8EF86;
background-size: 31px;
box-shadow: 0px 0px 10px #ABB300;
border: 2px solid #B4B402;
}
.spoiler dd {
border: 3px dotted #B6B600;
background-color: rgba(252, 255, 228, 0.84);
}
.spoiler dt {
color: rgb(170, 170, 2);
text-shadow: 1px 1px 3px rgb(255, 255, 150);
}
.spoiler_content.hidden {
display: none;
}
.spoiler:hover .spoiler_closed {
border-bottom :none !important ;
padding:0px;
}
.spoiler:hover .spoiler_content {
display:block;
margin-top:-19px;
color:black;
padding:10px;
margin-left:40px;
}
Beleza galera tai o code, lembrando que se você quiser editar e não souber, por favor nao pessa ajuda aqui no topico do tutorial, pessa [Tens de ter uma conta e sessão iniciada para poderes visualizar este link].
CRÉDITOS: SPD
__________________________________________________________________________________________________________
>>>>>©RMBR & DEXTER<<<<<