Tutorial:Slider cute // Tipo 2 ♥

Hola de nuevo   les traigo un slider ,pero es igual a la otra solo que tiene un efecto diferente al pasar las imágenes  Les dejo la Vista Previa hagan clic en 1 2 3 4 y verán la diferencia con la otraEl procedimiento del tutorial es igual y casi el mismo codigo 




Como dije en la anterior entrada este slider es para ponerla en la cabecera 
Bueno para colocarlo
Para Plantilla Basica o Blogger: Ir a Diseño/Añadir gadget/HTMLJavacript y pegas el siguiente codigo
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo donde lo desees  (No lo he probado aun en una plantilla clasica pero creo que si debe funcionar n.n )
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )
<style>
.cr-container{
 width: 600px;/*Ancho del slider*/
height: 400px;/*Altura del slider*/
position: relative;
margin: 0 auto;
border: 20px solid #FAC7C7;/*Border del slider 20 Tamaño solid Tipo FAC7C7 Color*/
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
font-style: italic;
width: 150px;/*Ancho de  1 2 3 4*/
height: 30px; /*Altura de 1 2 3 4*/
cursor: pointer;
color: #fff;/*Color de letra de  1 2 3 4*/
line-height: 32px;
font-size: 24px;/*Tanaño de Letra de  1 2 3 4*/
float:left;
position: relative;
margin-top:350px;
z-index: 1000;
}
.cr-container label:before{
content:'';
 width: 34px;/*Ancho de los botones 1 2 3 4*/
height: 34px;/*Altura de los botones 1 2 3 4*/
background: #FAC7C7;/*Color de fondo de los botones 1 2 3 4*/
position: absolute;
left: 50%;
margin-left: -17px;
border-radius: 50%;/*Bordes redondeados*/ box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
z-index:-1;
}
.cr-container label:after{
width: 1px;
height: 400px;
content: '';
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
position: absolute;
bottom: -20px;
right: 0px;
}
.cr-container label.cr-label-img-4:after{
width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
 color: #68abc2;/*Color de letra 1 2 3 4 Hover*/
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
background: #A9E2C7;/*Color de fondo 1 2 3 4 Hover*/
}
.cr-container input{
display: none;
}
.cr-bgimg{
width: 600px;/*Ancho de Imagenes*/
height: 400px;/*Altura de Imagenes*/
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.cr-bgimg{
background-repeat: no-repeat;
background-position: 0 0;
}
.cr-bgimg div{
width: 150px;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
}
.cr-bgimg div span{
position: absolute;
width: 100%;
height: 100%;
top: 400px;
left: 0px;
z-index: 2;
text-indent: -9000px;
}
.cr-bgimg div:nth-child(even) span{
top: -400px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
background-image: url(URL DE LA PRIMERA IMAGEN);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
background-image: url(URL DE LA SEGUNDA IMAGEN);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
background-image: url(URL DE LA TERCERA IMAGEN);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
background-image: url(URL DE LA CUARTA IMAGEN);
}
.cr-bgimg div:nth-child(1) span{
background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
background-position: -450px 0px;
}
.cr-container input:checked ~ .cr-bgimg div span{
-webkit-animation: slideOutUp 0.6s ease-in-out;
-moz-animation: slideOutUp 0.6s ease-in-out;
-o-animation: slideOutUp 0.6s ease-in-out;
-ms-animation: slideOutUp 0.6s ease-in-out;
animation: slideOutUp 0.6s ease-in-out;
}
.cr-container input:checked ~ .cr-bgimg div:nth-child(even) span{
-webkit-animation: slideOutDown 0.6s ease-in-out;
-moz-animation: slideOutDown 0.6s ease-in-out;
-o-animation: slideOutDown 0.6s ease-in-out;
-ms-animation: slideOutDown 0.6s ease-in-out;
animation: slideOutDown 0.6s ease-in-out;
}
@-webkit-keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@-webkit-keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
@-moz-keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@-moz-keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
@-o-keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@-o-keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
@-ms-keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@-ms-keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
@keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4){
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
top: 0px;
z-index: 10;
}
.cr-titles h3{
color: #A9E2C7;/*Color de la letra del titulo*/
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.cr-titles h3 span{
z-index: 10000;
position: absolute;
width: 100%;
left: 0px;
text-align: center;
opacity: 0;
}
.cr-titles h3 span:nth-child(1){
top: 15%;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 70px;
letter-spacing: 7px;
-webkit-transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
-ms-transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(2){
top: 50%;
margin-top: 84px;
letter-spacing: 0px;
background: #FAC7C7;/*Fondo del subtitulo*/
font-size: 14px;
padding: 10px 0px;
font-style: italic;
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
-ms-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
opacity: 1;
top: 50%;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
opacity: 1;
}
@media screen and (max-width: 768px) {
.cr-container input{
display: inline;
width: 24%;
margin-top: 350px;
z-index: 1000;
position: relative;
}
.cr-container label{
display: none;
}
}
</style>
<div style="position: absolute; margin-top: -150px; right10px;">
<section class="cr-container">
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked="">
<label for="select-img-1" class="cr-label-img-1">1</label>
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2">
<label for="select-img-2" class="cr-label-img-2">2</label>
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3">
<label for="select-img-3" class="cr-label-img-3">3</label>
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4">
<label for="select-img-4" class="cr-label-img-4">4</label>
<div class="clr"></div> <div class="cr-bgimg">
<div>
<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>
<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>
<div class="cr-titles">
     <h3><span>TITULO 1</span><span>Subtitulo Contenido</span></h3>
     <h3><span>TITULO 2</span><span>Subtitulo Contenido</span></h3>
     <h3><span>TITULO 3</span><span>Subtitulo Contenido</span></h3>
     <h3><span>TITULO 4</span><span>Subtitulo Contenido</span></h3>
    </div>
   </section>
</div>
150:Si aumentas subira mas ariba el gadget y si disminuyes el numero bajara el gadget
10:Si aumentas se ira mas a la izquierda y si disminuyes se ira mas a la derecha 
right: Puedes cambiar por "  left   " que aora estara en el lado izquierdo y en ese caso el 10  sera lo contrario de lo que dije antes :3
codigo: tympanus

14 comentarios :

  1. oh que lindo gracias por compartir el codigo :)

    ResponderEliminar
  2. luna me gustaria que me respondieras, si, si es muy lindo lo que publicas pero te digo en casi todas las entradas que cambie el enlace de mi blog, & tambien si me pudieras seguir, por si acaso hay alguna novedad lemonadebunny.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola *o* , oh losiento por no pasarme >-< ya me paso *-*

      Eliminar
  3. ESTA HERMOSO!!
    como ases para cambias los codigos, para que se puedan utilizar en blogger, debe de ser dificil (te admiro :3)

    ResponderEliminar
    Respuestas
    1. Para paginas web es casi lo mismo para blogger ,pero algunos efectos que tienen en esa pagina ,aveces no me sale como debe ser u-u¡ por falta de codigos, y algunos codigos nose aun para que es x.x por eso tengo que estar modificando cada cosa hasta que salga como debe ser :3

      Eliminar
  4. Que lindo *--* gracias por compartirlo luna!
    Saludos~

    ResponderEliminar
  5. wau que preciosidad *-* jeje en mi proxima plantilla seguro que le doy uso :3
    Un besoo

    ResponderEliminar
  6. muy chulo, gracias por el tutorial ^^

    ResponderEliminar
  7. Luna tienes un premio en mi blog :3
    http://thaiskawaiiblog.blogspot.com/2014/02/primer-premio-del-blog-u.html

    ResponderEliminar
    Respuestas
    1. Muchisimas Gracias *-* me pasare ,pero los premios los publicare a partir del 3 de marzo o un poco mas antes x3 es que tengo que publicar tutoriales antes que empiezen mis clases >w<

      Eliminar
  8. Hermoso!! como siempre amiga tus creaciones y tus tutos maravillosos n_n espero poder usarlo en un futuro

    ResponderEliminar
  9. Holiiis ^^
    Acabo de descubrir tu blog, es genial *O*
    Porfis, ¿me podrías decir como se llama la canción que utilizas de fondo para el blog? :> La adorooo *O*

    Gracias ^^

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