Foros del Web » Creando para Internet » CSS »

input totalmente transparente

Estas en el tema de input totalmente transparente en el foro de CSS en Foros del Web. Hola, para hacer un input totalmente transparente que debo poner entre: Código: <input type= y /> La idea es la siguiente: Es un input para ...
  #1 (permalink)  
Antiguo 29/06/2009, 13:35
 
Fecha de Ingreso: junio-2009
Mensajes: 4
Antigüedad: 8 años, 5 meses
Puntos: 0
input totalmente transparente

Hola, para hacer un input totalmente transparente que debo poner entre:
Código:
<input type= y />
La idea es la siguiente: Es un input para logearse, pero en vez de colocar el input tradicional quiero poner una imagen detras, y el input siendo transparente va a parecer como si escribiera encima de la imagen.


Ayuda porfavor :(
  #2 (permalink)  
Antiguo 29/06/2009, 13:43
Avatar de gioramies  
Fecha de Ingreso: febrero-2008
Ubicación: Colombia
Mensajes: 217
Antigüedad: 9 años, 9 meses
Puntos: 14
Respuesta: input totalmente transparente

Hola. Lo primero que debes hacer es colocarle a tu input una clase, de esta forma:

Código HTML:
<input type="text" name="nombre_input" class="mi_clase_input" /> 
Luego debes mediante css asignarle al input una imagen de fondo, así:

Código HTML:
.mi_clase_input {
     background: url(´ruta_de_la_imagen/imagen.png´);
}
Es un ejemplo, espero logres adaptarlo a lo que necesitas. Saludos

Última edición por gioramies; 29/06/2009 a las 13:59 Razón: Correción ortográfica
  #3 (permalink)  
Antiguo 29/06/2009, 13:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: input totalmente transparente

Código css:
Ver original
  1. input {
  2. border: 0;
  3. background: transparent url(ruta_a_tu_imagen.ext) no-repeat; /*o el valor que necesites*/
  4. }

EDITO:
El tipo de la foto me tiene manía
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 29/06/2009, 13:53
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: input totalmente transparente

creo que se a lo que te refieres...
algo como lo que tiene esta web: http://web.rcarcamonster.com/ en el login y contraseña...
Para hacer eso no hace falta lo que propones... simplemente en el css del input le pones un background que es el icono y le pones un margin que sea suficiente como para que no escribas encima...

Saludos!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #5 (permalink)  
Antiguo 29/06/2009, 13:55
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: input totalmente transparente

vaya yo me he liado por aquí y también he chocado... pero vamos que te lo hemos resuelto tres!!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #6 (permalink)  
Antiguo 29/06/2009, 14:04
 
Fecha de Ingreso: junio-2009
Mensajes: 4
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: input totalmente transparente

El css va despues del codigo input? Ayuda porfavor, no soy partidario del css xD
  #7 (permalink)  
Antiguo 29/06/2009, 14:07
Avatar de gioramies  
Fecha de Ingreso: febrero-2008
Ubicación: Colombia
Mensajes: 217
Antigüedad: 9 años, 9 meses
Puntos: 14
Respuesta: input totalmente transparente

El css lo puedes colocar en una archivo externo o dentro del archivo html dentro de las etiquetas <style> que se colocan en la sección <head>. Puedes leer más en librosweb.
  #8 (permalink)  
Antiguo 29/06/2009, 14:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: input totalmente transparente

Cita:
Iniciado por Alexcore Ver Mensaje
El css va despues del codigo input? Ayuda porfavor, no soy partidario del css xD
Pues no has venido al mejor foro a decir eso, hereje
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 06/07/2009, 01:15
 
Fecha de Ingreso: julio-2009
Ubicación: La Plata
Mensajes: 233
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: input totalmente transparente

Hola alexcore,fijate èste còdigo que estoy muy seguro que te va a funcionar,yo lo tengo en mi web i corre bien:

En el HTML va lo siguiente:
Código:
<html>
<head>
<tittle></title>
</head>
<body>
<h2>Hola Mundo</h2>
<h5>Prueva De Transparencia:</h5>
  <div>
     <form>
          <input type="text" class="campo">
     </form>
  </div>
</body>
</html>
Y en el CSS:
Código:
.campo{border:0px solid;background-color:transparent;color:white}
Te aviso,en el còdigo CSS,en la clase .campo,le podès cambiar el color de letra,en donde dice:color:el color que quieras ponerle.Yo te recomiendo lo siguiente:Si la imagen que vas a tener en el fondo del input,es muy clara,te combiene ponerle color negro u otro que resalte a comparaciòn de los colores de la imagen de fondo ya que esto afecta a la lectura de los usuarios que visitan tu web,almenos que quieras que se queden ciegos,jejeje.
Fijate,que en el còdigo html,despuès de <head> y antes de </head>,podès poner un còdigo para llamar a un archivo que contenga los estilos CSS,que obviamente,este archivo va a tener su nombre y ,al final, ".css" asì: Cualquier Documento.css.para llamarlo,el còdigo es asì:
Código:
<link rel="stylesheet" href="ruta" type="text/css" media="all">
Espero que te halla servido y que no se me hagan ampollas en las manos...
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 00:09.