Foros del Web » Creando para Internet » CSS »

Que hace y como?

Estas en el tema de Que hace y como? en el foro de CSS en Foros del Web. Hola a todos, Estoy tocando la pagina desarrollada por otro programador y no entiendo como consigue hacer esta imagen de sustitucion en un boton. El ...
  #1 (permalink)  
Antiguo 27/08/2009, 06:21
 
Fecha de Ingreso: junio-2003
Mensajes: 318
Antigüedad: 20 años, 10 meses
Puntos: 0
Pregunta Que hace y como?

Hola a todos,
Estoy tocando la pagina desarrollada por otro programador y no entiendo como consigue hacer esta imagen de sustitucion en un boton.
El boton es el siguiente:

<button type="submit" title="Click button to submit your enquiry" tabindex="">Submit your enquiry</button>

Y su estilo este
form#frmProductRequest button {
width:138px;
margin:5px 0 0 0;
background:#ddd url(../images/btn-contact.gif) no-repeat 0 0;
float:left;
}

Esta metido dentro de un formulario denominado frmProductRequest. Asi es como lo referencia.
Pero, como consigue el rollover?

Esta utilizando algo similar a esto:
http://alexsancho.name/archives/2006...genes-con-css/
utiliza una misma imagen y cambia con el hover manteniendo oculta la mitad de la imagen del boton.
Pero este no tieene ningun hover.

Lo que no se, es que es el #ddd que aparece en el background. No lo he encontrado por ningun lado, ni se a que hace referencia.

me podeis ayuda?.
Gracias.
  #2 (permalink)  
Antiguo 27/08/2009, 06:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Que hace y como?

Esa técnica se conoce como sprite css
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 27/08/2009, 07:18
 
Fecha de Ingreso: junio-2003
Mensajes: 318
Antigüedad: 20 años, 10 meses
Puntos: 0
Respuesta: Que hace y como?

Ok gracias,
Me sirve de mucho para seguir aprendiendo sobre el tema.

Pero reitero que no veo el hover por ninguna parte y que no se que es el #ddd en el background.
  #4 (permalink)  
Antiguo 27/08/2009, 07:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Que hace y como?

Cita:
Iniciado por reycoy Ver Mensaje
Ok gracias,
Me sirve de mucho para seguir aprendiendo sobre el tema.

Pero reitero que no veo el hover por ninguna parte y que no se que es el #ddd en el background.
Notación en hexadecimal del color del fondo. Equivale a #dddddd y es un gris muy suave (221,221,221 en RGB).
#000000 es negro, #ffffff blanco, #0000ff azul...
Cuando son iguales entre sí los valores de cada par se pueden abreviar a sólo 3:
#ff6600 es lo mismo que #f60 Sin embargo #00f000 ya no se puede usar la notación corta.

Sobre el cambio de imagen en el botón de envío:
Fíjate en el html cómo tiene esa parte del código, quizás tenga algo como:
Cita:
input type="submit" value="Enviar" id="submit" class="submit" name="submit"/>
Si fuese así, deberías buscar las declaraciones para '.submit' y '.submit:hover'

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 27/08/2009 a las 07:43
  #5 (permalink)  
Antiguo 31/08/2009, 08:34
 
Fecha de Ingreso: junio-2003
Mensajes: 318
Antigüedad: 20 años, 10 meses
Puntos: 0
Respuesta: Que hace y como?

Mil gracias. Esa era la solución. No escontraba el input.
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 07:00.