12 de septiembre de 2012

Slideshow hecho sólo con CSS

Hace un rato vimos un Slider que apuntaba más a ser una galería de imágenes, asique quedo en deuda con ustedes y ahora vamos a ver un verdadero slider, quizás no es de los más sofisticados y vistosos, pero les garantizo que malo no es y vale la pena probarlo.

Hace mucho que tengo un código guardado en un archivo de notas y no recordaba de qué era. Hoy cuando lo abro veo que era de un SlideShow y, para ser honestos, no recuerdo de dónde lo saqué o quién me lo pasó, asique de momento no puedo darle los créditos a nadie. Si a ustedes les resulta conocido o saben de quién puede venir este invento, yo les agradezco así puedo darle los créditos que se merece :) la cuestión es que seguramente lo guardé por una cuestión de que está hecho pura y exclusivamente con CSS, que es lo que me gusta trabajo a mi y además es super práctico, fácil de instalar y de usar. Tiene la característica de ser adaptable al tamaño de la ventana, asique eso es super cómodo. Este slider se ve de la siguiente forma:









Bueno, ¿les gustó? Es sencillo de aplicar. Lo primero que vamos a hacer es colocar los estilos antes se la etiqueta ]]></b:skin> . Son largos, pero tranquilos que es fácil.


#slider {
text-align: center;
margin: 0 auto;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#slider label, a {
color: #444444;
cursor: pointer;
text-decoration: none;
}
#slider label:hover, #slider a:hover {
color: #000 !important;
}
#slider label, #slider #active, #slider img { -moz-user-select:none;-webkit-user-select:none; }

#slider input {
display: none;
}
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }
#overflow {
width: 100%;
overflow: hidden;
}
#slider article img {
width: 100%;
max-width:100% !important;
}
#slides .inner {
width: 500%;
line-height: 0;
}
#slides article {
width: 20%;
float: left;
}
/* Slider Styling */
/* Control Setup */
#controls {
margin: -25% 0 0 0;
width: 100%;
height: 50px;
}
#controls label {
display: none;
width: 50px;
height: 50px;
opacity: 0.3;
}
#active {
margin: 23% 0 0;
text-align: center;
}
#active label {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
background: #bbb;
}
#active label:hover {
background: #ccc;
border-color: #777 !important;
}
#controls label:hover {
opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
background: url('http://img140.imageshack.us/img140/7481/nextfy.png') no-repeat;
float: right;
margin: 0 -70px 0 0;
display: block;
}
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
background: url('http://img7.imageshack.us/img7/152/prevrt.png') no-repeat;
float: left;
margin: 0 0 0 -70px;
display: block;
}
#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5) {
background: #333;
border-color: #333 !important;
}
/* Info Box */
#slider .info {
line-height: 20px;
margin: 0 0 -150%;
position: absolute;
font-style: italic;
padding: 30px 30px;
opacity: 0;
color: #000;
text-align: left;
}
#slider .info h3 {
color: #333;
margin: 0 0 5px;
font-weight: normal;
font-size: 22px;
font-style: normal;
}
/* Slider Styling */
#slides {
margin: 45px 0 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 4px #666;
padding: 1%;
background: #fff;
background: rgb(252,255,244); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(219,218,201,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(219,218,201,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#dbdac9',GradientType=0 ); /* IE6-9 */
}
/* Animation */
#slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
#slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label{
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
#slider #controls {
margin: -25% 0 0 15%;
width: 70%;
height: 50px;
}
#slider #controls label {
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
#slide1:checked ~ #slides article:nth-child(1) .info,
#slide2:checked ~ #slides article:nth-child(2) .info,
#slide3:checked ~ #slides article:nth-child(3) .info,
#slide4:checked ~ #slides article:nth-child(4) .info,
#slide5:checked ~ #slides article:nth-child(5) .info {
opacity: 1;
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;
}
#slider .info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
/* Responsive Styling */
@media only screen and (max-width: 850px) and (min-width: 450px) {
#slider #slides {
padding: 1% 0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#slider #active {
margin: 22% 0 0;
}
}
@media only screen and (max-width: 450px) {
#slider #controls {
margin: -28% 0 0 24%;
width: 50%;
height: 50px;
}
#slider #active {
margin: 23% 0 0;
}
#slider #slides {
padding: 1% 0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#slider #slides .info {
opacity: 0 !important;
}
#slider #controls label {
-moz-transform: scale(0.6);
-webkit-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
}
}


Una vez colocado los estilos procedemos a colocar el html en una entrada o en un gadget HTML/Javascript, dependiendo de dónde lo quieran colocar ustedes.


<div id="slider">
<input checked type="radio" name="slider" id="slide1" />
<input type="radio" name="slider" id="slide2" />
<input type="radio" name="slider" id="slide3" />
<input type="radio" name="slider" id="slide4" />
<input type="radio" name="slider" id="slide5" />
<div id="slides">
<div id="overflow">
<div class="inner">
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label><label for="slide2"></label><label for="slide3"></label><label for="slide4"></label><label for="slide5"></label></div>
<div id="active">
<label for="slide1"></label><label for="slide2"></label><label for="slide3"></label><label for="slide4"></label><label for="slide5"></label></div>
</div>

Ahora simplemente reemplacen lo que está en rojo por la URL de la imágen que ustedes quieren mostrar. Lo que está en color azul son los títulos y el autor, ustedes pueden poner lo que ustedes quieran ahí, incluso una breve descripción de la foto o hasta también pueden directamente dejarlo en blanco y que no aparezca nada, eso corre por sus cuentas.

Espero que les haya sido de utilidad! Saludos!



cómo añadir un slideshow en mi blog, slideshows para blog, cómo colocar un slideshow en mi blog, cómo colocar un slide en mi blog, cómo añadir un slide en mi blog, cómo añadir un slideshow en mi blogger, slideshow para blogger, como colocar un slideshow en mi blogger, cómo colocar un slide en mi blog, como añadir un slide en mi blog, slide blog, slide blogger, gadgets, slideshow blog, slideshow blogger. 

2 comentarios:

  1. hola muy bueno tu slider me gusto el unico problema es que no se como reducir el tamaño del ancho y el alto

    ResponderEliminar
    Respuestas
    1. Hola! Gracias amigo, deberías agregarle el atributo de ancho y alto así:

      width: 800px;
      height; 950px;

      Modificando los valores por aquellos que necesites. ¡Saludos!

      Eliminar