Autor Tema:  [MOD] Slider (Zoom Transition) css (sin java script)  (Leído 3000 veces)

0 Usuarios y 1 Visitante están viendo este tema.

  • *
  • Mensajes: 121
  • Actividad:
    0%
  • Karma: 54
  • Puntos de Comercio
    0 (0%)
    • Awards
[MOD] Slider (Zoom Transition) css (sin java script)
« en: 13 de Enero de 2013, 05:17:37 pm »
Hola de nuevo, hoy día decidí hacer 2 aportes espero y les halla gustado el anterior este es mas utilizado en las webs de películas aqui una imagen:



lo unico que no he logrado hacer es que en el slider contenga un enlace para la pelicula asi que si alguien lo adapta dejarlo en comentarios, para que edite el post.

por el momento el slider es para imágenes, hasta que lo adapten con enlace, por que cuando yo intente se me deformo y preferí postearlo así ;)

al cambiar la imagen tiene un efecto bonito y espero que les guste.

comencemos:

se van a default/css y abren el archivo css.css

y a lo ultimo pegan esto:

Código: [Seleccionar]
/**Slider ERICK**/

#slider {
  width: 640px;
  height: 320px;
  margin: 50px auto 0;
  position: relative; 
  background: #fff;

  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}

#slider:before, #slider:after {
content: '';
position: absolute;

width: 60%;
height: 20px;

-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);

-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);

left: 10px;
bottom: 13px;
z-index: -1;
}

#slider:after {
left: auto;
right: 10px;

-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg);
}

#slider ul {
  width: 140px;
  height: 40px;
  padding: 0 0 0 0;
  position: absolute;
  z-index: 10;
  list-style: none;
 
  left: 50%;
  margin-left: -70px;
  bottom: -60px;
}

#slider ul li:first-child {
  margin-left: 16px;
}

#slider ul li {
  float: left;
  margin-right: 12px;
  margin-top: 14px;
}

#slider ul li:last-child {
  margin-right: 0;
}

#slider ul li a {
  width: 12px;
  height: 12px;
  display: block;
  outline: none;
  border: none;
  position: relative;
  z-index: 2;
  background: #aaa;
 
  box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
  -moz-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
  -webkit-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;

  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  border-radius: 50%;
 
}

#slider ul li a:hover {
  background: #888;
}

#slider img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
   
-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

#slider img:target {
    opacity: 1;
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}

#slider img#five {
    opacity: 1;
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}

#slider img:not(:target), #slider img:target ~ img#five  {
  opacity: 0;
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
}

#slider ul li a[href="#five"] {
background: #777;
}

#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {
  background: #777;
}

#two:target ~ ul li a[href="#five"],
#three:target ~ ul li a[href="#five"],
#four:target ~ ul li a[href="#five"],
#one:target ~ ul li a[href="#five"] {
background: #aaa;
}

ahora se va a default/templates y abren home.tpl

y buscan esto:

Código: [Seleccionar]
<!--<bkcnpels>-->

abajo pegan esto:

Código: [Seleccionar]
<div id="slider">

<!-- Slides ERICK-->
<img id="one" src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg[/color" />
<img id="two" src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg" />
<img id="three" src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" />
<img id="four" src="http://cssdeck.com/uploads/media/items/2/2rT2vdx.jpg" />
<img id="five" src="http://cssdeck.com/uploads/media/items/8/8k3N3EL.jpg" />

<!-- Links for the slides! -->
<ul>
<li>
<a href="#one"></a>
</li>
<li>
<a href="#two"></a>
</li>
<li>
<a href="#three"></a>
</li>
<li>
<a href="#four"></a>
</li>
<li>
<a href="#five"></a>
</li>
</ul>
</div>

cambien las url de las imágenes por las suyas y listo.
Ojo: las imágenes tienen que ser de tamaño 640x320 por que si no se sale de su configuración.

eso es todo espero que les halla gustado, y hasta otro aporte :)

y como parece que no se puede dar karma, les agradeceria que le dieran like a mi pagina:



quiero llegar a los 3000 y mucho mas ;)

  • *
  • Mensajes: 1574
  • Actividad:
    0%
  • Karma: 346
  • Puntos de Comercio
    3 (66.67%)
  • Awards ¡Gracias por todos tus aportes! Placa exclusiva para clientes de MarcoRED.com
    • Awards
Re:[MOD] Slider (Zoom Transition) css (sin java script)
« Respuesta #1 en: 13 de Enero de 2013, 05:23:10 pm »
Genial♥


Ya le di LIKE:D
+1

  • *
  • Mensajes: 4568
  • Actividad:
    0%
  • Karma: 162
  • Puntos de Comercio
    5 (100%)
  • Awards ¡Gracias por todos tus aportes! Destacado por denunciar cualquier comportamiento inapropiado Por haber llegado a una actividad del 100%
    • TodoPelys
    • Awards
Re:[MOD] Slider (Zoom Transition) css (sin java script)
« Respuesta #2 en: 13 de Enero de 2013, 05:29:07 pm »
gran aporte fenomeno +1, estaria genial que algien lo adapte con enlaces y tambien para que se ajuste cualkier imagen aunque se pase del tamaño 640x320

  • *
  • Mensajes: 403
  • Actividad:
    0%
  • Karma: 102
  • Puntos de Comercio
    3 (100%)
  • Soy el Único
  • Awards Placa exclusiva para clientes de MarcoRED.com
    • PeliculasHol! peliculas online
    • Awards
Re:[MOD] Slider (Zoom Transition) css (sin java script)
« Respuesta #3 en: 15 de Enero de 2013, 06:25:50 pm »
buen aporte amigo luego vere que tal


"Proximamente"

  • *
  • Mensajes: 20
  • Actividad:
    0%
  • Karma: 0
  • Puntos de Comercio
    0 (0%)
    • Awards
Re:[MOD] Slider (Zoom Transition) css (sin java script)
« Respuesta #4 en: 17 de Septiembre de 2013, 06:58:32 am »
amigo porfa me ayudas hice como te dije y no me cambio en nada!! me podrias ayudar porfavor

GRacias

  • *
  • Mensajes: 1461
  • Actividad:
    0%
  • Karma: 62
  • Puntos de Comercio
    6 (100%)
  • Awards Destacado por denunciar cualquier comportamiento inapropiado
    • pelisxixo
    • Awards
Re:[MOD] Slider (Zoom Transition) css (sin java script)
« Respuesta #5 en: 17 de Septiembre de 2013, 09:28:11 am »
alguien tiene una captura de esto,es que se cayo la del autor del post

 

Temas Similares

  Asunto / Iniciado por Respuestas Último mensaje
4 Respuestas
2061 Vistas
Último mensaje 09 de Enero de 2012, 03:38:55 pm
por adrites
16 Respuestas
7158 Vistas
Último mensaje 28 de Enero de 2012, 10:59:43 pm
por samirios
1 Respuestas
1808 Vistas
Último mensaje 28 de Julio de 2012, 05:50:24 pm
por Peliculadicto
7 Respuestas
2009 Vistas
Último mensaje 13 de Enero de 2013, 04:34:45 pm
por ERICK
24 Respuestas
3488 Vistas
Último mensaje 05 de Mayo de 2013, 07:55:39 pm
por pipelilye