Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] codigo CSS slider

Estas en el tema de codigo CSS slider en el foro de CSS en Foros del Web. Muy buenas a todos, Por adelantado gracias por la ayuda. Es la primera vez que posteo algo, y también mi primera vez como "desarrollador web". ...
  #1 (permalink)  
Antiguo 08/05/2013, 13:45
 
Fecha de Ingreso: mayo-2013
Mensajes: 10
Antigüedad: 10 años, 10 meses
Puntos: 0
codigo CSS slider

Muy buenas a todos,

Por adelantado gracias por la ayuda. Es la primera vez que posteo algo, y también mi primera vez como "desarrollador web". Quiero decir que soy novato, así que no seáis muy duro conmigo.
Estoy creando la web de mi propia empresa, y estoy utilizando un efecto slider que pongo a continuación:

html en la página:

<div id="montage-wrap">
<div class="montage-block"> <span id="block1"></span>
<div class="thumb_content">
<p style="font-size: 22px;">socios fundadores </p>
<p><a href="xxxx.html">xxxxxxxxxxxxxxxx</a></p>
<p><a href="xxxx.html">xxxxxxxxxxxxxxxx</a></p>
<p><a href="xxxx.html">xxxxxxxxxxxxxxxx</a></p>
</div>
</div>
</div>


css en la hoja de estilos:

#montage-wrap {

width: 820px;
height: 214px;
}

.montage-block {

width: 274px;
height: 214px;
float: left;
display: block;
overflow: hidden;
position: relative;
margin: 0 4px 0 0;
background-color: #20552a;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #d6d6d6;
border-right-color: #d6d6d6;
border-bottom-color: #d6d6d6;
border-left-color: #d6d6d6;

}

.montage-block:last-child {

margin: 0;

} /* removes margin on last block */

#block1 {

width: 274px;
height: 214px;
position: absolute;
display: block;
background: url("../images/picture1.jpg") no-repeat;
-webkit-transition: top .7s ease-in-out;


Con esto consigo que al aproximar el cursor a la imagen, esta suba con un efecto slider y me deja ver el texto de atrás.

La cuestión es que con el -webkit-transition: top .7s ease-in-out; solo consigo que funcione en chrome y safari, y quiero que funcione en todos los navegadores.
Me gustaría que me explicasen que tengo que añadir para conseguirlo.

Gracias
  #2 (permalink)  
Antiguo 08/05/2013, 14:01
Avatar de alberto510a  
Fecha de Ingreso: abril-2013
Mensajes: 351
Antigüedad: 10 años, 10 meses
Puntos: 35
Respuesta: codigo CSS slider

Hola con jQuery puedes conseguir esto de forma sencilla si quieres o sino aquí te dejo un manual para que veas como se hacen transiciones en CSS más avanzadas:

http://www.desarrolloweb.com/manuales/css3.html

Desde el artículo 20 al final es todo de animaciones.

Saludos.
  #3 (permalink)  
Antiguo 08/05/2013, 16:00
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: codigo CSS slider

Las transiciones de CSS no funcionan en IE9. Usa transition a secas para IE10 y Firefox.

Aquí tienes una tabla de compatibilidad: http://caniuse.com/css-transitions

Y bienvenido al foro.
  #4 (permalink)  
Antiguo 08/05/2013, 16:07
Avatar de alberto510a  
Fecha de Ingreso: abril-2013
Mensajes: 351
Antigüedad: 10 años, 10 meses
Puntos: 35
Respuesta: codigo CSS slider

Gracias por el dato yo tampoco sabía eso pzin creía que esas normales si funcionaban.

Entonces te recomiendo jQuery VictorJota eso CREO que si te servirá jeje.

Saludos
  #5 (permalink)  
Antiguo 09/05/2013, 03:28
 
Fecha de Ingreso: mayo-2013
Mensajes: 10
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: codigo CSS slider

Cita:
Iniciado por pzin Ver Mensaje
Las transiciones de CSS no funcionan en IE9. Usa transition a secas para IE10 y Firefox.

Aquí tienes una tabla de compatibilidad: [url]http://caniuse.com/css-transitions[/url]

Y bienvenido al foro.
Muchas gracias a todos por tan rápida contestación. El caso es que ya había probado utilizar transition, colocado en la hoja css justo después de -webkit-transition: top .7s ease-in-out; quedando de esta manera;

#block1 {

width: 274px;
height: 214px;
position: absolute;
display: block;
background: url("../images/picture1.jpg") no-repeat;
-webkit-transition: top .7s ease-in-out;
transition-property:height;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:0s;
}

Lo primero hay alguna cosa rara, ya que transition no me deja usar top, como uso con webkit-transition, he de poner height.
Podéis probar que esto funciona en la siguiente página:

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition4

pegando el siguiente código:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:200px;
background:red;
transition-property:height;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:0s;

}

