Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

HenRyqUéè

avatar
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:

[Você precisa estar registrado e conectado para ver esta imagem.]

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;
    }
Valide e Salve!

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;
    }
Valide e Salve!

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 [Você precisa estar registrado e conectado para ver este link.].
CRÉDITOS: SPD
__________________________________________________________________________________________________________

>>>>>©RMBR & DEXTER<<<<<

http://rmbr.forumeiros.com/

Arikarindokuta

avatar
Iniciante
não funcionou no meu



[Você precisa estar registrado e conectado para ver esta imagem.]

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum