Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 D'Leandro™

avatar
Fundador

Escolha o Título


PunBB PhpBB2 PhpBB3 Invision Blog Site

Olá, hoje venho trazer um código a voces, que eu ainda não sei que nome colocar!
Bem aguardo opiniões para decidir o nome deste tutorial.
--> Código CSS <--
Código:
/*Nome do código*/
.pss_main {
    height:700px;
    position:relative;
    width:100%;
}
.pss_main input {
    display:none;
}
.pss_contr {
    background:#E0371E url("http://i15.servimg.com/u/f15/17/71/75/73/seta_c10.png") no-repeat center center;
    cursor:pointer;
    display:none;
    height:70px;
    left:50%;
    opacity:0.3;
    position:absolute;
    top:5%;
    width:70px;
    z-index:2;
    -webkit-transition:opacity linear 0.3s;
    -moz-transition:opacity linear 0.3s;
    -o-transition:opacity linear 0.3s;
    -ms-transition:opacity linear 0.3s;
    transition:opacity linear 0.3s;
    border-radius:50% 50% 50% 50%;
    box-shadow:0 1px 2px #AF2C19 inset;
}
.pss_contr:hover {
    opacity:1;
}
.sel_page_1:checked ~ .pss_contr.c2, .sel_page_2:checked ~ .pss_contr.c3,
.sel_page_3:checked ~ .pss_contr.c4 {
    background-image:url("http://i15.servimg.com/u/f15/17/71/75/73/seta_c11.png");
    display:block;
    top:85%;
}
.sel_page_2:checked ~ .pss_contr.c1, .sel_page_3:checked ~ .pss_contr.c2,
.sel_page_4:checked ~ .pss_contr.c3  {
    background-image:url("http://i15.servimg.com/u/f15/17/71/75/73/seta_c10.png");
    display:block;
}
.pss_slides {
    height:100%;
    overflow:hidden;
    position:relative;
}
.pss_background {
    background:url(...) no-repeat scroll 0 0;
    height:100%;
    left:0;
    overflow:hidden;
    position:absolute;
    top:0;
    width:100%;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
    background-size:cover;
}
.pss_main input:checked ~ .pss_slides {
    -webkit-transition:all linear 1.0s;
    -moz-transition:all linear 1.0s;
    -o-transition:all linear 1.0s;
    -ms-transition:all linear 1.0s;
    transition:all linear 1.0s;
}
.sel_page_1:checked ~ .pss_slides {
    background-color:#CCCCCC;
}
.sel_page_2:checked ~ .pss_slides {
    background-color:#003366;
}
.sel_page_3:checked ~ .pss_slides {
    background-color:#FFFFFF;
}
.sel_page_4:checked ~ .pss_slides {
    background-color:#CCCC99;
}
.pss_main input:checked ~ .pss_slides .pss_background {
    -webkit-transition:all linear 1.5s;
    -moz-transition:all linear 1.5s;
    -o-transition:all linear 1.5s;
    -ms-transition:all linear 1.5s;
    transition:all linear 1.5s;
}
.sel_page_1:checked ~ .pss_slides .pss_background {
    background-position:0 0;
}
.sel_page_2:checked ~ .pss_slides .pss_background {
    background-position:0 -500px;
}
.sel_page_3:checked ~ .pss_slides .pss_background {
    background-position:0 -1000px;
}
.sel_page_4:checked ~ .pss_slides .pss_background {
    background-position:0 -1500px;
}
.pss_slides ul {
    height:100%;
    list-style:none;
    position:relative;
    top:0;
    -webkit-transition:top ease-in 1.0s;
    -moz-transition:top ease-in 1.0s;
    -o-transition:top ease-in 1.0s;
    -ms-transition:top ease-in 1.0s;
    transition:top ease-in 1.0s;
}
.pss_slides ul  li {
    height:100%;
    opacity:0.1;
    position:relative;
    text-align:center;
    -webkit-transition:opacity ease-in 1.0s;
    -moz-transition:opacity ease-in 1.0s;
    -o-transition:opacity ease-in 1.0s;
    -ms-transition:opacity ease-in 1.0s;
    transition:opacity ease-in 1.0s;
}
.sel_page_1:checked ~ .pss_slides ul li:first-child,
.sel_page_2:checked ~ .pss_slides ul li:nth-child(2),
.sel_page_3:checked ~ .pss_slides ul li:nth-child(3),
.sel_page_4:checked ~ .pss_slides ul li:nth-child(4) {
    opacity:1;
}
.pss_slides ul li img{
    display:block;
    margin:0 auto;
    padding:40px;
}
.pss_slides ul li div{
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:-20%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;
    -webkit-transition:left ease-in 1.0s;
    -moz-transition:left ease-in 1.0s;
    -o-transition:left ease-in 1.0s;
    -ms-transition:left ease-in 1.0s;
    transition:left ease-in 1.0s;
}
.sel_page_1:checked ~ .pss_slides ul {
    top:0;
}
.sel_page_2:checked ~ .pss_slides ul {
    top:-100%;
}
.sel_page_3:checked ~ .pss_slides ul {
    top:-200%;
}
.sel_page_4:checked ~ .pss_slides ul {
    top:-300%;
}
.sel_page_1:checked ~ .pss_slides ul li:first-child div,
.sel_page_2:checked ~ .pss_slides ul li:nth-child(2) div,
.sel_page_3:checked ~ .pss_slides ul li:nth-child(3) div,
.sel_page_4:checked ~ .pss_slides ul li:nth-child(4) div {
    left:10%;
}