div:hover
{
height:100px;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

El efecto se produce, pero no es exactamente como yo lo tengo en mi página. Yo declaro una clase en la página html, a la que asigno el id block, como sigue:

<div id="montage-wrap">
<div class="montage-block"> <span id="block1"></span>
<div class="thumb_content">
<p style="font-size: 22px;">socios fundadores </p>
<p><a href="nosotros.html">Víctor García Castro</a></p>
<p><a href="nosotros.html">Jesús Carrero Riolobos</a></p>
<p><a href="nosotros.html">Pedro Fernández Ramírez</a></p>
</div>
</div>
</div>

Despues en la hoja de estilo css, el id block tiene asignado una imagen que es a la que le aplico el efecto de transition:

.montage-block:hover #block1 {

top: -215px;
}

el id block es que el tiene el efecto como digo

#block1 {

width: 274px;
height: 214px;
position: absolute;
display: block;
background: url("../images/picture1.jpg") no-repeat;
-webkit-transition: top .7s ease-in-out;
}

y mi pregunta es si puedo añadir el efecto para que funcione en firefox, opera y ie10, si modificar ni la hoja ni la forma en que la he configurado, simplemente añadiendo transition como decia antes.

Siento ser tan torpe, pero os comenté que estoy empezando, que en realidad esta es mi primera inclusión en la programación web.

Alguna idea......
  #6 (permalink)  
Antiguo 09/05/2013, 04:22
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: codigo CSS slider

Intenta poner el código con highlight o code.

Usa transition de la misma forma que usas -webkit-transition, porque es lo mismo. De hecho la última versión de Chrome te leerá transition:

Código CSS:
Ver original
  1. -webkit-transition: top .7s ease-in-out;
  2. transition: top .7s ease-in-out;

Luego tienes cosas por ahí como prefixfree, para automatizar el proceso de los prefijos propietarios.
  #7 (permalink)  
Antiguo 09/05/2013, 04:58
 
Fecha de Ingreso: mayo-2013
Mensajes: 10
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: codigo CSS slider

Cita:
Iniciado por pzin Ver Mensaje
Intenta poner el código con highlight o code.

Usa transition de la misma forma que usas -webkit-transition, porque es lo mismo. De hecho la última versión de Chrome te leerá transition:

Código CSS:
Ver original
  1. -webkit-transition: top .7s ease-in-out;
  2. transition: top .7s ease-in-out;

Luego tienes cosas por ahí como [URL="https://github.com/LeaVerou/prefixfree"]prefixfree[/URL], para automatizar el proceso de los prefijos propietarios.
Gracias pzin,

El código que utilizo lo encontré aquí:

http://www.cssreset.com/create-killer-sliding-boxes-with-css3/


He probado poniendo solo transition y no funciona, ni en chrome ni en firefox. Evidentemente que mi opinión no es la de un experto, y por lo tanto puede que sea "absurda", pero me parece una forma sencilla de tener un efecto sin recurrir a un script.
El caso es que tal como lo tengo, en chrome funciona, y no me explico porqué en los demás no puedo conseguir que funcione, usando la misma estructura, y añadiendo transition tal como se supone que funciona.

¿puede que se la forma en que está hecho el código? es decir, para que funcione en los demas navegadores, tengo que cambiar si o si la estructura del código?

Gracias
  #8 (permalink)  
Antiguo 09/05/2013, 05:34
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: codigo CSS slider

Si lo pones así, tal cual:

Código CSS:
Ver original
  1. -webkit-transition: top .7s ease-in-out;
  2. -moz-transition: top .7s ease-in-out;
  3. -o-transition: top .7s ease-in-out;
  4. transition: top .7s ease-in-out;

Debería de funcionar en, al menos, IE10, Opera, Chrome, Safari y Firefox.
  #9 (permalink)  
Antiguo 09/05/2013, 08:54
 
Fecha de Ingreso: mayo-2013
Mensajes: 10
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: codigo CSS slider

Cita:
Iniciado por pzin Ver Mensaje
Si lo pones así, tal cual:

Código CSS:
Ver original
  1. -webkit-transition: top .7s ease-in-out;
  2. -moz-transition: top .7s ease-in-out;
  3. -o-transition: top .7s ease-in-out;
  4. transition: top .7s ease-in-out;

Debería de funcionar en, al menos, IE10, Opera, Chrome, Safari y Firefox.
Pues no funciona, añadiendolo a la hoja css. No se porqué puede ser. Te dejo la página con sus hojas, y puedes probarlo con chrome y verás que funciona, y con el resto no. Estoy trabajando con bluegriffon. Por favor, si ves que el codigo es una chapuza no me lo tengas en cuenta, soy novato.
Gracias

http://ubuntuone.com/3aGRpnjTpHSleqThU3YQ24
  #10 (permalink)  
Antiguo 11/05/2013, 12:06
 