--> Código HTML <--
Código:
<div class="pss_main"> <!-- main parallax scrolling slider object -->
    <input id="r_1" type="radio" name="p" class="sel_page_1" checked="checked" /> <!-- hidden radios -->
    <input id="r_2" type="radio" name="p" class="sel_page_2" />
    <input id="r_3" type="radio" name="p" class="sel_page_3" />
    <input id="r_4" type="radio" name="p" class="sel_page_4" />

    <label for="r_1" class="pss_contr c1"></label> <!-- controls -->
    <label for="r_2" class="pss_contr c2"></label>
    <label for="r_3" class="pss_contr c3"></label>
    <label for="r_4" class="pss_contr c4"></label>

    <div class="pss_slides">
        <div class="pss_background"></div>
        <ul> <!-- slides -->
            <li><img height="630" width="885" src="http://i15.servimg.com/u/f15/17/71/75/73/terror10.jpg"  alt="image01" />
                <div>Demonstração</div>
            </li>
            <li><img height="630" width="885" src="http://i15.servimg.com/u/f15/17/71/75/73/11379310.jpg"  alt="image01" />
                <div>Demonstração</div>
            </li>
            <li><img height="630" width="885" src="http://i15.servimg.com/u/f15/17/71/75/73/9702-h10.jpg"  alt="image01" />
                <div>Demonstração</div>
            </li>
            <li><img height="630" width="885" src="http://i15.servimg.com/u/f15/17/71/75/73/horror10.jpg"  alt="image01" />
                <div>Demonstração</div>
            </li>
        </ul>
    </div>
</div>

--> Resultado Final <--

Demonstração


Desenvolvido por D'Leandro™ | Script-Tutorials
Editado e Postado por 2012 © Staffer Group BR™
Ver perfil do usuário

#2
 Bookmarlucas654

avatar
Membro
Nomes acima de imagem? Ou botões acima de imagem...
Ver perfil do usuário

#3
 D'Leandro™

avatar
Fundador
O Senhor notou que clicando na seta, muda a imagem?
Ver perfil do usuário

#4
 Bookmarlucas654

avatar
Membro
ount, não vi a seta kk. Então, 'Slide show'.... simples, mas um slide show mais complexo =)

Ps.: Se tiver um efeito que ele realize isto sozinho, seria ainda melhor =)
Ver perfil do usuário

#5
 D'Leandro™

avatar
Fundador
Isso estragaria o propósito do código, sem contar que automático existem centenas pela internet...
Ver perfil do usuário

#6
 Bookmarlucas654

avatar
Membro
Hum, entendo, desculpa, foi só uma opinião :jornal:
Ver perfil do usuário

#7
 Vargas

avatar
Moderador
Vertical Slyde?

Assinatura:
Esse é o Meu, Esse é o Seu, Esse é o Nosso Brasil!
Ver perfil do usuário

#8
 D'Leandro™

avatar
Fundador
-------->Título Aceito; Vertical Slyde!
Seu tutorial foi aceito e movido para o local correspondente!
Ver perfil do usuário

#9
 'Fusion

avatar
Membro
Gostei ficou bem legal e bom pra tutoriais com imagens.

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#10
 Conteúdo patrocinado