Fecha de Ingreso: mayo-2013
Mensajes: 10
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: codigo CSS slider

Alguien puede ayudarme con esto........(en el comienzo del hilo)

Gracias
  #11 (permalink)  
Antiguo 11/05/2013, 12:48
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: codigo CSS slider

Intenta subirlo a algún sitio para verlo in situ.
  #12 (permalink)  
Antiguo 12/05/2013, 03:22
 
Fecha de Ingreso: mayo-2013
Mensajes: 10
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: codigo CSS slider

Cita:
Iniciado por pzin Ver Mensaje
Intenta subirlo a algún sitio para verlo in situ.
Aqui tienes el proyecto

http://ubuntuone.com/3aGRpnjTpHSleqThU3YQ24

Gracias
  #13 (permalink)  
Antiguo 12/05/2013, 03:27
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: codigo CSS slider

Lo de in situ venía precisamente porque no pensaba descargarme nada.
  #14 (permalink)  
Antiguo 13/05/2013, 08:23
 
Fecha de Ingreso: mayo-2013
Mensajes: 10
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: codigo CSS slider

Cita:
Iniciado por pzin Ver Mensaje
Lo de in situ venía precisamente porque no pensaba descargarme nada.
Pensé que sería mejor que vieras todos los archivos (html y css), pero bueno....

Puedes ver la paǵina en www.idealos.es.

Es la página de inicio la que de momento tiene el efecto slider en las fotos.

Gracias
  #15 (permalink)  
Antiguo 13/05/2013, 18:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: codigo CSS slider

El problema es que no tienes definido un valor top como inicio. Añádeselo a #block1, #block2 y #block3. O...

Si quieres que te quede más curioso, por si algún día le cambias las medidas y no tener que volver a cambiarlas, y también para no tener que volver a repetir las mismos atributos y valores para cada una de los elementos, podrías simplificar tu código a algo así:

Código CSS:
Ver original
  1. .montage-block > span {
  2.   position: absolute;
  3.   top: 0;
  4.   left: 0;
  5.   bottom: 0;
  6.   right: 0;
  7.   background-repeat: no-repeat;
  8.   -webkit-transition: top .7s ease-in-out;
  9.   -moz-transition: top .7s ease-in-out;
  10.   -o-transition: top .7s ease-in-out;
  11.   transition: top .7s ease-in-out;
  12. }
  13.  
  14.   span#block1 { background-image: url("../images/picture1.jpg"); }
  15.   span#block2 { background-image: url("../images/picture2.jpg"); }
  16.   span#block3 { background-image: url("../images/picture3.jpg"); }
  17.  
  18. .montage-block:hover > span {
  19.   top: -215px;
  20. }

Así si quieres cambiar algo, no tienes que volver a cambiarlo en tres sitios distintos. Además de que te queda un código más reducido y curioso.
Luego tampoco tienes que especificar ningún ancho o alto, ya que tomará el ancho que tenga el elemento padre.
  #16 (permalink)  
Antiguo 14/05/2013, 01:31
 
Fecha de Ingreso: mayo-2013
Mensajes: 10
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: codigo CSS slider

Cita:
Iniciado por pzin Ver Mensaje
El problema es que no tienes definido un valor top como inicio. Añádeselo a #block1, #block2 y #block3. O...

Si quieres que te quede más curioso, por si algún día le cambias las medidas y no tener que volver a cambiarlas, y también para no tener que volver a repetir las mismos atributos y valores para cada una de los elementos, podrías simplificar tu código a algo así:

Código CSS:
Ver original
  1. .montage-block > span {
  2.   position: absolute;
  3.   top: 0;
  4.   left: 0;
  5.   bottom: 0;
  6.   right: 0;
  7.   background-repeat: no-repeat;
  8.   -webkit-transition: top .7s ease-in-out;
  9.   -moz-transition: top .7s ease-in-out;
  10.   -o-transition: top .7s ease-in-out;
  11.   transition: top .7s ease-in-out;
  12. }
  13.  
  14.   span#block1 { background-image: url("../images/picture1.jpg"); }
  15.   span#block2 { background-image: url("../images/picture2.jpg"); }
  16.   span#block3 { background-image: url("../images/picture3.jpg"); }
  17.  
  18. .montage-block:hover > span {
  19.   top: -215px;
  20. }

Así si quieres cambiar algo, no tienes que volver a cambiarlo en tres sitios distintos. Además de que te queda un código más reducido y curioso.
Luego tampoco tienes que especificar ningún ancho o alto, ya que tomará el ancho que tenga el elemento padre.
Muchísimas gracias pzin,

Lo que he hecho de momento es incluir una posición top de inicio como de indicabas. Tú código me parece lo correcto, pero no me funciona los link a cada nombre que aparece en el fondo.

Gracias nuevamente.

Etiquetas: color, html, slider
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:29.